Odśwież / przeładuj zawartość w Div przy użyciu jquery / ajax


80

Chcę ponownie załadować element DIV po kliknięciu przycisku. Nie chcę przeładowywać całej strony.

Oto mój kod:

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>

Po kliknięciu <input type="button" id="getCameraSerialNumbers" value="Capture Again">przycisku <div id="list">....</div>powinien załadować się ponownie bez ładowania lub odświeżania całej strony.

Poniżej znajduje się Jquery, które próbowałem, ale nie działa: -

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

Proszę zasugeruj.

Oto DIV na mojej stronie, który zawiera zdjęcia i numery seryjne niektórych produktów ... które będą pochodzić z bazy danych po raz pierwszy podczas ładowania strony. Ale czy użytkownik napotyka jakiś problem, kliknie przycisk „Przechwyć ponownie” „ <input type="button" id="getCameraSerialNumbers" value="Capture Again">”, co spowoduje ponowne załadowanie tych informacji.

Kod HTML 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>

Teraz po kliknięciu <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />przycisku informacje, które się w nim znajdują, <div id="list">... </div> powinny zostać ponownie załadowane.

Daj mi znać, jeśli potrzebujesz więcej informacji.


1
Nie ma tu wystarczająco dużo szczegółów. Skąd próbujesz pobrać zawartość? Jaki masz kod, żeby to zrobić? Czy są jakieś błędy? Dlaczego to „nie działa”?
Rory McCrossan

Co dokładnie chcesz przeładować? Czy musiałbyś zadzwonić do bazy danych?
Alvaro

Co znajduje się w # step1Content i jakie ma być po kliknięciu przycisku?
jcubic

Pytanie brzmi, jak najpierw wypełnić treść DIV #list?
A. Wolff

Odpowiedzi:


44

Zawsze tego używam, działa idealnie.

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

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

1
Myślę, że można również usunąć delay, ponieważ zgodnie z dokumentacją opóźnia kolejne połączenia.
Domenico De Felice

O tak, to po prostu fajny efekt! ;)
Gucho Ca

$('#loader3', form);zawiera formularz? czy mogę to usunąć? ponieważ używam zmiany methed not submit.
151291

151291 tak, to identyfikator mojego formularza, zmień go według swoich potrzeb.
Gucho Ca

1
formjest zapakowany w jquery, więc dlaczego to zrobiłeś $(form).fadeOut(800, function(){
jack blank

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

Zawsze zwracaj uwagę na spację tuż przed drugim znakiem # , w przeciwnym razie powyższy kod zwróci całą stronę zagnieżdżoną w zamierzonym DIV. Zawsze umieszczaj miejsce.


9
Spowoduje to zagnieżdżenie #mydiv w #mydiv dla każdego wywołania do załadowania. Odpowiednią wersję dostarcza Juan.
Mathias

To nie jest AJAX, jak mówią pytania.
Gucho Ca

2
Niekoniecznie jest to AJAX, ale zapewnia oczekiwane wrażenia użytkownika
Dale Clifford

Czy możliwe jest uwzględnienie parametrów w uri? Na przykład: $("#relation-body").load(location.href+" #relation-body?organization_id="+item.id);
Koen B.

1
Miałoby to wpływ na wywołania jquery, ponieważ tworzy dynamiczne elementy w DOM, jquery zawodzi. Więc wykorzystać onzdarzenia w jQuery zamiast bezpośredniego dostępu do elementu wewnątrz DIV
Thamilhan

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

10
Prosimy o wyjaśnienie w odpowiedzi, pomoże to innym zrozumieć, dlaczego uważasz, że jest to dobra odpowiedź na pytanie.
m4rtin,

21
@ php_coder_3809625 Szczerze mówiąc, Peca odpowiedział kilka miesięcy po Juanie :)
Shashank Shekhar

3
@Juan: czy mógłbyś wyjaśnić, co dokładnie robi. dzięki
Gaurav Parek

1
Jak bym to dostosować, aby również ponownie załadować wszystkie dzieci?
Ricky Barnett

czy mogę użyć klasy zamiast id?
TarangP,

18

Gdy ta metoda jest wykonywana, pobiera zawartość location.href , ale następnie jQuery analizuje zwrócony dokument, aby znaleźć element z divId. Ten element wraz z zawartością jest wstawiany do elementu o identyfikatorze divIdwyniku ( ), a reszta pobranego dokumentu jest odrzucana.

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

mam nadzieję, że pomoże to komuś zrozumieć


7

To, czego chcesz, to ponowne załadowanie danych, ale nie ponowne ładowanie div.

Musisz wykonać zapytanie Ajax, aby pobrać dane z serwera i wypełnić DIV.

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


7

Chociaż nie podałeś wystarczającej ilości informacji, aby faktycznie wskazać, skąd powinieneś pobierać dane, musisz je skądś pobrać. Możesz określić URL podczas ładowania, a także zdefiniować parametry danych lub funkcję zwrotną.

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

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


5

Spróbuj tego

Kod HTML

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

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

ścieżka kodu strony php = / ścieżka / do / plik.php

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

2

Musisz dodać źródło, z którego ładujesz dane.

Na przykład:

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

Mam nadzieję, że to ci pomoże.


1

Wiem, że temat jest stary, ale możesz zadeklarować Ajax jako zmienną, a następnie użyć funkcji, aby wywołać zmienną w żądanej treści. Pamiętaj, że wywołujesz to, co masz w Ajax, jeśli chcesz inne elementy od Ajax, musisz to określić.

Przykład:

Var infogen = $.ajax({'your query')};

$("#refresh").click(function(){
  infogen;
  console.log("to verify");
});    

Nadzieja pomaga

jeśli nie, spróbuj:

$("#refresh").click(function(){
      loca.tion.reload();
      console.log("to verify");
    });    

0
$(document).ready(function() {
var pageRefresh = 5000; //5 s
    setInterval(function() {
        refresh();
    }, pageRefresh);
});

// Functions

function refresh() {
    $('#div1').load(location.href + " #div1");
    $('#div2').load(location.href + " #div2");
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.