Recharger la table avec JQuery

Question

J'ai le problème suivant. Voici mon 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> 

Voici mes deux fonctions php qui construisent les 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;} 

Voici ma part JQuery pour le bouton supprimer.

$("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 
}); 

La question est la suivante -> « pour supprimer le bouton » run donne avec succès en arrière la sortie de la table que j'appliquer à nouveau à l'objet de la table $("#tab"+ contentReload + "_table").html(data);. Mais malheureusement, il ne recharge pas la table et tous les goodies de JQuery ne fonctionnent pas aussi.

Est-ce que tout ce que j'ai besoin de travailler sur le côté JQuery afin de recharger la table.

Merci d'avance!

Answer 1

Je n'ai pas vraiment lu votre code ci-dessus car il est assez difficile à lire, mais si vous voulez supprimer des lignes d'une table, je lancerais un appel AJAX à votre script de suppression. Ensuite, si l'appel AJAX renvoie true, supprimez simplement la ligne de votre table avec JavaScript. Cela signifie que votre page n'a pas besoin d'être rafraîchie à ce moment-là.

Answer 2

La question n'est pas très claire, que voulez-vous dire par "ça ne recharge pas la table"?

Vous ne pourrez pas wotk après rechargement: cliquez sur ne peut que joindre des événements à l'élément qui sont dans la page. Depuis que vous supprimez et ensuite créer de nouveaux boutons, pas de clics pour eux ....

Vous devez réappliquer le code jquery ci-dessus ($ ("button # delete_action"). Bouton ...) sur ces nouveaux boutons ou vous pouvez utiliser en direct(): http://api.jquery.com/live/

Dans votre exemple:

<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 

}); }

Assigner une fois pour toutes avec l'interface en direct mais redessiner à chaque fois. Vous pouvez l'optimiser en appliquant makeButtons aux boutons à l'intérieur de "#tab" + contentReload + "_table", en passant ce sélecteur comme argument à makeButtons.