CODEWITHSUNDEEP
phpjqueryhtml
DanielTheRocketMan
DanielTheRocketMan

Reputation: 3249

JQuery: retrieving specific user data from Html page

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>

Upvotes: 2

Views: 100

Answers (4)

snalkum
snalkum

Reputation: 16

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;
    });
});

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115222

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");

Upvotes: 2

Sudharsan S
Sudharsan S

Reputation: 15393

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>

Upvotes: 0

Cl&#233;ment Andraud
Cl&#233;ment Andraud

Reputation: 9269

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>

Upvotes: 1

Related Questions