web-dev-qa-db-fra.com

Actualiser / recharger le contenu dans Div en utilisant jquery / ajax

Je veux recharger une div en cliquant 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>

Lorsque vous cliquez sur le bouton <input type="button" id="getCameraSerialNumbers" value="Capture Again">, un <div id="list">....</div> doit être rechargé sans charger ou actualiser toute la page.

Ci-dessous, le Jquery que j'ai essayé, mais ne fonctionne pas: -

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

Veuillez suggérer.

Voici la DIV sur ma page, qui contient les images et les numéros de série de certains produits ... qui proviendront de la première base de données sur le chargement de page. Mais si l'utilisateur est confronté à un problème, il cliquera sur le bouton "Capturer à nouveau" "<input type="button" id="getCameraSerialNumbers" value="Capture Again">" qui chargera à nouveau ces informations.

Le code HTML de la 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, en cliquant sur le bouton <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />, les informations contenues dans <div id="list">... </div> doivent être chargées à nouveau.

S'il vous plaît laissez-moi savoir si vous avez besoin de plus d'informations.

javascriptjqueryhtmlcssajax
69
UID

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

                        });
                    }
                });
            });
        });
         });
40
Gucho Ca
$("#mydiv").load(location.href + " #mydiv");
105
Peca
$("#myDiv").load(location.href+" #myDiv>*","");
53
Juan Manuel PRONEXO De Castro

Lorsque cette méthode est exécutée, elle récupère le contenu de location.href, mais jQuery analyse ensuite le document renvoyé pour rechercher l'élément avec divId. Cet élément, ainsi que son contenu, est inséré dans l'élément avec un ID (divId) de résultat et le reste du document récupéré est ignoré.

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

espérons que cela aidera quelqu'un à comprendre

15
Sachin Sudhakar Sonawane

Bien que vous n'ayez pas fourni suffisamment d'informations pour indiquer réellement où vous devriez extraire des données, vous devez les extraire de quelque part. Vous pouvez spécifier l'URL à charger, 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/

7
David L

Ce que vous voulez, c'est recharger les données sans recharger la div.

Vous devez créer une requête Ajax pour extraire des données du serveur et remplir le DIV.

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

7
user1409909

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>

code de la page php chemin =/chemin/vers/fichier.php

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

Vous devez ajouter la source à partir de laquelle vous chargez les données.

Par exemple:

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

J'espère que cela vous aidera.

2
Shubham Kumar