버튼 클릭으로 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> 다시로드됩니다.
더 많은 정보가 필요하면 알려주세요.
답변
나는 항상 이것을 사용하고 완벽하게 작동합니다.
$(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);
});
}
});
});
});
});
답변
$("#mydiv").load(location.href + " #mydiv");
항상 두 번째 # 기호 바로 앞의 공백에 유의 하십시오. 그렇지 않으면 위 코드가 의도 한 DIV 내부에 중첩 된 전체 페이지를 반환합니다. 항상 공간을 두십시오.
답변
$("#myDiv").load(location.href+" #myDiv>*","");
답변
이 메서드가 실행되면의 내용을 검색 location.href하지만 jQuery는 반환 된 문서를 구문 분석하여 divId. 이 요소는 내용과 함께 divId결과 ID ( ) 와 함께 요소에 삽입되고 검색된 나머지 문서는 삭제됩니다.
$ ( “# divId”). load (location.href + “#divId> *”, “”);
누군가가 이해하는 데 도움이되기를 바랍니다.
답변
원하는 것은 데이터를 다시로드하지만 div를 다시로드하지 않는 것입니다.
서버에서 데이터를 가져오고 DIV를 채우려면 Ajax 쿼리를 만들어야합니다.
답변
실제로 데이터를 가져와야하는 위치를 표시하기에 충분한 정보를 제공하지 않았지만 다른 곳에서 가져와야합니다. 로드시 URL을 지정하고 데이터 매개 변수 또는 콜백 함수를 정의 할 수 있습니다.
$("#getCameraSerialNumbers").click(function () {
$("#step1Content").load('YourUrl');
});
답변
이 시도
HTML 코드
<div id="refresh">
<input type="text" />
<input type="button" id="click" />
</div>
jQuery 코드
<script>
$('#click').click(function(){
var div=$('#refresh').html();
$.ajax({
url: '/path/to/file.php',
type: 'POST',
dataType: 'json',
data: {param1: 'value1'},
})
.done(function(data) {
if(data.success=='ok'){
$('#refresh').html(div);
}else{
// show errors.
}
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
});
</script>
PHP 페이지 코드 경로 = / path / to / file.php
<?php
header('Content-Type: application/json');
$done=true;
if($done){
echo json_encode(['success'=>'ok']);
}
?>
