SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax Works in IE 7, not in FF, Opera or Safari

    Well guys, here's an ajax funtion that works perfectly in IE 7, but not working in FF, Opera or Safari.

    Code JavaScript:
    function ajaxFunction(){
     
    	var ajaxRequest;  // The variable that makes Ajax possible!
     
    	try{
    		// Opera 8.0+, Firefox, Safari
    		ajaxRequest = new XMLHttpRequest();
    	} catch (e){
    		// Internet Explorer Browsers
    		try{
    			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    		} catch (e) {
    			try{
    				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    			} catch (e){
    				// Something went wrong
    				alert("Your are using an old browser or you have disabled javascript. In either condition, this code won't work!");
    				return false;
    			}
    		}
    	}
    	// Create a function that will receive data sent from the server
    	ajaxRequest.onreadystatechange = function(){
    		if(ajaxRequest.readyState == 4){
    			var ajaxDisplay = document.getElementById('ajaxDiv');
    			ajaxDisplay.innerHTML = ajaxRequest.responseText;
    		}
    	}
    	box = document.getElementById('nlone');
    	var age = box.value;
    	<? if ($thisq!='') { ?>
    	if (age == '') {
    	age = <?=$thisq?>;
    	} 
    	<? } ?>
    	var queryString = "?q=" + age + "&lv_id=<?=$lv_id?>&sid="+Math.random();
    	ajaxRequest.open("GET", "getlivra2.php" + queryString, true);
    	ajaxRequest.send(null); 
    }

    I'm calling this in two places in the same page, once with a select drop down (onchange) and another one with an img tag (onload). The page getlivra2.php loads a second drop down based on the variables available (either onchange or onload).

    Code XHTMLStrict:
    <img src="img/spacer.gif" width="1" height="1" onload="ajaxFunction();" />
    <select name="nlone" id="nlone" onchange="ajaxFunction();">
    <option value="1">One</option> 
    <option value="2">Two</option> 
    </select><div id='ajaxDiv'></div>

    Can anyone show me what I am doing wrong here please? Thanks guys.

    Edit:

    I've checked the error console, there's nothing there. The problem is, the second drop down does not load in FF (or in Opera or Safari). In IE 7, the second drop down loads exactly as it should.

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Location
    Sydney, Australia
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Try this code out its a wrapper i made a while back that makes this whole process alot easier.

    Firstly download the FreeAJAX wrapper (its only a couple of kilobytes)
    http://www.freerichtexteditor.com/fi...reeajax_v1.zip

    Then try somethng like what is below:
    <script src=\"freeajax.js\" language=\"javascript\"></script>
    <script>
    function ajaxFunction()
    {
    box = document.getElementById('nlone');
    var age = box.value;
    <? if ($thisq!='') { ?>
    if (age == '') {
    age = <?=$thisq?>;
    }
    <? } ?>
    var queryString = "?q=" + age + "&lv_id=<?=$lv_id?>&sid="+Math.random();
    ajaxSend("GET", "getlivra2.php" + queryString, "ajaxDiv", "innerHTML");
    }
    </script>
    Of course not tested or anything, but it should work, or be very close to working, and work in all major web browsers without any issues.

    Kind Regards
    Steve
    http://www.rtepad.com

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use this to initialize my xmlhttprequest object

    Code JavaScript:
    function getHTTPObject() {
      var xmlhttp;
      /*@cc_on
      @if (@_jscript_version >= 5)
        try {
          xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
          try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (E) {
            xmlhttp = false;
          }
        }
      @else
      xmlhttp = false;
      @end @*/
      if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        try {
          xmlhttp = new XMLHttpRequest();
        } catch (e) {
          xmlhttp = false;
        }
      }
      return xmlhttp;
    }

    so insert that function and change your code to something like:

    Code JavaScript:
    function ajaxFunction(){
     
        var ajaxRequest = getHTTPObject() ;  // The variable that makes Ajax possible!
     
     
        // Create a function that will receive data sent from the server
        ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){
                var ajaxDisplay = document.getElementById('ajaxDiv');
                ajaxDisplay.innerHTML = ajaxRequest.responseText;
            }
        }
        box = document.getElementById('nlone');
        var age = box.value;
        <? if ($thisq!='') { ?>
        if (age == '') {
        age = <?=$thisq?>;
        } 
        <? } ?>
        var queryString = "?q=" + age + "&lv_id=<?=$lv_id?>&sid="+Math.random();
        ajaxRequest.open("GET", "getlivra2.php" + queryString, true);
        ajaxRequest.send(null); 
    }

  4. #4
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Steve, Gimbles, thanks a lot for your input friends.

  5. #5
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, now that I was testing the codes, I mean, I tried both of these two, and the problem remains the same.

    Even for this simple thing I'm getting the same result ... -
    Code JavaScript:
    function changeCaptcha(){
    	ajaxSend("GET", "../include/captcha-image.php", "getCaptcha", "innerHTML");
    }

    And Steve's function is (good work, that makes things easy, of course ... well, if it works, I mean)

    Code JavaScript:
    function ajaxSend(ajaxMethod, ajaxUrl, ajaxDiv, ajaxOutput)
    { function ajaxObject()
    { if (document.all && !window.opera)
    { obj = new ActiveXObject("Microsoft.XMLHTTP");}
    else
    { obj = new XMLHttpRequest();}
    return obj;}
    var ajaxHttp = ajaxObject(); ajaxHttp.open(ajaxMethod, ajaxUrl); ajaxHttp.onreadystatechange = function()
    { if(ajaxHttp.readyState == 4)
    { var ajaxResponse = ajaxHttp.responseText; if (ajaxOutput == "innerHTML")
    { document.getElementById(ajaxDiv).innerHTML = ajaxResponse;}
    else if (ajaxOutput == "value")
    { document.getElementById(ajaxDiv).value = ajaxResponse;}
    }
    }
    ajaxHttp.send(null);}

    Works in IE7 and not in FF or Opera. Bizzare !!! Hmmm ...

    Edit:

    Update

    Ok guys, this is solved for me now. And just incase some other mortal is wasting hours pulling out his hairs wondering what's going wrong in a similar situation, it can be this stupid catching issue. Since what I was uploading using Ajax was an captcha image, while IE 6 and 7 was working properly, other browsers were catching the image and was basically uploading the same image each time I was clicking the link (I think). On adding ?sid=<?=time()?> after the link, the issue is fixed. Ufff !!!
    Code PHP:
    print '<img src="include/captcha.php?sid='.time().'" alt="captcha" />';
    Last edited by kigoobe; Oct 8, 2007 at 15:20.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •