Question

I’m having trouble figuring out an efficient way to update a column in an html table without reloading the entire table. The table is a list of player stats, all of which are stored on my MYSQL database and loaded into the table except for the last column. The data in last column of the table comes from an XML file. There is a select drop down on the page that when the user changes it, I need the page to do some calculation on the XML data and reload only the last column of the table without having to make an AJAX call and reload the entire stats table. Currently I reload the entire table which is quite slow. This is how I am generating the table:

echo '<table name="currentTable" id="battersTable">
                <thead>
                    <tr>
                        <th>&nbsp </th>
                        <th>NAME</th>
                        <th>AGE</th>
                        <th>
                            <select class="posSelect" onchange="posSelect(this.value, this.parentNode.parentNode.parentNode.parentNode)">
                                <option value="ALL">POS: ALL</option>
                                <option value="C">POS: C</option>
                                <option value="1B">POS: 1B</option>
                                <option value="2B">POS: 2B</option>
                                <option value="SS">POS: SS</option>
                                <option value="3B">POS: 3B</option>
                                <option value="MI">POS: MI</option>
                                <option value="CI">POS: CI</option>
                                <option value="OF">POS: OF</option>
                            </select>
                        </th>
                        <th>TEAM</th>
                        <th>AB</th>
                        <th>R</th>
                        <th>HR</th>
                        <th>RBI</th>
                        <th>SB</th>
                        <th>AVG</th>';
                        if($draftType == 0){
                            echo '<th>ADP</th>
                        <th id="chance">CHANCE</th>';
                        }else if($draftType == 1){
                            echo '<th>$</th>';
                        }
                    echo'</tr></thead>
            <tbody id="replacebatters">';

while($row = mysqli_fetch_array($resultbat, MYSQLI_ASSOC))
  {     
    if(array_key_exists($row['NAME'], $crossed)){
        echo "<tr class='drafted' id='" . $row['NAME'] . "'>";
    }else if(array_key_exists($row['NAME'], $rostered)){
        echo "<tr class='roster' id='" . $row['NAME'] . "'>";
    }else if($n&1){
        echo "<tr id='" . $row['NAME'] . "'>";
    }else{
        echo "<tr class='alt' id='" . $row['NAME'] . "'>";
    }

  echo '<th>Draft</td>';
  echo '<td>' . $row['NAME'] . "</td>";
  echo "<td>" . $row['AGE'] . "</td>";
  echo "<td>" . $row['POS'] . "</td>";
  echo "<td>" . $row['TM'] . "</td>";
  echo "<td>" . $row['AB'] . "</td>";
  echo "<td class='runs'>" . $row['R'] . "</td>";
  echo "<td class='hr'>" . $row['HR'] . "</td>";
  echo "<td class='rbi'>" . $row['RBI'] . "</td>";
  echo "<td class='sb'>" . $row['SB'] . "</td>";
  echo "<td class='avg'>" . $row['AVG'] . "</td>";
if ($draftType == 0)
{
    $player = $MDCxml->xpath('//player[@name="' . $row['NAME'] . '"]');
    if (is_array($player) && count($player)) {
        $player = $player[0];
    } else {
        continue; // not found
    }

    $attr = $player->attributes(); 

    $adp = (float) $attr['adp'];
    $early = (int) $attr['early'];      

    $stdev = -0.42+0.42*($adp-$early);

    if($stdev<0)
        $stdev = 1;
    $chance =number_format(((1-NORMDIST($pickNumber,$adp,$stdev,TRUE))*100), 0);

    echo "<td class='adp'>".$adp."</td>";
    echo "<td class='odds'>".$chance."%</td>";
}elseif ($draftType == 1){
    echo "<td class='dollar'>$14</td>";
}     
  echo "</tr>";
  $n = ++$n;
  }
echo "</tbody></table>";

On change of the drop down below I need to update the $pickNumber (round selected * a stored pick number) variable with the current round the user has selected and update the values in the CHANCE column with the newly calculated $chance variable. Here is the drop down select:

echo "Current Round: ";
    echo "<select id='round' size='1' onchange='***NOT SURE WHAT TO DO HERE***'>";

    for($q = 1; $q <= $rosterSizeRow['roster_size']; $q++)
    {
        if ($q == $_GET['round'])
        {
            echo "<option value=".$q." selected> ".$q." </option>";
        }else{
            echo "<option value=".$q."> ".$q." </option>";
        }
    }
    echo "</select>";

Thanks in advance.

Answer 1

You can see XMLHttpRequest for reference documentation. On the same page, the see also section has several links on how to use XMLHttpRequest and how to make AJAX calls.

For a start, you can look at this untested code

HTML:

<div>
    <label for="round">Round:</label>
    <select id="round" name="round" onchange="ajaxUpdateChance(this)">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3" selected>3</option>
        <option value="4">4</option>
    </select>
</div>

jQuery:

function updateChance(data)
{
    var table = $('#battersTable');
    $('.odds', table).each(function(index, element) {
                               $(element).text(data[index] + '%');
                           });
}

function ajaxUpdateChance(el) {
    var round = el.value;
    $.ajax({ url: 'http://www.example.com/update_chance.php',
             data: { round: round },
             dataType: 'json',
             success: updateChance });
}

ajaxUpdateChance retrieves the data for the odds column. updateChance iterates through the odds column entries and sets the new text from the data array. The data array should be a JSON array.