SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I convert this javascript into jquery?

    Hi, I have a table that is generated by php (it has to be). Each row has a link that calls a javascript function. When the table is generated each link is given a number to put in the function call, like so:

    Code:
    <tr><td><a href="javascript:void(0);" onclick="doSomething('1');">Link 1</a></td></tr>
    <tr><td><a href="javascript:void(0);" onclick="doSomething('2');">Link 2</a></td></tr>
    <tr><td><a href="javascript:void(0);" onclick="doSomething('3');">Link 3</a></td></tr>
    <tr><td><a href="javascript:void(0);" onclick="doSomething('4');">Link 4</a></td></tr>
    <tr><td><a href="javascript:void(0);" onclick="doSomething('5');">Link 5</a></td></tr>
    Then in my javascript I can do something based on the number:

    Code:
    function doSomething(number) {
    //  do something with number. ajax call etc
    }
    But in jquery, I noticed that you define the onclicks in the code itself and not the links:

    Code:
    $("#linkid").click(function(){
     // do something. But how can I distinguish between each link?
     });
    I could have one function for each link, but that seems silly and long winded. Plus I don't know in advance how many rows will be generated. It could be 5000 rows!

    What is the way around this? I'm a bit confused by the move over to jquery tbh.

    David

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Easy. jQuery will let you bind a given function to many items on the page. Suppose you had table rows as follows:

    Code:
    <table id="myTable">
      <tr><td><a href="#" id="uniqueID_1">Link 1</a></td></tr>
      <tr><td><a href="#" id="uniqueID_2">Link 2</a></td></tr>
      <tr><td><a href="#" id="uniqueID_3">Link 3</a></td></tr>
      <tr><td><a href="#" id="uniqueID_4">Link 4</a></td></tr>
      <tr><td><a href="#" id="uniqueID_5">Link 5</a></td></tr>
    </table>
    You could bind a function to the click event like so:

    Code:
    $(document).ready(function() {
      
      $("#myTable a").click(function(e) {
        e.preventDefault(); // Stop the normal behavior that would happen with a click
     
        // Use $(this) to act upon the link that was clicked
        alert("The ID of the clicked link is " + $(this).attr("id"));
    
        // Change the background color of the clicked row
        $(this).closest("tr").css("background-color", "red");
     
      });
    
    });
    Hopefully that gets you pointed in the right direction.
    Last edited by raw10; Feb 22, 2012 at 16:36. Reason: Code typo!

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, I can see how it's supposed to work, but your example doesn't work. It seems that the function is never called.

    David

    EDIT:: Actually, ignore that, I forgot to include the jquery library.
    Thanks!

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems that I having trouble making this work on a table that has been inserted into the DOM. Take this example:

    table_test.html:
    Code:
    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    
      // Ajax setup
     $.ajaxSetup ({
      cache: false
     });
     var ajax_load = "Loading...";
    
     // On locality change
     var loadUrl = "tab.html";
     $("#load").click(function(){
      $("#tab")
       .html(ajax_load)
       .load(loadUrl);
     });
      
      $("#myTable a").click(function(e) {
        e.preventDefault(); // Stop the normal behavior that would happen with a click
     
        // Use $(this) to act upon the link that was clicked
        alert("The ID of the clicked link is " + $(this).attr("id"));
    
        // Change the background color of the clicked row
        $(this).closest("tr").css("background-color", "red");
     
      });
    
    });
    </script>
    </head>
    <body>
    <a href="#" id="load">Load table</a>
    <div id="tab">
    
    </div>
    </body>
    </html>
    tab.html:
    Code:
    <table id="myTable">
      <tr><td><a href="#" id="uniqueID_1">Link 1</a></td></tr>
      <tr><td><a href="#" id="uniqueID_2">Link 2</a></td></tr>
      <tr><td><a href="#" id="uniqueID_3">Link 3</a></td></tr>
      <tr><td><a href="#" id="uniqueID_4">Link 4</a></td></tr>
      <tr><td><a href="#" id="uniqueID_5">Link 5</a></td></tr>
    </table>
    The click() function for the table links doesn't work when they've been inserted into the DOM rather than be hard coded originally.

    Any ideas on how I can get around this?
    Using the vanilla method I posted above, this works fine.

    David

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [Solved] How can I convert this javascript into jquery?

    Turns out I had to bind the .on event:

    Code:
    // On row click
     $(document).on("click", "#browseAfterLocality table tr td a", function(e){
      //e.preventDefault();  // Stop the normal onClick behaviour
      alert("Clicked on "+$(this).attr("id"));
      $(this).closest("tr").css("background-color", "red");
     });
    Works like a treat. Thanks for your help.

    David

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, when using elements inserted into the DOM you can't just use the .click() event. In the past you might use .live("click", function() {}), but with jQuery 1.7, .on() is the way to go.


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
  •