SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Jquery $.ajax

Hybrid View

  1. #1
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery $.ajax

    Hi.
    How can I get a reference to the LI clicked ?
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    style type="text/css">
    </
    style>
    <
    script type="text/javascript" src="jquery/jquery-1.2.2.js"></script>
    <script type="text/javascript">
    $(document).ready( function () {
        $(".employeeNames").click( function () {
            $.ajax({ 
                type: "GET", 
                url: "employee_details.php", 
                data: "id="+$(this).attr('id'), 
                success: function(msg){ 
                    //How to get a reference to the li clicked
                    $(this).children("div").text(msg);
                    //It doesn't work
                } 
            });
        });
    });
    </script>
    </head>
    <body>
    <ul>
    <li class="employeeNames" id="48"><div></div>yasin1</li>
    <li class="employeeNames" id="47"><div></div>provapop3</li>
    <li class="employeeNames" id="46"><div></div>yasin</li>
    </ul>
    </body>
    </html> 

    Bye.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    A very good resource that takes you through the varied ays of using the this keyword with jquery is http://www.learningjquery.com/2007/08/what-is-this which also includes some useful ajax examples.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    A very good resource that takes you through the varied ays of using the this keyword with jquery is http://www.learningjquery.com/2007/08/what-is-this which also includes some useful ajax examples.
    Thanks a lot I'm taking a look

    Bye.

  4. #4
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    style type="text/css">
    </
    style>
    <
    script type="text/javascript" src="jquery/jquery-1.2.2.js"></script>
    <script type="text/javascript">
    $(document).ready( function () {
        $('.employeeNames').click( function () {
        var clickedItem = this;
            $.ajax({ 
                type: "GET", 
                url: "employee_details.php", 
                data: 'id='+$(this).attr('id'), 
                success: function(msg){ 
                    $(clickedItem).children('div').text(msg);
                    
                } 
            });
        });
    });
    </script>
    </head>
    <body>
    <ul>
    <li class="employeeNames" id="employee_48">test1<div></div></li>
    <li class="employeeNames" id="employee_47">test2<div></div></li>
    <li class="employeeNames" id="employee_46">test3<div></div></li>
    </ul>
    </body>
    </html> 

  5. #5
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by whisher View Post
    Thanks a lot I'm taking a look

    Bye.

    A deep look very good tutorial
    it's what I need !

    Bye.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    @wisher: My first solution was that precise one, where you save the context into a variable called self, or clickedItem,but then I realised that jQuery provides a much better way of doing things.

    I was then thinking of doing something like this, but it may require a bit more thought.

    Code Javascript:
    $(this).ajax({ 
        type: "GET", 
        url: "employee_details.php", 
        data: 'id='+this.attr('id'), 
        success: function(msg){ 
            this.children('div').text(msg);
        } 
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •