Table rows coming back after removal - jquery

Question

I'm having the strangest issue and I can't find another SO thread that captures it.

I render a table with many rows based on members of a group. When I switch members of the group I use .remove() to get rid of the rows in the table and recall the ajax and associated callback function to rerender the rows without reloading the page. The rows get deleted just fine, but they come back with the new rows appended properly. I've tried just about every variations in Jquery and plain javascript including .deleteRow() but nothing seems to get rid of these for good. It all produces the same behavior. Relevant anonymized code is below:

Script:

  //get information and create dropdown
  ApiRequest.call("GET", barCall, null, "", basicAuth, dropdownBuilder);
  function dropdownBuilder(responseStatus, response) {
    if (responseStatus == 200) {

      var parseInfo = JSON.parse(response)

      $("#dropdown").append('<a class="dropdown-toggle" data-toggle="dropdown" id="list-title" aria-haspopup="true" aria-expanded="false">All<span class="caret"></span></a><ul class="dropdown-menu" id="name-dropdown"></ul>')

      $("#name-dropdown").append("<li><a href='#' id='dropdownBase'>All</a></li>")

      $("#dropdownBase").on('click', function(){
        $("#list-title").html('All<span class="caret"></span>');
        $("#tableBody").children().remove();
        ApiRequest.call("GET", fooCall, null, "", basicAuth, tableFunction);
      });

      for (i = 0; i < parseInfo.length; i++) {
        liElement = "<li><a href='#' id='dropdown" + parseInfo[i].id + "'>"parseInfo[i].name"</a></li>"
        $("#name-dropdown").append(liElement)

        $("#dropdown" + parseInfo[i].id).on('click', {theprovider: parseInfo[i]}, function(el) {
          $("#list-title").html(el.data.theperson.name + '<span class="caret"></span>');
          $("#tableBody").children().remove();
          ApiRequest.call("GET", fooCall, null, "", basicAuth, tableFunction);
        });
      }  
    } else {
        var text = "error code: "
        notification.text(text.concat(responseStatus).concat(" ").concat(response));
        console.log("not good")
        console.log(responseStatus)
    }
  }

  // get all the records for a specific provider
  ApiRequest.call("GET", fooCall, null, "", basicAuth, tableFunction);
  function tableFunction(responseStatus, response) {

    if (responseStatus == 200) {
      var parsedJsonObject = JSON.parse(response);

      if(parsedJsonObject.length>0){
        for (i = 0; i < parsedJsonObject.length; i++) {

          var htmlStructure = "<tr>...foo...</tr>" 

          $('#tableBody').append(htmlStructure);
        }
      }
    }
  }

HTML:

<div class="container">
<div class="row interact">
  <div class="col-sm-12">
    <div class="btn-group" id="dropdown"></div>
  </div>
</div>
</div>
<div class="container-fluid">
  <div class="row">
    <table id="table" class="table table-hover">
      <thead>
      <tr class="filters">
        <th class="filter"><h3>Head1</h3></th>
        <th class="filter"><h3>Head2</h3></th>
        <th class="filter"><h3>Head3</h3></th>
        <th class="filter"><h3>Head4</h3></th>
        <th class="filter"><h3>Head5</h3></th>
      </tr>
      </thead>
      <tbody id="tableBody">
      </tbody>
    </table>
  </div>
</div>

Anyone have any ideas? When I remove the elements they should be gone for good!

I don't really know much about Json and ajax however I do believe the proble is at this line `for (i = 0; i < parsedJsonObject.length; i++)` — Adam Buchanan Smith, Jan 15 '16 at 22:51
If they are being removed before you do the ajax query again, then you're calling those rows again in your ajax query. Have you logged your query to see if you're returning everything properly? — ntgCleaner, Jan 15 '16 at 22:52
Put some breakpoints in the code and walk through it. There is nothing obvious sticking out and nothing stored that could be included with the new data — charlietfl, Jan 15 '16 at 23:10
It seems it's because of an interaction with tableSorter. TableSorter keeps the rows in its cache. If I update the cache it works fine. I hadn't included that code as it felt irrelevant. Sorry! — Jeastburn, Jan 15 '16 at 23:24
Specifically, this solved my problem: http://stackoverflow.com/q/1903788/5335953 — Jeastburn, Jan 15 '16 at 23:42

score 0 · Answer 1 · answered Jan 15 '16 at 23:30

2 Issues that could cause that problem:

Issue 1:

Inside your dorpdownBuilder you call logic if (responseStatus == 200). You forgot to check the readySate of the ajax request, because (responseStatus == 200) get fired multiple times during the livetime of the ajax request.

if( responseStatus === 200 && readyState === 4){//logic get called only ones RIGHT}

if( responseStatus === 200 ){ //logic get called multipletimes WRONG}

Issue 2:

After the dropdownBuilder finished his work you got 2 onclick listeners inside your #dropdown div. Another problems are caused by event bubbling.

After an event triggers on the deepest possible element, it then triggers on parents in nesting order..

Stopping the bubbling [...] event.stopPropagation()

Read more about readySate. Read more about event bubbling.

Table rows coming back after removal - jquery

1 Answers1