Question

我的布局中有两个div。在左边的div中我通过表格和右边的div写了一个表。

单击“保存”按钮后，只有表格所在的右侧div必须刷新。有人能帮助我吗？

这是我的代码

//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>

//这是我的右侧div ，点击保存按钮后，必须在此处显示所有值，并且必须刷新此div。

<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

你可以用两三种时髦的方式做到这一点：

您可以将要刷新的所有内容移动到外部文件中，并使用<iframe>标记仅更新该特定框架，或

您可以使用Ajax仅刷新所需的html部分，例如：http://www.w3schools.com/Ajax/ajax_example.asp。

但也许最简单的方法是利用jQuery的强大功能。在jQuery中你可以这样做：

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

Answer 2

使用$('#the_one_div').load('source.html');在按钮click（）事件中重新加载div的内容。

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

Answer 3

最简单的方法是在服务器端提供一些支持，仅渲染您的表。

然后，就这样做

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

更高级的版本将获得json字符串，并创建表客户端。

Answer 4

您可以将Ajax用于此类要求

Answer 5

使用jQuery通过AJAX发布表单。

var formData = $('#MyForm').serialize();
$.post( 'url-to-POST-to.html', 
    formData,
    function(data){
        $('#div_save').html( data);
    }
);

成功时，具有该ID的div将使其内容被服务器发回的任何内容替换以响应您的POST。

PS：左侧div中的FORM标签在哪里？

单击“保存”后刷新div

5 个答案: