javascript - 使用jquery / ajax刷新/重新加载Div中的内容(Refresh/reload the content in Div using jquery/ajax)

Question

I want to reload a div on click of a button.

(我想在单击按钮时重新加载div。)

I do not want to reload the full page.

(我不想重新加载整个页面。)

Here is my code:

(这是我的代码：)

HTML:

(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>

On click of <input type="button" id="getCameraSerialNumbers" value="Capture Again"> Button a <div id="list">....</div> should reload without loading or refreshing full page.

(单击<input type="button" id="getCameraSerialNumbers" value="Capture Again">按钮后， <div id="list">....</div>应该重新加载而不加载或刷新整个页面。)

Below is the Jquery which I tried, but not working:-

(以下是我尝试过但无法正常工作的Jquery：-)

$("#getCameraSerialNumbers").click(function () {
    $("#step1Content").load();
});

Please suggest.

(请提出建议。)

Here is the DIV on my page, which contains Pictures and Serial numbers of some products... Which will be coming from database 1st time on the Page Load.

(这是我页面上的DIV，其中包含一些产品的图片和序列号...这将是第一次加载时来自数据库的信息。)

But Is User faces some issue he'll click tthe "Capture Again" button " <input type="button" id="getCameraSerialNumbers" value="Capture Again"> " which will load those information again.

(但是，如果用户遇到问题，他将单击“再次捕获”按钮“ <input type="button" id="getCameraSerialNumbers" value="Capture Again"> “，这将再次加载这些信息。)

The HTML Code of Div:-

(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>

Now on click of <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" /> button, the information which is in <div id="list">... </div> should be loaded again.

(现在点击<input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />按钮，该信息位于<div id="list">... </div>应该重新加载。)

Please let me know if you need some more information.

(如果您需要更多信息，请告诉我。)

  ask by UID translate from so

Answer 1

$("#mydiv").load(location.href + " #mydiv");