Question

I have a script that calls a php page via jquery/ajax. The results would look like this:

<table class="table" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th scope="col">Title1</th>
      <th scope="col">Title2</th>
      <th scope="col">Title3</th>
    </tr>
  </thead>
  <tbody><?php echo $wait_list; ?></tbody>
</table>
<div>
  <div id="statcount">Rows: <?php echo $row_count; ?></div>
</div>

When this is called via the jquery/ajax call it displays the table information and at the end the div information. However I dont want the bottom div to show, I actually want it removed from the data, I just have it there so I can grab the count and put it in a different div from the script calling this file so I dont have to make 2 seperate jquery/ajax calls. So when the jquery/ajax call is made it runs this on success:

  function updateList(data){
      $('#rowcount').html($('#statcount',data).html());
      $('#statcount',data).remove();
      $("#waitlist").html(data);
  }

As you can see Im using that div to populate a seperate area on the page. But once that is done I dont want the div from the php page to show up in #waitlist. I tried the remove() function as you see above but that doesnt work. Any suggestions?

Answer 1

I think you are passing data as the scope parameter for jQuery selector and hence you are not getting any matches.
Try this:

function updateList(data)
{       
    var lData = $("<div>" + data + "</div>");
    $('#rowcount').html($('#statcount',lData).html());       
    $('#statcount',lData).remove();       
    $("#waitlist").html(data);   
}