wake-up-neo.com

Aktualisiere / lade den Inhalt in Div mit jquery / ajax neu

Ich möchte ein Div per 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>

Bei Klick auf <input type="button" id="getCameraSerialNumbers" value="Capture Again"> Button a <div id="list">....</div> sollte neu laden, ohne die ganze Seite zu laden oder zu aktualisieren.

Unten ist die JQuery, die ich ausprobiert habe, aber nicht funktionierte: -

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

Bitte vorschlagen.

Hier ist der DIV auf meiner Seite, der Bilder und Seriennummern einiger Produkte enthält ... Der wird beim ersten Laden der Seite aus der Datenbank stammen. Stößt der Benutzer jedoch auf ein Problem, wird er auf die Schaltfläche "Erneut aufzeichnen" klicken. "<input type="button" id="getCameraSerialNumbers" value="Capture Again"> ", wodurch diese Informationen erneut geladen werden.

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>

Jetzt auf Klick von <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" /> Button, die Informationen, die in <div id="list">... </div> sollte wieder geladen werden.

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

69
UID

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);

                        });
                    }
                });
            });
        });
         });
40
Gucho Ca
$("#mydiv").load(location.href + " #mydiv");
105
Peca
$("#myDiv").load(location.href+" #myDiv>*","");

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

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

hoffe das kann jemandem helfen zu verstehen

Obwohl Sie nicht genügend Informationen angegeben haben, um tatsächlich anzugeben, woher Sie Daten abrufen sollen, müssen Sie sie von einem beliebigen Ort 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/

7
David L

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 auszufüllen.

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

7
user1409909

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 path =/path/to/file.php

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

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

Zum Beispiel:

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

Hoffe, es wird dir helfen.

2
Shubham Kumar