Raf rafraîchissant après avoir cliqué sur enregistrer

Question

J'ai deux div dans ma mise en page. Où dans la div gauche j'ai écrit par forme et dans le bon div il y a une table. Après avoir cliqué sur le bouton de sauvegarde, seul mon div à droite où la table est présente doit être rafraîchi. Est-ce que quelqu'un peut m'aider?

C'est mon code

//This is my **Left div**, Where i need to enter the **values** and when I click on **save** button, All the values must be displayed in the **right div** and that **right div must be refreshed** 


<div align="left"> 

    <div id="bundle_number_text_label"> Bundle Number </div> 
    <input id="bundlenumber" style=" padding: 3px 0;" type="text" name="bundle_number" /><br /> 


    <div id="date_text_label"> Date </div> 
<input type="text" style=" padding: 3px 0;" id="date" READONLY/><br/> 




<div id="length_text_label"> Length </div> 
<input id= "length" style=" padding: 3px 0;" type="text" name="Length" /> (in mm) 



<input type="radio" name="browser" value="number" checked> 
<label><?=lang('number_txt')?></label> 
    <input type="radio" name="browser" value="Balance"/> 
    <label><?=lang('balance_txt')?></label></br> 
<input id= "rate" style=" padding: 3px 0;" type="text" name="Rate" /> 

<input type="button" value="Save" name="Save" id="save_id"> 

</div> 

// Ceci est mon droit div et après avoir cliqué sur le bouton Enregistrer , toutes les valeurs doivent être affichées ici et ce div doit être rafraîchi.

<div id="div_save" align="left"> 
<table align="center !important" width="80%" border="1px" cellspacing="0" cellpadding="0"> 
<tr> 
    <th>Select</th>&nbsp; 
    <th>Bundle Number</th>&nbsp 
    <th>Date</th>&nbsp; 
    <th>Length(mm)</th>&nbsp; 
    <th>Numbers</th> 
    <th style="display:none;">Party id</th> 
</tr> 

    <tr> 
    <td align="center" valign="top"> 
    <input type="radio" /></td> 
    <td align="center" valign="top"></td> 
    <td align="center" valign="top"></td> 
    <td align="center" valign="top"></td> 
    <td align="center" valign="top"></td> 
</tr> 

    <tr> 
    <td align="center" valign="top"> 
    <input type="radio" /></td> 
    <td align="center" valign="top"></td> 
    <td align="center" valign="top"></td> 
    <td align="center" valign="top"></td> 
    <td align="center" valign="top"></td> 
</tr> 
</table> 
</div> 

Answer 1

Utilisez $('#the_one_div').load('source.html'); pour recharger le contenu de l'événement click() du bouton div.

http://api.jquery.com/load/

Answer 2

La meilleure façon est de fournir un soutien sur votre côté serveur pour rendre seulement votre table.

Ensuite, il suffit de faire

var submittedData = $('#myForm').serialize(); 
$('#myTable').load('http://www.example.com/myPage?renderTable', submittedData); 

La version plus avancée obtiendrait une chaîne JSON, et créer la table côté client.

Answer 3

vous pouvez utiliser Ajax pour ce type d'exigence

Answer 4

Vous pouvez le faire en deux ou trois façons à la mode:

Vous pouvez déplacer le contenu de tout ce que vous voulez être rafraîchi dans un fichier externe et de l'utilisation la balise pour mettre à jour cette image spécifique uniquement, ou

Vous pouvez utiliser Ajax pour actualiser uniquement les sections html souhaitées, comme dans cet exemple: http://www.w3schools.com/Ajax/ajax_example.asp.

Mais peut-être le moyen le plus simple est de tirer parti de la puissance jQuery. Dans jQuery, vous pouvez le faire comme ceci:

$('#first_div').load('test.html', function() { 
    alert('Loading completed.'); //callback function 
}); 

Answer 5

POST le formulaire via AJAX, en utilisant jQuery. En cas de succès, la div avec cet ID aura son contenu remplacé par tout ce que le serveur renvoie en réponse à votre POST. PS: Où est votre tag FORM dans le div gauche?