Aktualisieren / laden Sie den Inhalt in Div mit jquery / ajax neu

Ich möchte ein Div auf Knopfdruck neu laden. Ich möchte nicht die ganze Seite neu laden.

Hier ist mein Code:

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>

Beim Klicken auf die <input type="button" id="getCameraSerialNumbers" value="Capture Again">Schaltfläche <div id="list">....</div>sollte a neu geladen werden, ohne die ganze Seite zu laden oder zu aktualisieren.

Unten ist die Jquery, die ich ausprobiert habe, aber nicht funktioniert: -

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

Bitte vorschlagen.

Hier ist der DIV auf meiner Seite, der Bilder und Seriennummern einiger Produkte enthält ... Der zum ersten Mal auf der Seite aus der Datenbank stammt. Wenn der Benutzer jedoch auf ein Problem stößt, klickt er auf die Schaltfläche "Erneut erfassen", <input type="button" id="getCameraSerialNumbers" value="Capture Again">um diese Informationen erneut zu laden.

Der HTML-Code von 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>

Durch Klicken auf die <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />Schaltfläche sollten die darin enthaltenen Informationen <div id="list">... </div> erneut geladen werden.

Bitte lassen Sie mich wissen, wenn Sie weitere Informationen benötigen.

Ich benutze das immer, funktioniert perfekt.

$(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");

Beachten Sie immer das Leerzeichen kurz vor dem zweiten # -Zeichen, da sonst der obige Code die gesamte Seite zurückgibt, die in Ihrem beabsichtigten DIV verschachtelt ist. Platz immer platzieren.

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

Wenn diese Methode ausgeführt wird, wird der Inhalt von abgerufen location.href, aber dann analysiert jQuery das zurückgegebene Dokument, um das Element mit zu finden divId. Dieses Element wird zusammen mit seinem Inhalt mit einer ID ( divId) des Ergebnisses in das Element eingefügt , und der Rest des abgerufenen Dokuments wird verworfen.

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

Ich hoffe, dies kann jemandem helfen, es zu verstehen

Was Sie wollen, ist, die Daten erneut zu laden, aber das div nicht neu zu laden.

Sie müssen eine Ajax-Abfrage durchführen, um Daten vom Server abzurufen und den DIV zu füllen.

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

Obwohl Sie nicht genügend Informationen angegeben haben, um tatsächlich anzugeben, woher Sie Daten abrufen sollen, müssen Sie sie von irgendwoher abrufen. Sie können die URL beim Laden angeben sowie Datenparameter oder eine Rückruffunktion definieren.

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

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

Versuche dies

HTML Quelltext

 <div id="refresh">
    <input type="text" />
    <input type="button" id="click" />
 </div>

jQuery-Code

 <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-Seitencode Pfad = / Pfad / zu / Datei.php

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

Sie müssen die Quelle hinzufügen, von der Sie die Daten laden.

Zum Beispiel:

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

Hoffe es wird dir helfen.

Ich weiß, dass das Thema alt ist, aber Sie können Ajax als Variable deklarieren und dann eine Funktion verwenden, um die Variable für den gewünschten Inhalt aufzurufen. Denken Sie daran, dass Sie das aufrufen, was Sie im Ajax haben, wenn Sie andere Elemente als das Ajax möchten, müssen Sie es angeben.

Beispiel:

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

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

Hoffnung hilft

Wenn nicht, versuchen Sie:

$("#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");
}