$(document).ready(function() {
$("body").on("click", "a", function(event) {
event.preventDefault();
var classenlace = "." + $(this,"a").prop("class");
//var section = $(this).prop("id");
var section = this.id;
$.ajax({
url: $(this).prop("href")
}) .done(function(data) {
if (data) {
if(section == "enlace" ) {
var name = $(classenlace).data('name');
var lastname = $(classenlace).data('lastname');
}
}
});
});
});
<?php
foreach ($conection->query($result3) as $row3) {
$name = $row3['name'];
$lastname =row3['lastname'];
?>
<a href="ficha.php" id="enlace" class="enlace"
data-name = "<?php echo $name; ?>"
data-lastname = "<?php echo $lastname; ?>">
<?php echo "- ".$name." ".$lastname; ?>
</a>
<?php
}
?>
To forgive my English
This code is not working,
There are 5 names and surnames:
Any of the 5 links always returns: John smith
Why is this happening?
</div>
You must use the attr element of jQuery, it is better, try with the following code, first extract the data-name and data-lastname values and then send them as parameters inside the ajax function next to the url
$(document).ready(function() {
$("body").on("click", "a", function(event) {
event.preventDefault();
if($(this).attr("id").valueOf() == "enlace"){
var name = $(this).attr("data-name").valueOf();
var lastname = $(this).attr("data-lastname").valueOf();
}
alert(name + " " + lastname);
$.ajax({
url: $(this).attr("href").valueOf()
}).done(function(data) {
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="ficha.php?" id="enlace" class="enlace"
data-name = "name1"
data-lastname = "lastname1">
Name1
</a>
<a href="ficha.php?" id="enlace" class="enlace"
data-name = "name2"
data-lastname = "lastname2">
Name2
</a>
<a href="ficha.php?" id="enlace" class="enlace"
data-name = "name3"
data-lastname = "lastname3">
Name3
</a>
</div>
You should use $(this) instead of $(this,"a") in the JavaScript part.