SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,106
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post problem on these onclick

    HI, I need some help on this how to do this in JavaScript.....my tr onclick will fires after i press cancel in the confirm message of my td.or after i delete a record it will fires my onclick display...what i want is, if i will delete the record or cancel my, display onclick should not fires.


    HTML Code:
    <table>
       <tr onclick=display"()">
        <td> 1 </td>
        <td> computer table </td>
        <td>  2000</td>
        
         <td a onclick="return confim('are you sure you want to delete this?')"  href="deletepage.php">Delete</td>
      </tr>
    
    
    </table>

    Thank you in advance

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    So you want the display() function to be executed when the user clicks on the table row, unless they click on the "Delete" table cell, in which case you want the user to answer a confirm dialogue.
    Correct?

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,106
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Ok then, first off, get rid of the inline event handlers, then use event delegation.
    This involves catching the click on the table, examining what triggered it and reacting accordingly:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Event delegation example</title>
      </head>
      
      <body>
        <table id="myTable">
          <tr>
            <td>1</td>
            <td>Computer table</td>
            <td>2000</td>
            <td><a href="deletepage.php">Delete</td>
          </tr>
        </table>
        
        <script>
          var myTable = document.getElementById('myTable');
    
          myTable.addEventListener('click', function(event) {
            var target = event.target;
    
            if(target.tagName === 'A'){
              if(!confirm('Are you sure you want to delete this?')){
                event.preventDefault();
              }
            } else if(target.tagName === 'TD'){
              console.log('The display function would go here');
            }
          });
        </script>
      </body>
    </html>
    Any questions, just let me know.

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,106
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post

    Quote Originally Posted by Pullo View Post
    Ok then, first off, get rid of the inline event handlers, then use event delegation.
    This involves catching the click on the table, examining what triggered it and reacting accordingly:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Event delegation example</title>
      </head>
      
      <body>
        <table id="myTable">
          <tr>
            <td>1</td>
            <td>Computer table</td>
            <td>2000</td>
            <td><a href="deletepage.php">Delete</td>
          </tr>
        </table>
        
        <script>
          var myTable = document.getElementById('myTable');
    
          myTable.addEventListener('click', function(event) {
            var target = event.target;
    
            if(target.tagName === 'A'){
              if(!confirm('Are you sure you want to delete this?')){
                event.preventDefault();
              }
            } else if(target.tagName === 'TD'){
              console.log('The display function would go here');
            }
          });
        </script>
      </body>
    </html>
    Any questions, just let me know.
    HI pullo, it's working thank you, but i have another problem..i could not get the id of my tr..because before i use the onclick and put some parameters in the display function.

    something like this.

    PHP Code:
    <tr class="myclass" onclick="display('.$studntid.');"
    now i removed display(),and put it on the elseif statement as what your example shows...now i am confuse on how to get the studntid and put it on the display function.


    Thank you in advance.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Could you post the HTML of one of your tables?

  7. #7
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,106
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    here it is...

    HTML Code:
    <table id="mytable">
    <tbody>
    <tr id="mytr" class="row0" value="0084">
       <td>Maria</td>
       <td>Garcia</td>
       <td>23</td>
    </tr>
    <tr id="mytr" class="row1" value="0078">
       <td>Jenny</td>
       <td>Falcone</td>
       <td>27</td>
    </tr>
    <tr id="mytr" class="row0" value="0043">
       <td>Mark</td>
       <td>Miller</td>
       <td>26</td>
     </tr>  
    <tr id="mytr" class="row1" value="0016">
       <td>Michelle</td>
       <td>Maddeline</td>
       <td>24</td>
    </tr>   
      
    </tbody>
    </table>

  8. #8
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,106
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Could you post the HTML of one of your tables?
    Hi pullo is it possible to get the value of tr by using there id in javascript.?

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,807
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You should get rid of the confirm - that was used for debugging in older browsers before they all had a built in debugger. Some browsers display additional options for debugging use in the confirm box asking your visitors to disable dialogs or JavaScript on your page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hey jemz,

    Your <tr> elements all have the same id.
    That will stop things from working. You'll need to change that to a class or something.

    Anyway, I would just store the parameters as a data attribute on the respective elements and access them from the event handler:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Event delegation example</title>
      </head>
      
      <body>
        <table id="myTable">
          <tbody>
            <tr class="row0" data-value="0084">
              <td>Maria</td>
              <td>Garcia</td>
              <td>23</td>
              <td><a href="deletepage.php">Delete</td>
            </tr>
            <tr class="row1" data-value="0078">
              <td>Jenny</td>
              <td>Falcone</td>
              <td>27</td>
              <td><a href="deletepage.php">Delete</td>
            </tr>
            <tr class="row0" data-value="0043">
              <td>Mark</td>
              <td>Miller</td>
              <td>26</td>
              <td><a href="deletepage.php">Delete</td>
            </tr>  
            <tr class="row1" data-value="0016">
              <td>Michelle</td>
              <td>Maddeline</td>
              <td>24</td>
              <td><a href="deletepage.php">Delete</td>
            </tr>   
          </tbody>
        </table>
        
        <script>
          var myTable = document.getElementById('myTable');
    
          myTable.addEventListener('click', function(event) {
            var target = event.target;
    
            if(target.tagName === 'A'){
              if(!confirm('Are you sure you want to delete this?')){
                event.preventDefault();
              }
            } else if(target.tagName === 'TD'){
              console.log('This row has a value of ' + target.parentNode.dataset.value);
            }
          });
        </script>
      </body>
    </html>


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
  •