Ajax 특정 div만 새로고침 - ajax teugjeong divman saelogochim

Question

Home » jQuery 예제 » DIV 자동 새로 고침 javascript

Last Updated: 2020년 11월 15일 | 댓글 남기기

특정 DIV를 5초마다 자동으로 새로 리로드하는 것과 같이 DIV를 새로 고침하는 javascript 스크립트 예제입니다. 다음 스크립트를 사용하면 실시간으로 예약 상황을 업데이트하거나, 실시간으로 채팅 메시지를 새로 고침하는 등의 기능을 구현할 수 있습니다.

<script langauge="javascript">
var counter = 0;
window.setInterval("refreshDiv()", 5000);
function refreshDiv(){
counter = counter + 1;
document.getElementById("test").innerHTML = "Testing " + counter;
}
</script>
// Source: JavaRanch

특정 시간이 지나면 HTML 페이지의 DIV/SPAN을 새로 고치려면 다음과 같은 스크립트를 사용할 수 있습니다.

function autoRefresh_div()
{
$("#result").load("load.html");
}
setInterval('autoRefresh_div()', 5000); // 5초 후에 div 새로 고침
// Source: devzone.co.in

현재 DIV를 일정 간격으로 리로드하려면 다음 스크립트를 사용합니다.

function autoRefresh_div()
{
var currentLocation = window.location;
$("#myid").load(currentLocation + ' #myid);
}
setInterval('autoRefresh_div()', 3000);

JavaScript/jQuery 템플릿:

기능을 직접 구현하는 것에 어려움을 겪거나 시간이 많이 소요되어 시간을 절약하고 싶은 경우 워드프레스 플러그인, PHP 스크립트 등 다양한 유형의 코드를 판매하는 CodeCanyon에서 비교적 저렴한 비용에 다양한 기능(예: 슬라이더, 동영상 플레이어 등)의 자바스크립트/jQuery 템플릿이나 PHP 스크립트를 구입할 수 있습니다.

CodeCanyon에서 판매되는 javascript/jQuery 템플릿

�� ǥ�ؾ�� ޼�� α׸� ��Ͽ� �亯�ڰ� ��ϱ� �� ִ�� ڽ�� ó�� Ȳ �� ϰ� ��Ͽ� �÷� �ּž� �մϴ�.

Ư��κ� div �κ�� ΰ�ħ �Ҽ��ִ¹�� ?

��ͳ� ��Ī�� ajax �� °� ��.

��ư Ŭ�� ajax�� Ư�� div �κи� �� ħ �ϰ��

�ƽôº� ��Ű��?

�� div��
�̹�� ִ� �κ��̶� ��־��ϴ� ��̶� ��庾�ϴ�.

�ð� üũ�ؼ� ��ΰ�ħ �ϴ°� ��...

버튼 클릭으로 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>
    <h2>Camera Configuration</h2>
    <!-- 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>