/    Sign up×
Community /Pin to ProfileBookmark

setTimeout won’t run after Ajax statement in IE7

Here is what I want to do:

  • 1. have the javascript check to see if a flag is changed in a DB and change a div if it is set to true.

  • 2. check this flag every second.
  • No big deal. I can get it to work great in firefox and opera but not IE7. In IE, it runs the function once and looks like it quits before it runs setTimeout. Here are my three scripts for the Ajax:

    main page:
    <?php

    require_once(“vars/conn.php”);

    // get userID with mysql_insert_id() when the user submits name.
    // pass the userID to this script to use in AJAX
    $userID = 1;
    ?>

    <html>
    <head>
    <script language=”javascript” type=”text/javascript” src=”js/AJAXfunction.js”></script>
    <script language=”javascript” type=”text/javascript”>

    function checkEmailFlag(){
    showCount(document.forms[0].userID.value);
    setTimeout(“checkEmailFlag()”,1000);
    }

    </script>
    </head>

    <body>
    <form>
    <input type=”hidden” name=”userID” value=”<?php echo $userID ?>”>
    <div id=”txtHint”><input type=”text” id=”txt” value=””></div>
    </form>
    <input type=”button” name=”testButton” value=”Click Me” onclick=”javascript:alert(‘hello’)”>
    <script>checkEmailFlag()</script>
    </body>

    </html>

    Ajax page:
    var xmlHttp

    function showCount(str){
    //alert(str);
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null){
    alert (“Your browser does not support AJAX!”);
    return;
    }
    var url=”getcount.php”;
    url=url+”?q=”+str;
    xmlHttp.onreadystatechange=flagChanged;
    xmlHttp.open(“GET”,url,true);
    xmlHttp.send(null);
    }

    function flagChanged(){
    if (xmlHttp.readyState==4){
    document.getElementById(“txtHint”).innerHTML=xmlHttp.responseText;
    }
    }

    function GetXmlHttpObject(){
    var xmlHttp=null;
    try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
    // Internet Explorer
    try
    {
    xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
    }
    catch (e)
    {
    xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
    }
    }
    return xmlHttp;
    }

    getcount.php:
    <?php

    require_once(“vars/conn.php”);

    //get the current userID
    $count = $_GET[‘q’];

    //get flag from DB
    $s = “SELECT * FROM user WHERE userID = $count”;
    $q = mysql_query($s);
    $r = mysql_fetch_assoc($q);

    // create vars
    foreach($r as $key=>$val){
    $$key = $val;
    }

    if($flag){
    echo “<input type=”text” id=”txt” value=”Welcome, $name” readonly>”;
    }else{
    echo “<input type=”text” id=”txt” value=”Waiting…” readonly>”;
    }

    ?>

    This is textbook Ajax and works exactly like I want in firefox and opera. I need to know what I need to change to get it to work in IE7 too. Thanks

    to post a comment
    JavaScript

    8 Comments(s)

    Copy linkTweet thisAlerts:
    @lcraneauthorMay 12.2008 — I've added the following script in the php portion of the script to prevent page caching:

    // Prevent page caching

    // Date in the past

    header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

    header("Cache-Control: no-cache");

    header("Pragma: no-cache");

    But that didn't solve the issue.
    Copy linkTweet thisAlerts:
    @lcraneauthorMay 12.2008 — Figured it out. I needed to fake out IE to think it had a new url. I added the following line to my ajax script:

    url=url+"&sid="+Math.random();

    which added a random number at the end of my url. IE now thinks that it's loading a new url and isn't a cached page.

    Now everything works like a charm.
    Copy linkTweet thisAlerts:
    @tholmanAug 12.2008 — Been having precisely the same issue as you

    How / where did you place:

    url=url+"&sid="+Math.random();

    in your code?
    Copy linkTweet thisAlerts:
    @lcraneauthorAug 12.2008 — function showCount(str){

    //alert(str);

    xmlHttp=GetXmlHttpObject();

    if (xmlHttp==null){

    alert ("Your browser does not support AJAX!");

    return;

    }

    var url="getcount.php";

    url=url+"?q="+str;

    [B]url=url+"&sid="+Math.random();[/B]

    xmlHttp.onreadystatechange=flagChanged;

    xmlHttp.open("GET",url,true);

    xmlHttp.send(null);

    }

    Hope this helps
    Copy linkTweet thisAlerts:
    @tholmanAug 12.2008 — any advice on where it would go here?

    [CODE]<script type="text/javascript">
    var reload;
    function Ajax() {
    var xmlHttp;
    try {

    xmlHttp = new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
    }
    catch (e) {
    try {
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
    }
    catch (e) {
    try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e) {
    alert("No AJAX!?");
    return false;
    }
    }
    }
    xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState === 4) {
    document.getElementById('ReloadThis').innerHTML = xmlHttp.responseText;
    reload = setTimeout(Ajax, 4000);
    }
    };
    xmlHttp.open("GET", "./code.php", true);
    xmlHttp.send(null);
    }
    window.onload = function () {
    reload = setTimeout(Ajax, 4000);
    };
    </script>[/CODE]
    Copy linkTweet thisAlerts:
    @Kostas_ZotosAug 13.2008 — Hi,

    An alternative is also to add a timestamp instead of a random number:

    Example (in your case):
    [CODE] xmlHttp.open("GET", "./code.php" [COLOR=#334455]+ "?NoCashe=" + new Date().getTime()[/COLOR], true);
    xmlHttp.send(null);[/CODE]


    This adds a query in your URL like this: [COLOR="Green"]code.php[/COLOR][COLOR="Green"][B]?NoCashe=1457688588488[/B][/COLOR]

    The getTime() provides always a different value (Which is the milliseconds have past at any time since the Unix epoch)

    Cheers!

    Kostas
    Copy linkTweet thisAlerts:
    @lcraneauthorAug 13.2008 — This might help. I took this from w3schools site and modified it to fit my needs. pass a function with the id that you want to query, the url for the script to run the query, and the element Id for the div where the result will be placed. I'm using post as it meets the business requirements for the job I was doing. This script also make the function reusable if you have several different AJAX calls in your page. Let me know if it's any help.


    var xmlHttp

    var ElemId

    function AJAXfunction(id,url,eId) {

    ElemId = eId;

    xmlHttp=GetXmlHttpObject()

    if (xmlHttp==null) {

    alert ("Browser does not support HTTP Request")

    return

    }

    var param = "id="+id

    param = param+"&sid="+Math.random()

    xmlHttp.open("POST",url,true)

    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    http.setRequestHeader("Content-length", param.length);

    http.setRequestHeader("Connection", "close");

    xmlHttp.onreadystatechange=changeState

    xmlHttp.send(param)

    }

    function changeState(ElemId) {

    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {

    document.getElementById(ElemId).innerHTML=xmlHttp.responseText

    }

    }

    function GetXmlHttpObject() {

    var xmlHttp=null;

    try {

    // Firefox, Opera 8.0+, Safari

    xmlHttp=new XMLHttpRequest();

    } catch (e) {

    //Internet Explorer

    try {

    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e) {

    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

    }

    return xmlHttp;

    }
    Copy linkTweet thisAlerts:
    @tholmanAug 13.2008 — Hi,

    An alternative is also to add a timestamp instead of a random number:

    Example (in your case):
    [CODE] xmlHttp.open("GET", "./code.php" [COLOR=#334455]+ "?NoCashe=" + new Date().getTime()[/COLOR], true);
    xmlHttp.send(null);[/CODE]


    This adds a query in your URL like this: [COLOR="Green"]code.php[/COLOR][COLOR="Green"][B]?NoCashe=1457688588488[/B][/COLOR]

    The getTime() provides always a different value (Which is the milliseconds have past at any time since the Unix epoch)

    Cheers!

    Kostas[/QUOTE]



    Touch wood.... so far.... so good....

    Genius.... thanks a lot. Sincerest thanks as I had spent hours (10+) looking, searching / trying / uploading without luck

    I know there are a lot of people out there wanting to do the same. If you have a webpage, put it on there an publicise it.

    Again, thanks
    ×

    Success!

    Help @lcrane spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 6.2,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,
    )...