使用jquery/ajax刷新/重新加载Div中的内容
使用jquery/ajax刷新/重新加载Div中的内容
提问于 2013-08-28 21:56:32
我想在点击一个按钮后重新加载一个div。我不想重新加载整个页面。
下面是我的代码：
HTML：
<div role="button" class="marginTop50 marginBottom">
<input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />
<input type="button" id="confirmNext" value="Confirm & Proceed" class="disabled marginLeft50" />
</div>在单击<input type="button" id="getCameraSerialNumbers" value="Capture Again">按钮时，<div id="list">....</div>应重新加载，而无需加载或刷新整个页面。
下面是我尝试过的Jquery，但不起作用：
$("#getCameraSerialNumbers").click(function () {
$("#step1Content").load();
});请提个建议。
这是我页面上的DIV，其中包含一些产品的图片和序列号…这将是来自数据库的第一次页面加载。但是当用户遇到一些问题时，他会单击“再次捕获”按钮"<input type="button" id="getCameraSerialNumbers" value="Capture Again">“，这将再次加载这些信息。
Div的HTML代码：-
<div id="step1Content" role="Step1ShowCameraCaptures" class="marginLeft">
<form>
<h1>Camera Configuration</h1>
<!-- Step 1.1 - Image Captures Confirmation-->
<div id="list">
<div>
<p>
<a id="pickheadImageLightBox" data-lightbox="image-1" title="" href="">
<img alt="" id="pickheadImage" src="" width="250" height="200" />
</a>
</p>
<p>
<strong>Pickhead Camera Serial No:</strong><br />
<span id="pickheadImageDetails"></span>
</p>
</div>
<div>
<p>
<a id="processingStationSideImageLightBox" data-lightbox="image-1" title="" href="">
<img alt="" id="processingStationSideImage" src="" width="250" height="200" />
</a>
</p>
<p>
<strong>Processing Station Top Camera Serial No:</strong><br />
<span id="processingStationSideImageDetails"></span>
</p>
</div>
<div>
<p>
<a id="processingStationTopImageLightBox" data-lightbox="image-1" title="" href="">
<img alt="" id="processingStationTopImage" src="" width="250" height="200" />
</a>
</p>
<p>
<strong>Processing Station Side Camera Serial No:</strong><br />
<span id="processingStationTopImageDetails"></span>
</p>
</div>
<div>
<p>
<a id="cardScanImageLightBox" data-lightbox="image-1" title="" href="">
<img alt="" id="cardScanImage" src="" width="250" height="200" />
</a>
</p>
<p>
<strong>Card Scan Camera Serial No:</strong><br />
<span id="cardScanImageDetails"></span>
</p>
</div>
</div>
<div class="clearall"></div>
<div class="marginTop50">
<p><input type="radio" name="radio1" id="optionYes" />Yes, the infomation captured is correct.</p>
<p><input type="radio" name="radio1" id="optionNo" />No, Please capture again.</p>
</div>
<div role="button" class="marginTop50 marginBottom">
<input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />
<input type="button" id="confirmNext" value="Confirm & Proceed" class="disabled marginLeft50" />
</div>
</form>
现在单击<input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />按钮，<div id="list">... </div>中的信息应该会再次加载。
如果您需要更多信息，请告诉我。
回答 9
Stack Overflow用户
回答已采纳
发布于 2014-01-15 18:48:25
我总是用这个，效果很好。
$(document).ready(function(){
$(function(){
$('#ideal_form').submit(function(e){
e.preventDefault();
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize();
$('#loader3', form).html('<img src="../../images/ajax-loader.gif" /> Please wait...');
$.ajax({
type: 'POST',
url: post_url,
data: post_data,
success: function(msg) {
$(form).fadeOut(800, function(){
form.html(msg).fadeIn().delay(2000);
});
}
});
});
});
});Stack Overflow用户
发布于 2014-08-19 08:03:17
$("#myDiv").load(location.href+" #myDiv>*","");Stack Overflow用户
发布于 2013-08-28 21:59:22
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18490026
复制相关文章
相似问题