Искам да презаредя 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 на моята страница, която съдържа снимки и серийни номера на някои продукти... Които ще бъдат изведени от базата данни за първи път при зареждане на страницата. Но ако потребителят се сблъска с някакъв проблем, той ще щракне върху бутона "Capture Again" "<input type="button" id="getCameraSerialNumbers" value="Capture Again">
" който ще зареди тази информация отново.
HTML кодът на Div:-
<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>
, трябва да се зареди отново.
Моля, уведомете ме, ако имате нужда от допълнителна информация.
Винаги използвам това, работи перфектно.
$(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);
});
}
});
});
});
});
Това, което искате, е да заредите данните отново, но не и да презаредите дивизията.
Трябва да направите заявка Ajax, за да получите данни от сървъра и да запълните DIV.
Макар че не сте предоставили достатъчно информация, за да посочите откъде трябва да черпите данни, трябва да ги вземете от някъде. Можете да посочите URL адреса при зареждане, както и да дефинирате параметри на данните или функция за обратно извикване.
$("#getCameraSerialNumbers").click(function () {
$("#step1Content").load('YourUrl');
});