Rafraîchir/recharger le contenu d'une Div en utilisant jquery/ajax

Question

Je veux recharger une div en cliquant sur un bouton. Je ne veux pas recharger la page entière.

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>

En cliquant sur <input type="button" id="getCameraSerialNumbers" value="Capture Again"> Bouton a <div id="list">....</div> doit se recharger sans charger ou rafraîchir la page entière.

Voici le Jquery que j'ai essayé, mais qui ne fonctionne pas :-)

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

Veuillez nous suggérer.

Voici la DIV de ma page, qui contient les images et les numéros de série de certains produits... Ces informations seront extraites de la base de données la première fois lors du chargement de la page. Mais si l'utilisateur rencontre 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 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 <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" /> Les informations contenues dans le bouton <div id="list">... </div> doit être chargé à nouveau.

N'hésitez pas à me contacter si vous avez besoin de plus d'informations.

Answer 1

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

Tenez toujours compte de l'espace situé juste avant le deuxième # sinon le code ci-dessus renverra la page entière imbriquée dans le DIV prévu. Mettez toujours un espace.

Answer 2

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

Answer 3

Je l'utilise toujours, il 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);

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

Answer 4

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

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

J'espère que cela aidera quelqu'un à comprendre

Answer 5

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

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

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