944,131 Members | Top Members by Rank

Ad:
Aug 22nd, 2006
0

Ajax calls wont work in FireFox!

Expand Post »
Heyyyy... I'm trying to get some AJAX going on in my website. It works FINE in IE 6, but when I try it with Mozilla FireFox, nothing happens. Can anybody see anything wrong with the following javascript code?

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function makeRequest(url, divID) {
  2. var http_request = null;
  3. try {
  4. http_request = new ActiveXObject("Msxml2.XMLHTTP");
  5. }
  6. catch(e){
  7. http_request = new ActiveXObject("Microsoft.XMLHTTP");
  8. }
  9. if (http_request == null){
  10. http_request = new XMLHttpRequest();
  11. }
  12.  
  13. //if still cannot create HTTP REQUEST object:
  14. if (!http_request) {
  15. alert('Sorry. Cannot create an XMLHTTP instance. Please try again');
  16. return false;
  17. }
  18. http_request.onreadystatechange = function(){ handleResponse(http_request, divID); };
  19. http_request.open("GET", url, false);
  20. http_request.setRequestHeader( "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT" );
  21. http_request.send( null );
  22. }
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
AndrewSmith is offline Offline
11 posts
since Jul 2006
Aug 23rd, 2006
0

Re: Ajax calls wont work in FireFox!

K, I got it working. I'm not sure which part of my code was incorrect, but it works now.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2. function makeRequest(url, divID) {
  3. var http_request = null;
  4. var browser = navigator.appName;
  5.  
  6. if(browser == "Microsoft Internet Explorer")
  7. {
  8. /* Create the object using MSIE's method */
  9. http_request = new ActiveXObject("Microsoft.XMLHTTP");
  10. }
  11. else
  12. {
  13. /* Create the object using other browser's method */
  14. http_request = new XMLHttpRequest();
  15. }
  16. //if still cannot create HTTP REQUEST object:
  17. if (!http_request) {
  18. alert('Sorry. Cannot create an XMLHTTP instance. Please try again');
  19. return false;
  20. }
  21. http_request.onreadystatechange = function(){ handleResponse(http_request, divID); };
  22. http_request.open("GET", url, true);
  23. http_request.send( null );
  24. }

I think that this line was the clincher:
http_request.open("GET", url, true);

It seems if you set the last option to false, (which forces scripts to wait until the response is received from the server), Mozilla simply says "no way, not doin it".

Hope this post will help SOMEBODY.

ROck On
Reputation Points: 10
Solved Threads: 0
Newbie Poster
AndrewSmith is offline Offline
11 posts
since Jul 2006
Sep 14th, 2007
0

Re: Ajax calls wont work in FireFox!

This might be the answer I was looking for.

I am using false for async and Firefox wouldn't work until I installed Firebug plugin, then Firefox would work with async=false requests.

Couldn't figure out why, glad you narrowed it down
Reputation Points: 37
Solved Threads: 3
Junior Poster in Training
HazardTW is offline Offline
71 posts
since Sep 2007
Sep 14th, 2007
0

Re: Ajax calls wont work in FireFox!

Wanted to add that I did some reading around different places about this subject, it seems to be a consensus that using synchronous requests is just a bad idea, the reason being you are not supposed to lock-up the users interface.

For my purposes I needed JS execution to wait for the response or my variables would be empty and the following code throwing exceptions or failing silently.

What I tested, and will do throughout my scripts, is call the function that is going to use that information from the response handling portion of the ajax request.

A working example:
( text.ajax.php returns an XML doc with a status tag and an email tag, the latter containing a string in the format: "name,email^name,email^name,email" )

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Untitled Document</title>
  6. <script type="text/javascript">
  7. <!--
  8. function HttpClient() { } // HTTPCLIENT CLASS
  9. HttpClient.prototype = {
  10. // type GET,POST passed to open
  11. requestType:'GET',
  12. // when set to true, async calls are made
  13. isAsync:true,
  14. // where an XMLHttpRequest instance is stored
  15. xmlhttp:false,
  16. // what is called when a successful async call is made
  17. callback:false,
  18. // what is called when send is called on XMLHttpRequest
  19. // set your own function to onSend to have a custom loading
  20. // effect
  21. onSend:function()
  22. {
  23. //document.getElementById('HttpClientStatus').style.display = 'block';
  24. },
  25.  
  26. // what is called when readyState 4 is reached, this is
  27. // called before your callback
  28. onload:function()
  29. {
  30. //document.getElementById('HttpClientStatus').style.display = 'none';
  31. },
  32.  
  33. // what is called when an http error happens
  34. onError:function(error)
  35. {
  36. alert(error);
  37. },
  38.  
  39. // method to initialize an xmlhttpclient
  40. init:function()
  41. {
  42. try
  43. {
  44. // Mozilla / Safari
  45. this.xmlhttp = new XMLHttpRequest();
  46. }
  47. catch (e)
  48. {
  49. // IE
  50. var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.5.0',
  51. 'MSXML2.XMLHTTP.4.0',
  52. 'MSXML2.XMLHTTP.3.0',
  53. 'MSXML2.XMLHTTP',
  54. 'Microsoft.XMLHTTP');
  55. var success = false;
  56. for (var i=0;i < XMLHTTP_IDS.length && !success; i++)
  57. {
  58. try
  59. {
  60. this.xmlhttp = new ActiveXObject
  61. (XMLHTTP_IDS[i]);
  62. success = true;
  63. }
  64. catch (e)
  65. {}
  66. }
  67. if (!success)
  68. {
  69. this.onError('Unable to create XMLHttpRequest.');
  70. }
  71. }
  72. },
  73. // method to make a page request
  74. // @param string url The page to make the request to
  75. // @param string payload What you're sending if this is a POST
  76. // request
  77. makeRequest: function(url,payload)
  78. {
  79. if (!this.xmlhttp)
  80. {
  81. this.init();
  82. }
  83. this.xmlhttp.open(this.requestType,url,this.isAsync);
  84.  
  85. // set onreadystatechange here since it will be reset after a
  86. //completed call in Mozilla
  87. var self = this;
  88. this.xmlhttp.onreadystatechange = function()
  89. {
  90. self._readyStateChangeCallback();
  91. }
  92. if (this.requestType == "POST")
  93. {
  94. this.xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  95. this.xmlhttp.setRequestHeader("Content-length", payload.length);
  96. this.xmlhttp.setRequestHeader("Connection", "close");
  97. }
  98.  
  99. this.xmlhttp.send(payload);
  100.  
  101. if (!this.isAsync)
  102. {
  103. return this.xmlhttp.responseXML;
  104. }
  105. },
  106.  
  107. // internal method used to handle ready state changes
  108. _readyStateChangeCallback:function()
  109. {
  110. switch(this.xmlhttp.readyState)
  111. {
  112. case 2:
  113. this.onSend();
  114. break;
  115. case 4:
  116. this.onload();
  117. if (this.xmlhttp.status == 200)
  118. {
  119. this.callback(this.xmlhttp.responseXML);
  120. }
  121. else
  122. {
  123. this.onError('HTTP Error Making Request: ' + '[' + this.xmlhttp.status + ']' + ' ' + this.xmlhttp.statusText);
  124. }
  125. break;
  126. }
  127. }
  128. }
  129.  
  130. var client = new HttpClient();// create an instance of the object
  131. client.isAsync = true;//
  132. var company_email = null;// declare the global
  133. var http_status = null;
  134.  
  135. function get_email_list()
  136. {
  137. client.requestType = "GET";
  138. // function to handle completed calls
  139. client.callback = function(XMLresult)
  140. {
  141. if (XMLresult.getElementsByTagName("status"))// did XML page create a 'status' element?
  142. {
  143. http_status = XMLresult.getElementsByTagName("status")[0].childNodes[0].nodeValue;
  144. }else{// if no 'status' element was returned, set global http_status to FAILED NO STATUS
  145. http_status = "FAILED NO STATUS";
  146. alert(http_status);
  147. return;
  148. }
  149. if (http_status == "SUCCESS") {// if we got a SUCCESS in 'status' element, put row data in global variable
  150. // use of split("^") gives us an array of "name,email" pairs.
  151. company_email = XMLresult.getElementsByTagName("email")[0].childNodes[0].nodeValue.split("^");
  152. // call the function only after a successfull request is made
  153. build_contact_list();
  154. }
  155. else
  156. {
  157. alert(http_status);
  158. }
  159. }
  160. client.makeRequest('test.ajax.php?sid='+Math.random(),null);
  161. return;
  162. }
  163.  
  164. function build_contact_list()// called from the request handler only on good responses
  165. {
  166. var cm = document.getElementById("contact_menu"); // get the select element
  167.  
  168. // remove all options from this select element
  169. while ( cm.options.length )
  170. {
  171. cm.remove(cm.options[0]);
  172. }
  173.  
  174. for ( var i = 0; i < company_email.length; i++ )
  175. {
  176. var newOpt=document.createElement('option');
  177. // now seperate the name from the email address
  178. var tmp = company_email[i].split(",");
  179. newOpt.text=tmp[0];// set the persons name as the text of the option element
  180. try
  181. {
  182. cm.add(newOpt,null); // standards compliant
  183. }
  184. catch(ex)
  185. {
  186. cm.add(newOpt); // IE only
  187. }
  188. cm.options[i].value = tmp[1];// set the email address as the value of the option element
  189. cm.selectedIndex = 0;
  190. }
  191. return;
  192. }
  193.  
  194. function request_email()
  195. {
  196. http_status = null;
  197. get_email_list(); // make the call and run away
  198. return;
  199.  
  200. }
  201. -->
  202. </script>
  203. </head>
  204.  
  205. <body>
  206. <div>
  207. <select id="contact_menu">
  208. <option></option>
  209. </select>
  210. <br>
  211. <button type="button" onClick="request_email()">Build The Menu</button>
  212. </div>
  213. </body>
  214. </html>

For my current project I really need to stop execution of any script until any ajax request are complete, but I will do that another way so I can avoid the problem with Firefox not liking synchronous requests.
Reputation Points: 37
Solved Threads: 3
Junior Poster in Training
HazardTW is offline Offline
71 posts
since Sep 2007
Feb 24th, 2010
0
Re: Ajax calls wont work in FireFox!
The URL domain matters. Firefox does not allow doing a GET (or any other verb) from a different domain than the domain of the page itself. Cross Domain Scripting security. IE will allow it under some circumstances - liek if you are running an HTML page locally.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
kramzkramz is offline Offline
1 posts
since Feb 2010
Sep 15th, 2010
0
Re: Ajax calls wont work in FireFox!
hi kramzkramz,

Is there any solution for this problem? any work around?
Reputation Points: 10
Solved Threads: 0
Newbie Poster
intsam is offline Offline
2 posts
since Sep 2010

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Sending data inside .js file
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Selecting Text for User





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC