JQuery data attribute

Door Danny von Gaal op 05-02-2015 14:44 gewijzigd op 05-02-2015 14:44

1.612 views

Ik gebruik twee data-attributes in mijn link en de een kan Jquery wel uitlezen en de ander niet. Help! Wie kan mij dit uitleggen?

Dit is me link:

<a href="#" data-href="<?php echo $row["id"]; ?>" data-naam="<?php echo $row["commonname"]; ?>" class="dialog-open-certverlengen"><img src="images/jquery/icons_los/check.png" title="Verlengen" /></a>

Dit me Jquery:


$(".dialog-open-certinfo").click(function(){
		var id = $(this).data("href");
		var commonname = $(this).data("naam");
		$.post('scripts/certificaatacties.php', {meerinfo: id}, function(data) {
			$('#certificaten-meer-info').dialog( "option", "title", commonname);
			$('#certificaten-meer-info').html(data);
			$('#certificaten-meer-info').dialog( "open" );
		});
	});

Als ik in de titel "commonname" wijzig in "id" dan zie ik wel het id staan maar anders niet de commonname.

Thomas van den Heuvel

05-02-2015 15:40

Twee dingen:
- je volgt de link, je navigeert dus naar # toe, voeg dus e.preventDefault() toe (en "e" in je click function)
- de class in de link (dialog-open-certverlengen) komt niet overeen met de class in het click event (dialog-open-certinfo)

Ik weet trouwens niet of .data() de juiste manier is, maar deze lijkt te werken (als je bovenstaande punten verbetert). Je zou ook kunnen overwegen om in plaats hiervan $(this).attr('<naam-van-je-data-attribuut>') te gebruiken.

Danny von Gaal

05-02-2015 16:29

Bedankt voor je reactie. Als eerste heb ik event.preventdefault toegevoegd en dat voorkomt inderdaad dat er een # in mijn url balk komt dus daar ben ik blij mee.

Daarnaast komt #certificaten-meer-info overeen met de div die wordt geopend en die ben ik helaas vergeten bij te voegen.


<div id="certificaten-meer-info">
</div>

Dit staat onderaan het document en daarin wordt mijn info geladen. Het zal wel goed zijn want als ik de variable commonname verander in tekst dan komt dat wel in de titelbalk.

Reageren

Inloggen om te reageren