ajax

Je souhaite recharger un div sur cliquez sur un bouton. Je ne veux pas recharger la page complète.

Voici mon 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>

Sur le clic de <input type="button" id="getCameraSerialNumbers" value="Capture Again"> bouton a <div id="list">....</div> doit être rechargé sans charger ou actualiser la page complète.

Voici le Jquery que j'ai essayé, mais ne fonctionne pas: –

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

Veuillez suggérer.

Voici le DIV sur ma page, qui contient des images et des numéros de série de certains produits … Ce qui viendra de la base de données 1ère fois sur la charge de page. Mais l'utilisateur est-il confronté à un problème, il clique sur le bouton "Capture à nouveau" " <input type="button" id="getCameraSerialNumbers" value="Capture Again"> " qui va charger ces informations à nouveau.

Le code HTML de 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>

Maintenant, cliquez sur le bouton <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" /> button, l'information qui se trouve dans <div id="list">... </div> Doit être à nouveau chargé.

Veuillez me faire savoir si vous avez besoin de plus d'informations.

Je l'utilise toujours, fonctionne parfaitement.

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

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

Lorsque cette méthode s'exécute, elle récupère le contenu de location.href , mais jQuery analyse le document renvoyé pour trouver l'élément avec divId . Cet élément, ainsi que son contenu, est inséré dans l'élément avec un identifiant ( divId ) de résultat et le reste du document récupéré est mis au rebut.

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

J'espère que cela peut aider quelqu'un à comprendre

Bien que vous ne fournissiez pas suffisamment d'informations pour indiquer SI VOUS devriez tirer des données, vous devez l'extraire de quelque part. Vous pouvez spécifier l'URL en charge, ainsi que définir des paramètres de données ou une fonction de rappel.

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

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

Essaye ça

Code html

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

Code 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>

Chemin du code de la page php = / chemin / à / fichier.php

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

Ce que vous voulez, c'est de charger à nouveau les données, mais pas de recharger la division.

Vous devez faire une requête Ajax pour obtenir des données du serveur et remplir le DIV.

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

Vous devez ajouter la source à partir de l'endroit où vous chargez les données.

Par exemple:

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

Je pense que vous devriez visiter cette page sur Auto Load and Refresh Div sur Ajax Call Without Recharger la page en utilisant jQuery

J'espère que cela vous aidera.