JQuery: retrieving specific user data from Html page

Question

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>

Pranav C Balan · Accepted Answer · 2014-02-14 13:38:02Z

2

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

edited Feb 14, 2014 at 13:38

answered Feb 14, 2014 at 13:29

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DanielTheRocketMan Over a year ago

Thank you! You are right this is one of the problems, but it is not working yet. I think there is some problem in the JQuery code.

Pranav C Balan Over a year ago

use latest version of jQuery

Clément Andraud · Accepted Answer · 2014-02-14 13:30:59Z

1

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>

answered Feb 14, 2014 at 13:30

Clément Andraud

9,26927 gold badges89 silver badges162 bronze badges

Comments

Sudharsan S · Accepted Answer · 2014-02-14 13:36:08Z

0

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>

answered Feb 14, 2014 at 13:36

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Comments

snalkum · Accepted Answer · 2014-02-14 13:38:29Z

0

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

answered Feb 14, 2014 at 13:38

snalkum

164 bronze badges

Collectives™ on Stack Overflow

JQuery: retrieving specific user data from Html page

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related