I am trying to get the specific username information from the links below. When one of the links is clicked, the username information should be kept in the var username. However, it is not working. Any help is very welcome.
<!doctype html>
<?php
$theUsernameDaniel="danielcajueiro";
$theUsernameMarcelo="marcelopapini";
?>
<html>
<head>
<meta charset="utf-8" />
<title>ControllingHiperlinks</title>
<script src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("a.peoplePage").click(function(event) {
var username=$(this).data("username");
alert(username);
event.preventDefault();
});
});
</script>
</head>
<body>
<!-- Updated after the answer below of @Pranav-C-Balan -->
<a class="peoplePage" data-username="<?php echo $theUsernameDaniel ?>" href=""> Daniel Cajueiro</a>
<a class="peoplePage" data-username="<?php echo $theUsernameMarcelo ?>" href="">Marcelo Cajueiro</a>
</body>
</html>
Missing "" in your html code
<a class="peoplePage" data-username="<?php echo $theUsernameDaniel ?>" href=""> Daniel Cajueiro</a>
<!--................................^................................^.............................-->
<a class="peoplePage" data-username="<?php echo $theUsernameMarcelo ?>" href="">Marcelo Cajueiro</a>
<!--................................^................................^.............................-->
Use latest version of jQuery library
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
Otherwise use
var username=$(this).attr("data-username");
instead of
var username=$(this).data("username");
You have to add quotes like :
<a class="peoplePage" data-username="<?php echo $theUsernameDaniel ?>" href=""> Daniel Cajueiro</a>
<a class="peoplePage" data-username="<?php echo $theUsernameMarcelo ?>" href="">Marcelo Cajueiro</a>
Use href="#" or href="javascript:void();" . You put href="" means it will redirect to some other blank page.
<a class="peoplePage" data-username=<?php echo $theUsernameDaniel ?> href="#"> Daniel Cajueiro</a>
<a class="peoplePage" data-username=<?php echo $theUsernameMarcelo ?> href="#">Marcelo Cajueiro</a>
You can use jquery attr like this http://jsfiddle.net/NE4dV/1/:
var user1;
$(document).ready(function(){
$('body a').click(function(){
user1 = $(this).attr('data-username');
alert(user1);
return false;
});
});