Question

In the following code, I have a div around each row in a table that I would like to update periodically. With this code, I can call a url passing the id for each div as a parameter and get back the correct replacement html for the row from my server. Unfortunately, once I get the html back, I am unable to figure out how to properly replace the contents of each div.

How would you update this jquery code to update each div based on the html returned from the server?

    <table class="problems" cellspacing="0" width="900">
      <tr style="color:#00ce1d;font-weight:bold;text-align:left">
        <td>One</td><td>Two</td>
      </tr>

      <tr>
       <div id='1' class='playerRow'>
          <td> One</td>
          <td> Two</td>
       </div>
      </tr>

      <tr>
       <div id='2' class='playerRow'>
          <td> One</td>
          <td> Two</td>
       </div>
      </tr>

    </table>

    function updateRows() {
        var getDivs = 0;

        //iterate div with class playerRow
        $("div.playerRow").each(function() {
            alert('div id--'+this.id);
            var theDiv = $(this)

            // send ajax requrest to url encoded as div.id
            $.get('/myServerUrl?id='+this.id, function(data) {
                //The right url response comes back
                alert('div id--'+this.url+'--ajax response--'+data);

                //###### Problem area  ##########
                //Can't figure out how to view the current Div contents or update them.
                //alert('current contents ='+theDiv.html());
                //theDiv.replaceWith(data);
                //alert('current contents ='+theDiv.html());            
            });
          });
    }
    updateRows(); //The first time

Answer 1

First your markup is wrong

 <tr>
   <div id='1' class='playerRow'>
      <td> One</td>
      <td> Two</td>
   </div>
  </tr>

The TD does not belong in a DIV but in a TR!

You should fix that first. This should work:

 <tr id='1' class='playerRow'>
      <td> One</td>
      <td> Two</td>
  </tr>

---

Maybe the jQuery .load is what you need:

Description: Load data from the server and place the returned HTML
into the matched element.

    load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )

url A string containing the URL to which the request is sent.

data A map or string that is sent to the server with the request.

complete(responseText, textStatus, XMLHttpRequest) A callback function that is executed when the request completes.

Sample:

  $('#result').load('ajax/test.html');

So your code would be

  $(".playerRow").each(function() {
                 $(this).load('/myServerUrl?id='+this.id)
   })