Question

I have a generated table which i need when press button on 6th column to get 1st cell value in the row and send it to an overlay page, the overlay page will do some calculations which will take some time and show a score, i want to replace the 6th column button with that score.

I cant get page2.php to show in the over lay while processing (i use popup from here)

here is what i reached so far

<tbody>
    <?php foreach ($rows as $row_number => $columns): ?>
      <?php
        $row_class = 'row-' . ($row_number + 1);
        if ($row_number == 0) {
          $row_class .= ' row-first';
        }
        if (count($rows) == ($row_number + 1)) {
          $row_class .= ' row-last';
        }
      ?>
      <tr class="<?php print $row_class; ?>">
        <?php foreach ($columns as $column_number => $item): ?>
          <td class="<?php print 'col-'. ($column_number + 1); ?>"  >
                <?php print $item; ?>
          </td>
        <?php endforeach; ?>
<td>
<?php print $dnsearch; ?> 
</td>
<td>

<button id="my-button">Get Score</button>
<div id="element_to_pop_up">
    <a class="bClose">x<a/>

here should page2.php receive the variable from script and do the processing and return data (score) to replace the clicked button

 </div>



    </td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </table>


    <script type="text/javascript">
    $(":button").click(function (e) {
    e.preventDefault();
    $('#element_to_pop_up').bPopup();
    $.post("page2.php", {val: $(this).closest('tr').find('td:eq(0)').text()}, function(returned_data){
    //    alert(returned_data); 
          $(e.target).closest("td").text(returned_data); // to replace button with score
       });

    });

    </script>

Answer 1

on click of the button send the value of the first row to jquery and make a ajax call to second page and do the required calculations when ever by response of second page replace the button with result look for examples.

http://api.jquery.com/jQuery.ajax/

put your button in a span like this

<span id="result">
<button id="my-button">Get Score</button></span>

then in your response handling jquery put this

$("#result").html(you calculation result jquery variable);