Refresh/reload den Inhalt in Div mit jquery/ajax

Question

Ich möchte ein div auf einen Klick auf eine Schaltfläche 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"> Knopf ein <div id="list">....</div> ohne Laden oder erfrischend ganze Seite neu zu laden sollte.

Unten ist die Jquery, die ich versucht, aber nicht funktioniert: -

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

Bitte vorschlagen.

Hier ist das DIV auf meiner Seite, die Bilder und Seriennummern einiger Produkte enthält ... Welches kommt aus der Datenbank 1. Mal auf der Seite laden. Aber wenn der Benutzer auf ein Problem stößt, wird er auf die Schaltfläche "Capture Again" (erneut erfassen) "<input type="button" id="getCameraSerialNumbers" value="Capture Again">" klicken, die diese Informationen erneut lädt.

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> 

Klicken Sie nun auf der <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" /> Taste, die Informationen, die in <div id="list">... </div> ist, sollte wieder geladen werden.

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

Answer 1

ich dies immer verwenden, 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); 

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

Answer 2

Was Sie wollen, ist die Daten erneut zu laden, aber nicht das Div 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/

Answer 3

Während Sie nicht genügend Informationen zur Verfügung gestellt haben, um tatsächlich zu zeigen, wo Sie Daten ziehen sollten, müssen Sie es von irgendwo 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/

Answer 4

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

Answer 5

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

Answer 6

Versuchen Sie, diese

HTML-Code

<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-Seite Code path =/path/t o/Datei.

php

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

Answer 7

Wenn dieses Verfahren ausführt, ruft sie den Inhalt von location.href, aber dann parst jQuery das zurückgebrachte Dokument das Element mit divId zu finden. Dieses Element wird zusammen mit seinem Inhalt in das Element mit einer ID (divId) von result eingefügt, und der Rest des abgerufenen Dokuments wird verworfen.

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

Hoffnung dies jemand helfen kann

Answer 8

zu verstehen, müssen Sie die Quelle aus hinzufügen, wo Sie die Daten sind geladen.

Beispiel:

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

ich glaube, Sie diese Seite besuchen sollte auf Auto Load and Refresh Div on Ajax Call Without Reloading Page using jQuery

hoffe, es wird Ihnen helfen.