Toon posts:

ie en loading problem js functie

Pagina: 1
Acties:

  • Slother
  • Registratie: november 2009
  • Laatst online: 16-07 17:09
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
  • Registratie: januari 2002
  • Laatst online: 21-07 11:01

Crayne

Have testicles, will travel

*tikt op zijn glazen bol*

Misschien als je de relevante code post.

Mijn Library Thing catalogus


  • Slother
  • Registratie: november 2009
  • Laatst online: 16-07 17:09
JavaScript:
1
2
3
4
5
6
7
8
9
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]


  • Jaaap
  • Registratie: februari 2000
  • Niet online
Is die updateDiv() misschien synchroon ipv asynchroon?

Zoekt parttime Front-end development ZZP opdracht


  • Slother
  • Registratie: november 2009
  • Laatst online: 16-07 17:09
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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
  • Registratie: februari 2000
  • Laatst online: 15:16

crisp

Devver

Pixelated

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

Intentionally left blank


  • blaatkipje
  • Registratie: maart 2007
  • Laatst online: 17-09 22:05
Als je toch al jQuery gebruikt. Waarom niet gewoon de jQuery ajax request pakken en in de succes functie het logo weer terugzetten.

  • Slother
  • Registratie: november 2009
  • Laatst online: 16-07 17:09
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
  • Registratie: januari 2004
  • Laatst online: 15:20

MueR

Moderator Devschuur®

is niet lief

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

Anyone who gets in between me and my morning coffee should be insecure.
Breng nu uw applicatie naar de kloot. Dat is veel beter! Nu samen met klootopslag. Voor maar €9,95. Doei doei!


  • Slother
  • Registratie: november 2009
  • Laatst online: 16-07 17:09
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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
  • Registratie: maart 2009
  • Laatst online: 13-09 19:02
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:
1
2
3
4
5
6
7
$.ajax({
  url: "app_handler.php",
  data: { "A": "logon", "E": "logoff" },
  success: function(data, status, xhr){
    // ...
  }
});

  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52

Bosmonster

*zucht*

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
  • Registratie: november 2009
  • Laatst online: 16-07 17:09
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
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52

Bosmonster

*zucht*

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
  • Registratie: maart 2009
  • Laatst online: 13-09 19:02
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
  • Registratie: november 2009
  • Laatst online: 16-07 17:09
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:
1
2
3
4
5
6
7
$.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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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
  • Registratie: februari 2000
  • Laatst online: 15:16

crisp

Devver

Pixelated

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

lijkt me niet juist:
JavaScript:
1
2
3
4
5
6
7
$.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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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:
1
2
3
4
5
6
7
8
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]

Intentionally left blank


  • Slother
  • Registratie: november 2009
  • Laatst online: 16-07 17:09
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
  • Registratie: december 2009
  • Laatst online: 12:30
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
  • Registratie: februari 2000
  • Laatst online: 15:16

crisp

Devver

Pixelated

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).

Intentionally left blank


  • Slother
  • Registratie: november 2009
  • Laatst online: 16-07 17:09
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
  • Registratie: april 2005
  • Laatst online: 16:04
dit werkt gewoon zoals al eerder vermeld:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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]

Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee