Оновіть / перезавантажте вміст у Div за допомогою jquery / ajax

Я хочу перезавантажити 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-й раз при завантаженні сторінки. Але якщо користувач стикається з якоюсь проблемою, він натисне кнопку "Зняти ще раз" " <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);

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

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

Завжди враховуйте пробіл перед другим знаком # , інакше наведений вище код поверне цілу сторінку, вкладену всередину задуманого вами DIV. Завжди кладіть місце.

$("#myDiv").load(location.href+" #myDiv>*","");

Коли цей метод виконується, він отримує вміст location.href, але потім jQuery аналізує повернутий документ, щоб знайти елемент за допомогою divId. Цей елемент разом із його вмістом вставляється в елемент із ідентифікатором ( divId) результату, а решта отриманого документа відкидається.

$ ("# divId"). load (location.href + "#divId> *", "");

сподіваюся, це може допомогти комусь зрозуміти

Потрібно завантажити дані ще раз, але не перезавантажити div.

Вам потрібно зробити запит Ajax, щоб отримати дані із сервера та заповнити DIV.

http://api.jquery.com/jQuery.ajax/

Хоча ви не надали достатньо інформації, щоб фактично вказати, Звідки вам слід витягувати дані, вам все-таки потрібно витягти їх звідкись. Ви можете вказати URL-адресу при завантаженні, а також визначити параметри даних або функцію зворотного виклику.

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

http://api.jquery.com/load/

Спробуйте це

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 код коду сторінки = / шлях / до / file.php

<?php
   header('Content-Type: application/json');
   $done=true;
   if($done){
       echo json_encode(['success'=>'ok']);
   }
?>

Вам потрібно додати джерело, звідки ви завантажуєте дані.

Наприклад:

$("#step1Content").load("yourpage.html");

Сподіваюся, це допоможе вам.

Я знаю, що тема стара, але ви можете оголосити Ajax змінною, а потім використати функцію для виклику змінної потрібного вмісту. Майте на увазі, що ви називаєте те, що у вас є в Ajax, якщо ви хочете, щоб інші елементи від Ajax вам потрібні, щоб вказати це.

Приклад:

Var infogen = $.ajax({'your query')};

$("#refresh").click(function(){
  infogen;
  console.log("to verify");
});    

Надія допомагає

якщо не спробувати:

$("#refresh").click(function(){
      loca.tion.reload();
      console.log("to verify");
    });    

$(document).ready(function() {
var pageRefresh = 5000; //5 s
    setInterval(function() {
        refresh();
    }, pageRefresh);
});

// Functions

function refresh() {
    $('#div1').load(location.href + " #div1");
    $('#div2').load(location.href + " #div2");
}