[解決済み] jquery/ajaxを使用して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があり、いくつかの製品の写真とシリアル番号が含まれています... これは、ページロード時にデータベースから1回目に来るでしょう。しかし、ユーザーはいくつかの問題に直面した場合、彼は＆quotをクリックします;もう一度キャプチャ＆quot;ボタン＆quot。 <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);

                        });
                    }
                });
            });
        });
         });