Avatar billede AnyFellow Mester
25. januar 2016 - 20:54 Der er 14 kommentarer og
1 løsning

Ajax - Langsom opdatering

Jeg har en side, hvor der dynamisk bliver indsat 2 knapper, som brugere kan klikke på.

Klikkes der på en knap, fanges dette og tekst i en boks opdateres.

Problemer er at der går op med 5-10 sekunder før dette sker, selvom scriptet ser ud til at køre hurtigt nok.


$(document).ready(function() {
    if ($("#orderUpdate").length > 0) {
        $("#cash").live("click", function() {
            $.ajax({
                url: '/pages/order.php?dnr&type=json&button=cash',
                cache: false,
                dataType: 'json',
                success: function(result){
                    if (result.action === 'show_html') {
                        $('#orderStatus').html(result.data);                   
                    }
                }
            });
        });

        $("#cancel").live("click", function() {
            $.ajax({
                url: '/pages/order.php?dnr&type=json&button=cancel',
                cache: false,
                dataType: 'json',
                success: function(result){
                    if (result.action === 'show_html') {
                        $('#orderStatus').html(result.data);
                    }
                }
            });
        });
    }
});


Sætter jeg en alert ind før min result.data skal vises på skærmen får jeg alerten op straks. Efter den lukkes går der stadig relativ lang tid før boksen #orderStatus opdateres.

result.data indeholder ikke det store data. Ved tryk på #cancel er indholdet "Din ordre er <strong>annulleret</strong>".

Samlet set modtager scriptet kun result.data og result.action, som er "show_html".

Nogen idéer til hvad mit scripts problem er?
Avatar billede moddi100 Seniormester
25. januar 2016 - 21:01 #1
Mit umiddelbare bud er at det er serveren, der er lang tid om at håndtere AJAX forespørgslen. Du kan teste dette ved at bruge Firebug eller Chrome Developer Console
Avatar billede AnyFellow Mester
25. januar 2016 - 21:30 #2
moddi100...> Når min alert er sat ind efter ajax forespørgslen er gennemført (efter success), troede jeg serverkaldet var overstået?
Avatar billede moddi100 Seniormester
25. januar 2016 - 21:39 #3
Det har jeg lidt svært ved at udtale mig om, da "før i koden" kan være mange steder :)

Men prøv at tage et kig med #1. Har du Chrome eller IE kan du starte udelukkende ved at trykke F12. Den vil sikkert kunne fortælle dig nyttig viden - måske du har flere indlæsninger etc.
Avatar billede Zeebaah Praktikant
26. januar 2016 - 11:17 #4
Hvis der er meget data der skal læses ind kan det tage lidt længere tid.

Derudover oplever jeg tit at hvis jeg køre en side lokalt (xampp osv.) Så er alle mine ajax requests langsomme
Avatar billede AnyFellow Mester
26. januar 2016 - 20:16 #5
moddi100...> Jeg må prøve at lave et test setup, idet koden kun er aktuel på mobilplatform, hvor der ikke umiddelbart er de store muligheder for fejlfinding.

Zeebaah...> Der er ikke meget data, og sætter jeg en alert ind efter "success", så kommer alerten straks, så jeg ville jo synes at alt data er modtaget.
Avatar billede thomas Praktikant
27. januar 2016 - 06:25 #6
Da AJAX (hvilket navnet siger) arbejder asyncronous, er der ikke nogen garanti for at koden inde i dine callbacks har kørt klart inden du kommer til slutningen af scriptet.

Som tidligere skrevet, så fejlsøg det med dev tools. (Network og filtret på XHR) Her kan du se om det er dine requests der er problemet.
Avatar billede AnyFellow Mester
01. februar 2016 - 11:41 #7
Jeg må i gang med at kigge på nogle udviklerværktøjer for at se hvor sløvheden opstår.

hoshts...> Jeg er absolut ikke en haj til Ajax, men det virker meget ulogisk på mig at det kald jeg anvender skulle køre asynkront, idet koden angivet under success netop skal køres når kaldet er gennemført korrekt (synkront) idet evt. data modtaget retur i kalder typisk anvendes her.

Dem der er interesseret i point kan lægge et svar.
Avatar billede thomas Praktikant
01. februar 2016 - 12:53 #8
Det jeg mente var at alert kommer op inden da Ajax kør asynkront.
Avatar billede AnyFellow Mester
01. februar 2016 - 20:31 #9
hoshts...> Tror vi taler forbi hinanden.

Det jeg har forsøgt at forklare er at jeg har sat min alert ind her:


$("#cancel").live("click", function() {
    $.ajax({
        url: '/pages/order.php?dnr&type=json&button=cancel',
        cache: false,
        dataType: 'json',
        success: function(result){
            alert("TEST");
            if (result.action === 'show_html') {
                $('#orderStatus').html(result.data);
            }
        }
    });
});


Når jeg gør det, så popper min alert op straks, men data der skrives til #orderStatus først sker måske 10 sekunder senere.
Avatar billede AnyFellow Mester
05. februar 2016 - 11:54 #10
Lukker.
Avatar billede Zeebaah Praktikant
05. februar 2016 - 14:06 #11
bliver lige lidt forsinket kommentar herfra.

Jeg ved nogle bliver lidt forvirret over alert() + tid til resten af scriptet.

Når din alert() bliver kaldt, så pauser den scriptet. (har en kollega som altid glemmer dette, og brokker sig over tiden).
Men dit indhold burde komme samme tid, især hvis det kun er lidt tekst.

Har oplevet på nogle browsere at de er langsomme til at udføre en html data når man laver det som .html og ikke
.append($("<div/>")). ved ikke om det kan have noget med det at gøre?
Avatar billede AnyFellow Mester
10. februar 2016 - 09:17 #12
Alerten blev sat ind, idet jeg ikke kunne forstå der gik så lang tid inden der blev opdateret.

Jeg må prøve at appende direkte, uden at bruge .html.

Tak for deltagelsen.

Har du nogen anbefalinger til værktøjer, der fungerer godt i forbindelse med fejlfinding af ajax-scripting?
Avatar billede Zeebaah Praktikant
10. februar 2016 - 14:25 #13
Jeg bruger kun google chrome debug tools, der kan du se div. oplysninger om din ajax. sker der en fejl er det oftes server siden og ikke dit ajax. :)
Avatar billede AnyFellow Mester
10. februar 2016 - 19:25 #14
Okay, dem må jeg prøve.
Avatar billede keysersoze Guru
10. februar 2016 - 22:33 #15
Benyt console.log i stedet for alert - så kan du følge med i din developer toolbars konsol uden at blokere for noget andet.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester