我想在单击按钮时重新加载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>应该重新加载而不加载或刷新整个页面。
<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> 应该重新加载其中的信息。
<input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />
<div id="list">... </div>
如果您需要更多信息,请告诉我。
我一直使用它,效果完美。
$(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); }); } }); }); }); });