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

Lesezeit: 7 Minuten

Aktualisierenladen Sie den Inhalt in Div mit jqueryajax neu
UID

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 Anklicken von <input type="button" id="getCameraSerialNumbers" value="Capture Again"> Taste a <div id="list">....</div> sollte 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 das DIV auf meiner Seite, das Bilder und Seriennummern einiger Produkte enthält … die zum ersten Mal beim Laden der Seite aus der Datenbank stammen. Aber wenn der Benutzer auf ein Problem stößt, klickt er auf die Schaltfläche “Erneut erfassen”.<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 klicken <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" /> Schaltfläche, die Informationen, die in sind <div id="list">... </div> sollte neu geladen werden.

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

  • Hier gibt es nicht annähernd genug Details. Woher versuchst du, Inhalte zu bekommen? Welchen Code hast du dafür? Gibt es Fehler? Warum „funktioniert“ es nicht?

    – Rory McCrossan

    28. August 13 um 13:57 Uhr

  • Was genau willst du neu laden? Müssen Sie die Datenbank aufrufen?

    – Alvaro

    28. August 13 um 13:57 Uhr


  • Was ist in #step1Content und was soll es sein, nachdem Sie auf die Schaltfläche geklickt haben?

    – jkubisch

    28. August 13 um 13:59 Uhr

  • Die Frage ist, wie Sie zuerst DIV #list-Inhalte füllen.

    – A. Wolff

    28. August 2013 um 14:00 Uhr

Aktualisierenladen Sie den Inhalt in Div mit jqueryajax neu
Peca

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

Beachten Sie immer das Leerzeichen direkt vor dem zweite # andernfalls gibt der obige Code die gesamte Seite zurück, die in Ihrem beabsichtigten DIV verschachtelt ist. Setzen Sie immer Platz.

  • Dadurch wird ein #mydiv in einem #mydiv verschachtelt, damit jeder Aufruf geladen werden kann. Die korrekte Version wird von Juan bereitgestellt.

    – Matthias

    28. Juni 15 um 15:47 Uhr

  • Dies ist nicht AJAX, wie die Fragen sagen.

    – Gucho Ca

    14. August 15 um 19:02 Uhr

  • Es ist nicht unbedingt AJAX, liefert aber die erwartete Benutzererfahrung

    – Dale Clifford

    26. Februar 2016 um 10:30 Uhr

  • Ist es möglich, Parameter in die URI aufzunehmen? Beispielsweise: $("#relation-body").load(location.href+" #relation-body?organization_id="+item.id);

    – Koeno

    18. April 16 um 10:11 Uhr


  • Dies würde sich auf jquery-Aufrufe auswirken, da es dynamische Elemente im DOM erstellt, jquery schlägt fehl. Also nutzen on event in jquery, anstatt direkt auf das Element in diesem div zuzugreifen

    – Tamilhan

    8. März 17 um 11:28 Uhr

1644283986 549 Aktualisierenladen Sie den Inhalt in Div mit jqueryajax neu
Juan Manuel PRONEXO De Castro

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

  • Bitte geben Sie Erläuterungen zu Ihrer Antwort an, damit andere verstehen, warum Sie denken, dass dies eine gute Antwort auf die Frage ist.

    – m4rtin

    19. August 14 um 0:29 Uhr

  • @php_coder_3809625 Um ehrlich zu sein, antwortete Peca ein paar Monate nach Juan 🙂

    – Shashank Shekhar

    23. Januar 15 um 23:39 Uhr

  • @Juan: Könnten Sie bitte erklären, was es genau tut. Danke

    – Gaurav Parek

    25. September 15 um 7:19 Uhr

  • Wie würde ich dies anpassen, um auch alle Kinder neu zu laden?

    – Ricky Barnett

    19. Februar 16 um 22:23 Uhr

  • kann ich class anstelle von id verwenden?

    – TarangP

    8. Dezember 17 um 6:53 Uhr

Ich benutze das immer, funktioniert einwandfrei.

$(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="https://stackoverflow.com/questions/18490026/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);

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

  • Ich denke, man kann die auch entfernen delay da es, wie pro Dokumentation, Verzögerungen anschließend Anrufe.

    – Domenico de Felice

    15. April 15 um 7:31 Uhr

  • Oh ja, es ist einfach ein netter Effekt! 😉

    – Gucho Ca

    26. Juni 15 um 5:05 Uhr

  • $('#loader3', form); enthält formular ? kann ich das entfernen? weil ich change methed verwende, nicht einreichen.

    – 151291

    22. Dezember 15 um 10:42 Uhr


  • 151291 Ja, es ist die ID meines Formulars, ändern Sie sie nach Bedarf.

    – Gucho Ca

    8. März 16 um 4:26 Uhr

  • form ist in jquery verpackt, also warum hast du das getan? $(form).fadeOut(800, function(){

    – Buchse leer

    1. August 16 um 21:55 Uhr

1644283987 1 Aktualisierenladen Sie den Inhalt in Div mit jqueryajax neu
Sachin Sudhakar Sonawane

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

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

hoffe, das 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 das DIV zu füllen.

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

1644283987 956 Aktualisierenladen Sie den Inhalt in Div mit jqueryajax neu
David L

Obwohl Sie nicht genügend Informationen bereitgestellt haben, um tatsächlich anzugeben, WOher Sie Daten ziehen sollten, müssen Sie sie doch irgendwoher ziehen. Sie können die URL beim Laden angeben sowie Datenparameter oder eine Callback-Funktion definieren.

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

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

1644283987 610 Aktualisierenladen Sie den Inhalt in Div mit jqueryajax neu
dvhh

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']);
   }
?>

.

816740cookie-checkAktualisieren/laden Sie den Inhalt in Div mit jquery/ajax neu

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy