[javascript] chrome probleem

[Promy]

Voor m'n domotica laad ik de gevens in via javascript via een ajax call.
Om aan te geven dat er geladen wordt, activeer ik eerst een overlay met loading icon (een div die een bepaalde css klasse krijgt), dan worden de verschillende ajax calls gedaan, info aangepast en het div terug onzichtbaar gezet.
Dit werkt zonder probleem in ie en firefox. In chrome (zowel op de desktop en meer belangrijk op de android telefoon) verwerkt hij echter alle javascript en geeft hij achteraf het resultaat. (en dus geen loading screen)

Via google kon ik dat probleem niet terugvinden. Ook de javascript console op chrome (desktop) blijft leeg... die van firefox geeft geen foutmeldingen.

Is dit een bekend fenomeen, en hoe kan ik dat oplossen?

[NMe]

En nu moeten we raden wat je precies doet? Heb je een stukje relevante code? En dat is dus niet hetzelfde als alle code.

Zie ook De Quickstart.

[Promy]

Ik had er geen code bijgezet omdat hij dat met verschillende types code doet...vandaar dat ik dacht dat het misschien iets bekends was...(die ik niet kon vinden via google)

Hieronder een stukje code die ook een zelfde probleem heeft: de tekst "updaten..." komt er dus nooit in chrome. maar na een paar seconden gewoon de aangepaste tijd. In firefox en ie doet hij het wel mooi

code:

function verversactor(wie){
        document.getElementById("ververs").innerHTML = "Updaten...";
    var comm = "";
    switch(wie) {
        case "schakel01a":
            comm = "10125A0330885AA0";
            break;
        //nog wat case mogelijkheden - eruit gehaald als voorbeeld
    } 

    var huidige_status = ""; //zal de huidge status van de standen van de dimmermodule bevatten
    var r = new Date().getTime(); // unique random number to workaround IE cache issue
    $.ajax({
        url: adres + comm + "&r=" + r ,
        type: "GET",
        dataType: "json",
        async: false,
        success: function(html) {
            huidige_status = html.substr(8,12); //enkel de gegevens van de kanalen 1 tem 6 
        }
    })

    if (wie == "schakel01a") {  // het zijn de eerste 6 kanalen van de schakelaar01
            if (huidige_status.substr(0,2) == "FF" && document.getElementById("overloop")){
                document.getElementById("overloop").src="licht_1.png";
                }
                else if (document.getElementById("overloop")) {
                document.getElementById("overloop").src="licht_2.png";
                }
            //nog wat if's voor de andere standen - eruit gehaald als voorbeeld
    }
    //nog wat ifs voor de andere moduls, eruit gehaald als voorbeeld
    var d = new Date();
    document.getElementById("ververs").innerHTML = "Laatste update " + d.getHours() + ":" + d.getMinutes();
}

[Juup]

Je ajax wordt synchroon uitgevoerd.
De browser is niet verplicht om DOM acties (zoals innerHTML) meteen uit te voeren.
Chrome wacht blijkbaar op een goed moment om de UI te verversen.

Als je de ajax asynchroon maakt werkt het ws. wel zoals je wilt.

[Jorik90]

Waarom doe je je AJAX synchroom? Dat is iets wat je alleen in hoge uitzondering wilt, niet in dit soort situaties. Als je alles na de AJAX-aanroep in de success-functie plaatst, en de AJAX call async maakt heb je een grote kans dat het wel goed werkt.

Het unieke nummer wat je toevoegt aan je AJAX call is overigens overbodig, dit handelt jQuery zelf af. Overigens, als je toch jQuery gebruikt voor je AJAX call, waarom doe je dan geen $('#ververs').text('Updaten..')?

[Promy]

Als ik hem asyncroon laat verlopen, dan krijg ik foutmeldingen omdat de gegevens niet beschikbaar zijn (er zit dan NaN in de variable), ook als ik ze binnen de function(html) zet.

het is bij volgend stukje code dat de fout dan voorkomt, meer bepaald in de laatste "else"
Ik doe het synchroon omdat het dan gewoon lukte zonder probleem.
Het is wel zo dat de functie meerdere keren na elkaar wordt aangeroepen telkens met een ander argument
het unieke argument was om er zeker van te zijn dat er geen cache data terugkomt van het php script dat wordt aangeroepen om de json te leveren.

$('#ververs').text: ik leer weer bij, is inderdaad wel gemakkelijker

code:

if (wie == "dimmer01") {  // het is de eerste (linkse) dimmer
    if (document.getElementById("burozijde")){
        if (huidige_status.substr(0,2) == "00") {   document.getElementById("burozijde").src="licht_000b.png";}
        else if (huidige_status.substr(0,2) == "FF") {  document.getElementById("burozijde").src="licht_100b.png";}
        else {  
            var kanaal1 = Math.round(parseInt(huidige_status.substr(0,2), 16)*10/255);
            kanaal1 = kanaal1.toString();
            var kanaal1volledig = "licht_0" + kanaal1 + "0b.png";
            document.getElementById("burozijde").src=kanaal1volledig;
        }
    }
}

[NMe]

Promy schreef op dinsdag 23 december 2014 @ 20:56:
Als ik hem asyncroon laat verlopen, dan krijg ik foutmeldingen omdat de gegevens niet beschikbaar zijn (er zit dan NaN in de variable), ook als ik ze binnen de function(html) zet.

Dat kan niet. Dan heb je toch echt iets buiten die success-handler staan dat toch gebruik probeert te maken van data die er nog niet is. Of het is gewoon iets compleet ongerelateerds.

[ Voor 5% gewijzigd door NMe op 23-12-2014 20:59 ]

[Promy]

De reden voor het ontbreken van de data ligt volgens mij bij de aangeroepen php, want zelfs een eenvoudige aanpassing met enkel een alert(html) in de succes geeft een lege reactie.

de aangeroepen php is (sorry om hier php te posten terwijl dit serverside is)

code:

<?php
header('Content-Type: text/html; charset=utf-8');
$opdr = $_GET["opdr"];
$opdracht=file_get_contents('http://10.0.2.119/script.php?opdr='.$opdr);
echo $opdracht
?>

en het aangeroepen script op de andere server voert gewoon een python script uit die een arduino aanspreekt

code:

<?php
      $opdr = $_GET["opdr"];
      $message=shell_exec("/usr/bin/python test/nb_serial.py ".$opdr);
      $message = trim(preg_replace('/\s+/', ' ', $message));
      echo(json_encode($message));
?>

[Klaasvaak]

Zet je de regel var huidige_status = ""; ook binnen success-functie als je hem asynchroon laat lopen? Anders gaat het mis als verversactor opnieuw wordt aangeroepen terwijl de ajax call nog bezig is.

[RobIII]

Je hebt een hele zut code buiten je succes-handler staan. Nogal wiedes dat je dan NaN e.d. krijgt als je 'm asynchroon laat aanroepen; je probeert zaken te accessen voordat ze gevuld zijn.

Zet regel 23 t/m 34 uit deze post en tussen regel 19/20 (hoewel dat, misschien, ook wat lomp is en je even wat variablen moet doorgeven via een closure ofzo..)?

Verder snap ik effe niet waarom je met substr enzo ligt te frotten; return gewoon je data als JSON of desnoods XML o.i.d. i.p.v. dat je gaat proberen html uit elkaar te pluizen tot iets zinnis.

[ Voor 57% gewijzigd door RobIII op 23-12-2014 22:58 ]

[R4gnax]

Niveau van de opening post en de gebruikte code is weer lekker treurig.

Mijn advies aan de TS zou zijn om z'n backspace knop even heeeeel lang ingedrukt te houden en dan eerst eens het algehele kennisniveau op te gaan krikken voordat er ook maar een regel nieuwe code geschreven wordt.

Dit ziet er namelijk uit alsof het bij elkaar geknipt en geplakt is uit willekeurige webdev-fora anno 2005 waarbij niemand, inclusief de TS, nou eigenlijk echt wist waar die mee bezig was.


(Hopelijk is dit ook niet bedoeld voor commercieel verkrijgbare domotica.)

[Promy]

@Roblll: in de geposte code staat het inderdaad nog buiten de success functie. Bij het aanpassen naar async heb ik het erbinnen gezet, maar er komt gewoon geen data terug van het aangeroepen php script: de variabele "html" blijft gewoon leeg.
Ivm de substring: ik kon inderdaad ook de data gaan opsplitsen in de php backend en ze weergeven als json. De reden waarom het hier is blijven staan is omdat de vorige hardware de data op die manier gaf. (was rechtstreeks webservertje op de atmega en die kon ik niet wijzigen) Nu is m'n hardware aan gepast tot een arduino via serieel en is het php script ertussen gekomen. Maar het is inderdaad misschien properder als ik de json in de php aanpas.

@Klaasvaak: ik heb die regel ook eens verplaatst in de success functie, maar het maakt precies geen verschil... ik blijf geen reactie krijgen.

@R4gnax: M'n nivo van coden is inderdaad niet echt een hoogvlieger, ik ben dan ook geen professioneel maar probeer alles zelf te leren volgens wat ik nodig heb. Niet iedereen heeft jouw nivo van coden of opleiding... en nee het is puur hobby project dus niet commercieel. Maar ik ben steeds bereid iets bij te leren als je me enkele (constructieve) hints geeft

[ Voor 41% gewijzigd door Promy op 24-12-2014 08:34 ]

[R4gnax]

Promy schreef op woensdag 24 december 2014 @ 08:16:
@R4gnax: M'n nivo van coden is inderdaad niet echt een hoogvlieger, ik ben dan ook geen professioneel maar probeer alles zelf te leren volgens wat ik nodig heb. Niet iedereen heeft jouw nivo van coden of opleiding... en nee het is puur hobby project dus niet commercieel. Maar ik ben steeds bereid iets bij te leren als je me enkele (constructieve) hints geeft

Allereerst excuses dat mijn vorige post zuur klonk. (Ik heb deze situaties misschien te vaak voorbij zien komen op Tweakers de laatste maanden.)

Aangezien je toch jQuery gebruikt; begin eens met een kleine trip langs http://learn.jquery.com
Pak dan i.h.b. even de stukken over jQuery Core, over Ajax en over Code organization er bij.

[Juup]

Het is imho veel beter om eerst javascript te leren en daarna pas evt jQuery.
Veel jQuery gebruikers hebben geen idee waar ze mee bezig zijn en dan krijgen ze ook nog zo'n advies als hierboven

[R4gnax]

Juup schreef op woensdag 24 december 2014 @ 10:00:
Het is imho veel beter om eerst javascript te leren en daarna pas evt jQuery.
Veel jQuery gebruikers hebben geen idee waar ze mee bezig zijn en dan krijgen ze ook nog zo'n advies als hierboven

Voor iemand die professioneel er mee bezig gaat wel. Maar voor de hobby is dat misschien weer net een brug te ver.

(Overigens bevat het jQuery learning center ook gewoon een stoomcursus met de basics van JavaScript.)

[Promy]

Voor zover ik kan herleiden zit het probleem vermoedelijk bij het aanspreken van de hardware: als ik sync gebruik dan moet het script wachten tot de response er is vooralleer een 2e vraag door te sturen.
Bij async is dat niet zo en komde de vraag om de 2e status eigenlijk onmiddelijk na de eerste.

Ik vermoed dat dit dus te snel is voor de hardware omdat die toch een seconde nodig heeft om de correcte crc's te bereken, de status op te vragen bij de domotica controller en het dan terug te geven via serieel (9600 baudtrate)

[Jorik90]

Kun je je code eens laten zien na je aanpassing?

Wat je daar zegt lijkt me flauwekul.. de server haalt de requests echt niet door elkaar. Het kan wel zo zijn, dat jíj de requests door elkaar haalt. In de dev tools van Chrome kun je heel goed zien wat de server teruggeeft. F12 in Chrome, dan "Network" tab openen.

[Promy]

@Jorik90: om de problemen te minimaliseren had ik gewoon volgende code gebruikt:

code:

function verversactor(wie){
document.getElementById("ververs").innerHTML = "Updaten...";
var comm = "";
switch(wie) {
    case "schakel01a":
        comm = "10125A0330885AA0";
        break;
    case "schakel01b":
        comm= "10175A03DB7897A0";
        break;
    case "dimmer01":
        comm = "101247C39CEB7CA0";
        break;
    case "dimmer02":
        comm = "101294C3DC9FE3A0";
        break;
} 

$.ajax({
        url: adres + comm ,
        type: "GET",
        dataType: "json",
        async: true,
        success: function(html) {console.log( html );}
    });
var d = new Date();
document.getElementById("ververs").innerHTML = "Laatste update " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);
}

Dit wordt meerdere keer na elkaar aangeroepen (bv 4 keer op de "zwaarste" pagina waar ik de status van alle 4 de actoren nodig heb). Op de console zie ik dat er 3 keer een lege staat en 1 keer iets met foute info.

Onder de info netwerk zie ik dat de 4 calls gelijktijdig vertrekken
Waar er maar 1 status wordt opgevraagd, daar werkt het wel perfect, dus het lijkt me een probleem van de "backend" te zijn...

Met het door elkaar halen bedoel ik: het perl script opent de poort en stuurt de request en wacht op response. Als je dan onmiddelijk erna opnieuw de poort opent en een request stuurt, dan heeft de eerste nog geen antwoord gehad en loopt het mis

@R4gnax: ga ik zeker eens nalezen! bedankt!

[ Voor 10% gewijzigd door Promy op 24-12-2014 11:16 ]

[R4gnax]

Promy schreef op woensdag 24 december 2014 @ 11:10:
Met het door elkaar halen bedoel ik: het perl script opent de poort en stuurt de request en wacht op response. Als je dan onmiddelijk erna opnieuw de poort opent en een request stuurt, dan heeft de eerste nog geen antwoord gehad en loopt het mis

Yep. Dat gaat inderdaad bijna 100% zeker mis.
Je zult een soort queuing mechanisme in moeten gaan bouwen in je PHP backend wat extra binnenkomende requests in een queue schuift om één voor één af te werken zodra het communicatiekanaal naar je domotica weer vrij komt.

Promy schreef op woensdag 24 december 2014 @ 11:10:
@R4gnax: ga ik zeker eens nalezen! bedankt!

Graag gedaan.

[ Voor 3% gewijzigd door R4gnax op 24-12-2014 13:12 ]