How do I get cell values on click event from webpage tabs after the first one?

Question

I have tried javascript and JQuery. I know how to write the code to get the cell values from my first tab but the same function does not work on the other tabs on my webpage. It seems as if the table in my other tabs is just a view. I am new to javascript and JQuery so think I might be missing something easy. I have used ".on" in my click function and that doesn't help. Here is the Javascript code and JQuery code, both work by grabbing the cell value I click but only for the first tab:

JavaScript

init();

function init(){

addRowHandlers('customerTable');
}

function addRowHandlers(tableId) {
    if(document.getElementById(tableId)!=null){
        var table = document.getElementById(tableId);
        var rows = table.getElementsByTagName('tr');
        var cid = '';
        var name = '';

        for ( var i = 1; i < rows.length; i++) {

            rows[i].i = i;
            rows[i].onclick = function() {

                cid = table.rows[this.i].cells[0].innerHTML;                
                name = table.rows[this.i].cells[1].innerHTML;
                alert('cid: '+cid+' name: '+name);
            };
        }
    }
}

JQuery

$('#customerTable').find('tr').click(function() {
    var $id = $(this).closest("tr")   
                       .find(".custId")   
                       .text();       
    var $name = $(this).closest("tr") 
                       .find(".custName")    
                       .text(); 
   alert($name);
    $('.defaultTextBox.text_custId:text').val($id);
    $('.defaultTextBox.text_custName:text').val($name);
});

In the end my goal is to get the elements clicked and set the text in my text boxes to those values, which you can see I did in the JQuery, but it only works on my first page. I need the click in my table to work on all tabs. Thanks in advance!

Edit

<div id="removeCustomer" class="tabcontent">
  <h3>Pick a customer to remove!</h3>
  <div class="container">
   <br />
   <h2 align="center">Search here to find the customer you want to remove</h2><br />
   <div class="form-group">
    <div class="input-group">
     <span class="input-group-addon">Search</span>
     <input type="text" name="search_text" id="search_text" placeholder="Search by name, phone number, email, or state" class="form-control" />
    </div>
   </div>
   <br />
   <div class="result"></div>
  </div>
</div>

The "removeCustomer" id is one of the tabs. So I have multiple tabs using the same, "result", which I think is the problem I just do not know how to solve it. If I Left out "result" it would not generate a table.

Here is the JQuery which uses a php file to connect to my database and get my data. And this is what generates result.

JQuery

$(document).ready(function(){

  load_data();

  function load_data(query)
  {
    $.ajax({
    url:"fetchCustomers.php",
    method:"POST",
    data:{query:query},
    success:function(data)
    {
      $('div.result').html(data);
    }
  });
  }
  $('input.form-control').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
 });
});

Thanks again.

This sounds like an event delegation issue. Using `on()` alone isn't enough, you need to use it correctly, eg https://stackoverflow.com/a/1207393/519413 — Rory McCrossan, Apr 14 '20 at 15:45
Side note; `$(this).closest("tr")` is unnecessary. Your click handler is bound to each row. The `this` is already the `tr` — Taplar, Apr 14 '20 at 15:46
@RoryMcCrossan I have used this code to even see if it recognizes the click. It does on the first tab but not on the other, so still the same problem. `$(document).on('click','#customerTable',function(){ alert('Clicked'); });` — Clayton McDonald, Apr 14 '20 at 15:47
In which case could you please add a sample of your HTML to the question, along with the code which retrieves the content for the new tab and adds it to the DOM — Rory McCrossan, Apr 14 '20 at 15:50
*"my first tab" - "the table in other tabs"* - these two statements, combined with `$("#customTable")` indicate that you have multiple ``s, **all with the same id** - this doesn't work, they have to have different IDs (or use a class) as `$("#id")` will always give just the first one. Compare `console.log($("#customTable").length, $("[id=customTable]").length).`. But you do seem to mix the terms "tab" and "page" -so hard to tell without a more complete example. — freedomn-m, Apr 14 '20 at 15:59
@RoryMcCrossan I added the HTML. That is one tab, the "removeCustomer" tab. — Clayton McDonald, Apr 14 '20 at 16:03
What does this give you: `console.log($("#customTable").length, $("[id=customTable]").length)` ? — freedomn-m, Apr 14 '20 at 16:04
@freedomn-m I have created one table in my php file, "fetchCustomers.php". All tabs are trying to use the same php file which leads them to use the same table, is that a problem? — Clayton McDonald, Apr 14 '20 at 16:06
That doesn't answer the question - if each tab uses the same php file and you have multiple tabs, then you will be using the php file multiple times and creating a different table for each tab - so yes, it's the problem. But it depends on what you mean by "us the same php file" — freedomn-m, Apr 14 '20 at 16:08
@freedomn-m Answering your first question, it gives me 14. And in my added JQuery code, in the function load_data(), you will see the php file "fetchCustomers.php". All tabs are use the result from that. — Clayton McDonald, Apr 14 '20 at 16:15
Ok, using `console.log($("#customTable").length, $("[id=customTable]").length)` gives you "14"? or "1, 14"? You have 14 tabs? Each "tab" has its own table (if you look in the *rendered* output) - each with the same ID. `$("#id")` will only ever give you the first one. It's the equivalent of `document.getElementById` (note, not "get element*s*") — freedomn-m, Apr 14 '20 at 16:19

How do I get cell values on click event from webpage tabs after the first one?

0 Answers0