ie en loading problem js functie

[Slother]

beste

ik heb een javascriptfunctie die wodt uitgevoerd als er op een knop wordt gedrukt en doet hetvolgende:

zet in de div 'logo' een loading image
doet een ajax request
zet in de div 'logo' het logo terug

Dit werkt uitstekend in ff en opera, maar in ie en google chrome niet
het probleem is dat eerst de js functie volledig wordt uitgevoerd, en dan pas iets teruggeeft

dus de loading image wordt niet in de div gezet (dit gebeurd pas nadat de ajax is uitgevoerd)
en wordt dus direct terug overschreven met het logo, heeft iemand hier een oplossing voor?
ik heb al uren het net afgesurft, maar kan nergens een oplossing vinden

Alvast bedankt

[Crayne]

*tikt op zijn glazen bol*

Misschien als je de relevante code post.

[Slother]

JavaScript:

function logoff()
{
    var logo = $('#logo').html();
    $('#logo').empty().html('<img src="images/loading.gif" />');
    
    updateDiv('app_handler.php?A=logon&E=LOGOFF');
    
    $('#logo').empty().html(logo);
}

stel dat ik nu een pause in mijn php script zet van 5 sec dan wordt in firefox en opera mooi mijn loading gif getoont en na iets meer dan 5 seconden worden de divs mooi geupdated, maar in ie en chrome blijft mijn knop dan ingedrukt,gebeurt er niets, en krijg je na iets meer dan 5 sec ook die divs die geupdate worden, maar is er geen gif getoont

[ Voor 46% gewijzigd door MueR op 02-10-2010 15:01 . Reden: Code tags toegevoegd ]

[Juup]

Is die updateDiv() misschien synchroon ipv asynchroon?

[Slother]

JavaScript:

function getXmlResponse(url)
{
var x;
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseText;
} 

return loadXMLDoc(url);
}


function updateDiv(url)
{
    x = getXmlResponse(url);
    $('#content').html(x);
}

[ Voor 1% gewijzigd door MueR op 02-10-2010 15:00 . Reden: Code tags toegevoegd ]

[crisp]

Geen synchroon XHR gebruiken maar asynchroon met een onreadystatechange handler; sommige browsers updaten gewoonweg de pagina pas als de JS-thread klaar is.

[blaatkipje]

Als je toch al jQuery gebruikt. Waarom niet gewoon de jQuery ajax request pakken en in de succes functie het logo weer terugzetten.

[Slother]

ga meteen wat informatie zoeken om dit te begrijpen en nadie uit te testen, alvast bedankt!

blaatkipje schreef op zaterdag 02 oktober 2010 @ 11:10:
Als je toch al jQuery gebruikt. Waarom niet gewoon de jQuery ajax request pakken en in de succes functie het logo weer terugzetten.

omdat ik naargelang welke string ik terugkrijg bepaalde divs of meerdere ga updaten, en dan leek dit me makelijker, heb ook met $.ajax dingen proberen doen, maar ik raakte er niet echt uit toen, daarmee

[ Voor 71% gewijzigd door MueR op 02-10-2010 15:01 . Reden: Berichten samengevoegd ]

[MueR]

Ik heb even wat code tags toegevoegd, dat leest wat makkelijker.

[Slother]

beste mensen, slecht nieuws, nu doe ik het asynchroon met een onreadystatechange handler en nu geeft het bij geen enkele browser nog iets (de divs worden nog wel geupdate bedoel ik)
maar de loading image werkt nergens meer ik dacht dat de code goed was aangezien het de divs wel update
misschien weten jullie raad?

de code:

JavaScript:

function getXmlResponse(url)
{
var xmlHttp;
var x;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
        $('#content').html(xmlHttp.responseText);
      }
    }
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}

[ Voor 81% gewijzigd door Slother op 03-10-2010 19:03 ]

[R4gnax]

it_its_me schreef op zaterdag 02 oktober 2010 @ 11:10:
omdat ik naargelang welke string ik terugkrijg bepaalde divs of meerdere ga updaten, en dan leek dit me makelijker

Of je nu één of meerdere elementen gaat bijwerken, dat heeft werkelijk geen enkele invloed op het al dan niet kunnen of moeten gebruiken van de in jQuery beschikbare AJAX functionaliteit.

De success callback heeft net zo goed een parameter waar de response data in zit. Wil je dan nog steeds de rauwe response text lezen (wat er eigenlijk op duidt dat je niet goed hebt nagedacht over de wijze waarop server en client moeten communiceren, maar dat terzijde), dan kun je het onderliggende XmlHttpRequest object pakken en daar de responseText property van uit lezen. Het XHR object is namelijk ook als parameter beschikbaar.

JavaScript:

$.ajax({
  url: "app_handler.php",
  data: { "A": "logon", "E": "logoff" },
  success: function(data, status, xhr){
    // ...
  }
});

[Bosmonster]

Je gebruikt jQuery maar gaat vervolgens zelf een AJAX functionaliteit in elkaar knutselen?

Duik eens in de jQuery docs zou ik zeggen, want wat je wilt kan in een paar regels zoals R4gnax al zegt. Ik vind het een nogal rare redenatie om te zeggen "het lukte niet direct dus ben ik zelf maar wat gaan knutselen", aangezien dat toch een heel stuk lastiger is dan de supersimpele AJAX-api van jQuery...

[Slother]

nu weet ik weer waarom ik geen ajax van jquery gebruik
het kan zijn dat ik die app_handler.php aanroep met 2 parameters, of met 10
nu kan ik gewoon de link meegeven nl: app_handler.php?a=logon&e=logoff&p1=para1&p2=para2
een andere link zal dan bv maar 1 parameter hebben: app_handler.php?a=logon
maar deze variabele parameters kan ik tog niet met de ajax van jquery versturen, wel?

[Bosmonster]

En waarom zou dat niet kunnen? Je geeft de parameters toch zelf op via het data object

Neemt je alleen maar werk uit handen om zelf correct de querystring samen te stellen.

[ Voor 33% gewijzigd door Bosmonster op 04-10-2010 22:11 ]

[R4gnax]

it_its_me schreef op maandag 04 oktober 2010 @ 21:11:
maar deze variabele parameters kan ik tog niet met de ajax van jquery versturen, wel?

Bosmonster schreef op maandag 04 oktober 2010 @ 22:10:
En waarom zou dat niet kunnen? Je geeft de parameters toch zelf op via het data object

Lijkt me eerlijk gezegd een gevalletje 'niet (goed) gelezen' of 'door de bomen het bos niet meer zien'. Naast het feit dat dit alles zeer duidelijk in de jQuery API documentatie vermeld staat, had ik het gebruik v/h data object zelfs expliciet in mijn kleine op deze situatie toegepaste voorbeeldje gezet.

Echt heh... soms...

[Slother]

R4gnax schreef op dinsdag 05 oktober 2010 @ 09:01:
[...]


[...]


Lijkt me eerlijk gezegd een gevalletje 'niet (goed) gelezen' of 'door de bomen het bos niet meer zien'. Naast het feit dat dit alles zeer duidelijk in de jQuery API documentatie vermeld staat, had ik het gebruik v/h data object zelfs expliciet in mijn kleine op deze situatie toegepaste voorbeeldje gezet.

Echt heh... soms...

lijkt me niet juist:

JavaScript:

$.ajax({
  url: "app_handler.php",
  data: { "A": "logon", "E": "logoff" },
  success: function(data, status, xhr){
    // ...
  }
});

hier zit je vast aan de parameters A en E, maar ik kan af en toe A hebben, af en toe E af en toe beide
of af en toe nog meerdere, maar eerlijk gezegd vindt ik dit een beetje naast de kwestie, want het punt is dat de loading gif het niet doet, ik ga een ander simpel voorbeeldje geven waar mijn situatie duidelijker wordt:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>

    <title>Website</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="follow, all" />
    <meta name="googlebot" content="noopd" />
    <meta name="author" content="Website" />

    <meta name="copyright" content="Website" />
    <meta name="keywords" content="Website" />
    <meta name="description" content="Website" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    
    function pausecomp(millis)
    {
        var date = new Date();
        var curDate = null;

        do { curDate = new Date(); }
        while(curDate-date < millis);
    } 

        $(document).ready(function() {
            $("#boe").click(function() {
                $("#test").text("Updating");
                
                $.get('test.html', function(data) {
                    pausecomp(5000);
                    $("#test").text(data);
                });
            });
        });
    </script>

</head>


<body>

    <div id="test">Boe</div>
    <div><input type="button" id="boe" name="boe" value="click" /></div>
</body>


</html>

stel dat ik deze code heb; in test.html staat gewoon het woordje done
als ik op deze knop druk wordt het woordje updating niet weergegeven in internet explorer, maar na die 5 sec pause wel het woordje done, in ff daarentegen werkt dit wel, enig idee hoe dit opgelost kan worden

[crisp]

it_its_me schreef op dinsdag 05 oktober 2010 @ 21:02:
[...]

lijkt me niet juist:

JavaScript:

$.ajax({
  url: "app_handler.php",
  data: { "A": "logon", "E": "logoff" },
  success: function(data, status, xhr){
    // ...
  }
});

hier zit je vast aan de parameters A en E, maar ik kan af en toe A hebben, af en toe E af en toe beide
of af en toe nog meerdere

Dan begrijp je blijkbaar een aantal basisconcepten niet van javascript. Niets weerhoud je er van om op basis van bepaalde condities zelf een object samen te stellen die je meegeeft als data-property:

JavaScript:

var data = {}; // een object literal
if (logon_condition)
    data['A'] = 'logon';
if (logoff_condition)
    data['E'] = 'logoff';
if (some_other_condition)
    data['foo'] = 'bar';

$.ajax({
  url: "app_handler.php",
  data: data,
  success: function(data, status, xhr){
    // ...
  }
});

JavaScript:

function pausecomp(millis)
{
    var date = new Date();
    var curDate = null;

    do { curDate = new Date(); }
    while(curDate-date < millis);
}

Gebruik dit soort constructies aub nooit; dit doet niets anders dan de CPU hoggen (en inderdaad, sommige browsers updaten dan de pagina niet)....

[ Voor 14% gewijzigd door crisp op 05-10-2010 21:18 ]

[Slother]

enig welke andere functie, of methode om het script te pauzeren (gewoon om aan te tonen dat er genoeg tijd tussen zit) is voor mij het zelfde, op dit moment is het gewoon om mijn probleem aan te kaarten ...
en wat betreft die hoop ifstructuren, mijn programmeertechniek is misschien niet de mooiste, maar dat is evenmin mooi, of effecient, als je weet dat er zo'n 50 tal verschillende variabelen meegegeven kunnen worden

[gvdh]

Het script dat je hier gaf werkt zoals het moet als je de javascript-vertraging er uit haalt en de vertraging door php laat gebeuren.

[crisp]

it_its_me schreef op dinsdag 05 oktober 2010 @ 21:33:
enig welke andere functie, of methode om het script te pauzeren (gewoon om aan te tonen dat er genoeg tijd tussen zit) is voor mij het zelfde, op dit moment is het gewoon om mijn probleem aan te kaarten ...

Dat is voor jou misschien hetzelfde, maar voor de browser niet
Punt is dat je de executie-context van javascript moet onderbreken wil de browser de DOM-changes kunnen toepassen en renderen. Dat bereik je door gebruik te maken van asynchrone XHR requests en/of van timers (setTimeout).

[Slother]

gvdh schreef op dinsdag 05 oktober 2010 @ 21:40:
Het script dat je hier gaf werkt zoals het moet als je de javascript-vertraging er uit haalt en de vertraging door php laat gebeuren.

ok dat lukte hier niet, en bij een vriend van mij ook niet (samen oplossingen gezocht, en ook met php geprobeert, zelfs met een zware query naar een database, alles had hetzelfde effect)

crisp schreef op dinsdag 05 oktober 2010 @ 21:52:
[...]

Dat is voor jou misschien hetzelfde, maar voor de browser niet
Punt is dat je de executie-context van javascript moet onderbreken wil de browser de DOM-changes kunnen toepassen en renderen. Dat bereik je door gebruik te maken van asynchrone XHR requests en/of van timers (setTimeout).

zoals in eerder geposte berichten al aangegeven heb ik het ook met asynchrone request geprobeerd, ook dat lukte niet

[Caelorum]

dit werkt gewoon zoals al eerder vermeld:

code:

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#boe").click(function () {
                $("#test").text("Updating");
                $.get('test.html', function (data) {
                    setTimeout('$("#test").text(unescape("' +escape(data)+'"))', 1000);
                });
            });
        });
    </script>
</head>
<body>
    <div id="test">
        Boe</div>
    <div>
        <input type="button" id="boe" name="boe" value="click" /></div>
</body>
</html>

Ik raad je aan om er even goed naar te kijken

[ Voor 3% gewijzigd door Caelorum op 05-10-2010 23:08 ]