Reload the table with JQuery.

Question

Hi everybody,

I have the following issue. Here is my index.php :

<div id="tabs">
     <ul>
         <li><a href="#tabs-1">A projects</a></li>
         <li><a href="#tabs-2">B projects</a></li>
     </ul>
     <div id="tabs-1">
         <?php echo loadTabs(1);?>
    </div>
    <div id="tabs-2">
        <?php echo loadTabs(2);?>
    </div>

Here are my two php functions that build the tables:

function loadTabs($settingId){
$query = 'select * from deployments_settings where id="'.$settingId.'"';
$result = mysql_query($query);
$html = '<div id="tab'.$settingId.'_container">';
     while ($row = mysql_fetch_array($result)) {
       $html .= '<div id="tab'.$settingId.'_buttons">';
       $html .= '<button id="add_project">'.$row['addbuttoncaption'].'</button>';
       $html .= '</div>';// id="tab[1..2]_button_add"
       $html .= '<div id="tab'.$settingId.'_content">';
       $html .= '<br/>';
       $html .= loadTables($settingId, $row['deploymentstable']);
       $html .= '</div>';//id=tab[1..2]_[first..second]content
     }//while        
$html .= '</div>';// id="tab[1..2]_container"
return $html;}

function loadTables( $tableId, $tableName ) {
$query = 'select * from '.$tableName.' order by `id` desc';
$result = mysql_query($query);
$html  = '<table id="tab'.$tableId.'_table" class="tabTable">';
$html .= '<thead><tr>';
$html .= '<th>#</th>';
$html .= '<th>Project number</th>';
$html .= '<th>Deadline</th>';
$html .= '<th>Assign to</th>';
$html .= '<th>Description</th>';
$html .= '<th>Action</th>';
$html .= '</tr></thead>';
$html .= '<tbody>';
     $countRow = 0;
     while ($row = mysql_fetch_array($result)) {
      $html .='<tr>';
      $html .= '<td class="colID">'.++$countRow.'</td><td class="colPN">'.$row['name'].'</td><td class="colDL">'.$row['deadline'].'</td><td class="colAT">'.$row['assignto'].'</td><td>'.$row['description'].'</td>';
      $html .= '<td class="colACT">';
      $html .= '<button id="edit_action">Edit</button>';
      $html .= '<button title="Remove" contentReload="'.$tableId.'" rrTable="'.$tableName.'" rrID="'.$row['id'].'" id="delete_action">Delete</button>';
      $html .= '</td>';
      $html .= '</tr>';
      }//while
$html .= '</tbody>';
$html .= '</table>';
return $html;}

Here is my JQuery part For button delete.

$( "button#delete_action")
   .button({icons: {primary: "ui-icon-circle-minus"},  text: false})
   .click(function() {
         var contentReload = $(this).attr("contentReload");
        //alert(contentReload);
         if(confirm("Press OK to confirm DELETE operation")) {
           $.post("coreDB.php", {
                    action: 3,
                    rrTable: $(this).attr("rrTable"),
                    rrID:    $(this).attr("rrID"),
                    contentReload: $(this).attr("contentReload")
                },
                function(data, textStatus, XMLHttpRequest) {
                   //alert(data);
                   $("#tab"+ contentReload + "_table").html(data);
                }); //post
        } //if then condition
 });

The issue is this -> when "delete button" run successfully it gives back the table output that I re-apply to the table object$("#tab"+ contentReload + "_table").html(data);. But unfortunately it doesn't reload the the table and all goodies from JQuery don't work too.

Is anything I need to work on JQuery side in order to reload the table.

Thank you in advance!

Answer 1

I haven't really read your above code as it's pretty hard to read, but if you're wanting to delete rows from a table, I'd fire an AJAX call to your delete script. Then, if the AJAX call returns true, just remove the row from your table with JavaScript. It means your page doesn't have to be refreshed then.

Answer 2

Is this an issue in IE?

There was a post a while ago about some event not firing on an element of a table in IE.

Answer 3

The question in not very clear, what do you mean by "it doesn't reload the the table" ?

You button won't wotk after reload : click can only attached events to element that are in the page. Since you delete and then create new buttons, no clicks for them....

You need to reapply the jquery code above ($( "button#delete_action").button...) on these new buttons or you can use live() : http://api.jquery.com/live/

In your example :

<script type="text/javascript">
function makeButtons()
{
    $( "button#delete_action")
        .button({icons: {primary: "ui-icon-circle-minus"},  text: false});
}
$(document).ready(function() 
{
    $( "button#delete_action").live('click',function() {
     var contentReload = $(this).attr("contentReload");
    //alert(contentReload);
     if(confirm("Press OK to confirm DELETE operation")) {
       $.post("coreDB.php", {
                action: 3,
                rrTable: $(this).attr("rrTable"),
                rrID:    $(this).attr("rrID"),
                contentReload: $(this).attr("contentReload")
            },
            function(data, textStatus, XMLHttpRequest) {
               //alert(data);
               $("#tab"+ contentReload + "_table").html(data);
               makeButtons();
            }); //post
    } //if then condition

}); }

Assign click once for all with live but redraw interface everytime. You can optimise it by only applying makeButtons to buttons inside "#tab"+ contentReload + "_table", by passing this selector as argument to makeButtons.

Answer 4

Thank you guys for answering to this post.

1. I believe it doesn't relate to IE.

2. I am not sure if it will be a big difference if I use $.ajax. Do you have the example how it can be done?

3. Thank you for the .live method I think it will work. I will try it.