JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Frustrating Firefox Problem while making AJAX request on an anchor

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply
1 2

•
•
Join Date: Sep 2008
Posts: 5
Reputation: ximath is an unknown quantity at this point 
Solved Threads: 0
ximath ximath is offline Offline
Newbie Poster

Frustrating Firefox Problem while making AJAX request on an anchor

 
0
  #1
Sep 2nd, 2008
Hi All,


I have been desperately trying to solve a serious ajax issue and decided to try asking it here.

I have simplified the problem and will illustrate it with an example.

First of all, please consider;

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <span  onClick='makeClickRequest();'><a href='http://www.google.com'>Text Here</a></span>


where the javascript is about

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2. function makeClickRequest()
  3. {
  4.  
  5.  
  6. 	var req = new AsyncRequest();
  7. 	req.setUrl("requestPage.php?task=click");
  8. 	req.setVariables("foo=hede");
  9. 	req.setMethod("POST");
  10. 	req.setSuccessCallback( function(o) { alert(o.responseText); } ); 
  11. 	req.makeRequest();
  12.  
  13. }

PS : You don't need to worry about AsyncRequest type, this simply directs AJAX requests by encapsulating an instance of XMLHTTPRequest type. I have used AsyncRequest class widely (and safely) in many applications and I am pretty sure that it works fine, so I don't think that it is necessary to put AsyncRequest's code here.


Now, if you open the page and click there, (assuming requestPage.php exists at the server)
in firefox you'll get the exception :

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"

Although nothing seems wrong with the code above, it wasn't working. I have tried to modify makeClickRequest as;

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. function makeClickRequest()
  2. {
  3.  
  4. 	var callback = function()
  5. 	{
  6. 		var req = new AsyncRequest();
  7. 		req.setUrl("requestPage.php?task=click");
  8. 		req.setVariables("foo=hede");
  9. 		req.setMethod("POST");
  10. 		req.setSuccessCallback( function(o) { alert(o.responseText); } ); 
  11. 		req.makeRequest();
  12.  
  13. 	}
  14. 	window.setTimeout(callback, 0);	
  15.  
  16. }

And it worked ! (strange, eh? )

However, I also need to make a request when the user hovers the anchor. So, consider that I modify the HTML (of anchor) at top of the page as;

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <span  onClick='makeClickRequest();' onMouseOver='makeHoverRequest();'><a href='http://www.google.com'>Text Here</a></span>

Where makeHoverRequest is

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. function makeHoverRequest()
  2. {
  3. 		var req = new AsyncRequest();
  4. 		req.setSuccessCallback( function(o) {  } );
  5. 		req.setUrl("requestPage.php?task=hover");
  6. 		req.setVariables("foo=hede");
  7. 		req.setMethod("POST");
  8. 		req.makeRequest();
  9.  
  10. }

Again, nothing seems wrong with that. However, if user clicks the link before request in mouseOver phase is completed, firefox throws an exception;

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"

The only solution I was able to come up with was changing HTML as;

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <span  onClick='makeClickRequest(); var instance = this; var callback = function() { location.replace(instance.firstChild); } window.setTimeout(callback, 3000); return false;' onMouseOver='makeHoverRequest();'><a href='http://www.google.com'>Text Here</a></span>

Which is ugly, and waits 3 seconds to open link.. I guess I'm stuck.

Thanks in advance.
Last edited by ximath; Sep 2nd, 2008 at 5:14 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Frustrating Firefox Problem while making AJAX request on an anchor

 
0
  #2
Sep 3rd, 2008
Hello,

I hope I understand what your situation is here ... but why not simply disable the link and submit the page href with a script when the ajax is done doing its thing?

This isn't a perfect example and still needs some tuning, but it might help with some different ideas how to do it :-/

test_script.php
php Syntax (Toggle Plain Text) 
  1. <?php
  2. if ( $_REQUEST ) {
  3.   sleep(2);
  4.   print 'test response';
  5.   exit;
  6. }
  7. ?>

ajax_send.html
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript" src="agent.js"></script>
  7. <script type="text/javascript">
  8.  
  9. function makeSomeRequest ( target, click ) {
  10.   var req = new Agent(); // my Ajax class
  11.   var url = target.href;
  12.   var args = 'foo=hede&task=any';
  13.   req.set_action('test_script.php');
  14.   req.set_method('POST');
  15.   req.set_format('text');
  16.   req.set_async(true);
  17.   req.success = function ( response ) {
  18.     alert( response );
  19.     if ( click ) { // also needs redundancy check for hover-click ...
  20.       window.location = url;
  21.     }
  22.   };
  23.   req.request(args);
  24.   return false;
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <span><a href='http://www.google.com' onmouseover="makeSomeRequest(this,false)" onclick="return makeSomeRequest(this,true)">Hover or Click Here</a></span><br /><br />
  30. <span><a href='http://www.google.com' onclick="return makeSomeRequest(this,true)">Click Here</a></span>
  31. </body>
  32. </html>

Hope it helps
Last edited by langsor; Sep 3rd, 2008 at 3:24 am.
Google is the answer to all of your questions -- the trick is knowing what question to ask in your specific predicament.
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2008
Posts: 5
Reputation: ximath is an unknown quantity at this point 
Solved Threads: 0
ximath ximath is offline Offline
Newbie Poster

Re: Frustrating Firefox Problem while making AJAX request on an anchor

 
0
  #3
Sep 3rd, 2008
Hi and thank you,

But the problem is I am writing a module to a community, thus, some part of the code (anchors) already exist. But span tags and javascript there belongs to me. Thus, I don't want to interfere with the anchors in case they might be changed in future. This is also the reason why I have encapsulated them in <span> tags instead of adding onClick and onMouseOver events directly to the <a> tags. If I return something in onMouseOver event, then I interfere with the code that doesn't belong to me and if it changes, I may have serious problems in future.

One another solution I have come up with was tracking the AJAX requests and cancel the incomplete ones when user clicks the link. However, this may not only risk efficiency but also it would be totally inconsistent with the semantics of AJAX which is about making requests in such a way that no one actually knows when a request is completed and no request should be aware of another one -- so requests are async..

However, due to that bug in firefox (I call it bug because nothing seems wrong with my code at all !), I guess I'll follow this solution, which is ugly.

I would really appreciate if someone comes up with a sensible solution so I neither have to modify the code that doesn't belong to me nor interfere with semantics of AJAX.
Last edited by ximath; Sep 3rd, 2008 at 10:22 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,600
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 462
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: Frustrating Firefox Problem while making AJAX request on an anchor

 
0
  #4
Sep 3rd, 2008
The error makes proper sense; think about it, the page which made an Ajax request in the first place is no longer there and hence a NS_ERROR_NOT_AVAILABLE. You have two options here:

• Redirect the user to the Google home page once the Ajax request is complete and you have the status with you; analyze the status and redirect accordingly based on whether the async request was success or a failure.
• On the link click, navigate the user to another page on your domain, e.g. handleThis.php which performs the same job as that performed by the async request and navigates the user to Google home page. Pretty simple, no Ajax needed.
Last edited by ~s.o.s~; Sep 3rd, 2008 at 10:57 am.
I don't accept change; I don't deserve to live.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Frustrating Firefox Problem while making AJAX request on an anchor

 
0
  #5
Sep 3rd, 2008
Hey,

This new idea of mine might not seem more elegant than your setTimout idea, but it is another approach to consider, and doesn't mess with your existing tags -- just the <span>s you put in.

test_script.php
php Syntax (Toggle Plain Text) 
  1. <?php
  2. if ( $_REQUEST ) {
  3.   sleep(2);
  4.   print $_REQUEST['task'].'::'.$_REQUEST['foo'];
  5.   exit;
  6. }
  7. ?>


JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript" src="agent.js"></script>
  7. <script type="text/javascript">
  8.  
  9. window.onload = register_triggers;
  10.  
  11. function register_triggers () {
  12.   // onmouseover triggers
  13.   document.getElementsByTagName('html').item(0).onmouseover = function ( event ) {
  14.     var action = ( typeof event == 'undefined' ) ? window.event : event;
  15.     var target = ( typeof action.target == 'undefined' ) ? action.srcElement : action.target;
  16.     if ( target.nodeName == '#text' ) { // Safari nodeType 3 work-around
  17.       target = target.parentNode;
  18.     }
  19.     // custom handlers here ...
  20.     if ( /hover-ajax/.test( target.parentNode.className ) ) {
  21.       makeAjaxRequest(target,'hover');
  22.     }
  23.   };
  24.   // onclick triggers
  25.   document.getElementsByTagName('html').item(0).onclick = function ( event ) {
  26.     var action = ( typeof event == 'undefined' ) ? window.event : event;
  27.     var target = ( typeof action.target == 'undefined' ) ? action.srcElement : action.target;
  28.     if ( target.nodeName == '#text' ) { // Safari nodeType 3 work-around
  29.       target = target.parentNode;
  30.     }
  31.     // custom handlers here ...
  32.     if ( /click-ajax/.test( target.parentNode.className ) ) {
  33.       makeAjaxRequest(target,'click');
  34.       return false;
  35.       //cancelDefaultAction(action); // the formalized approach
  36.     }
  37.     // SOME TESTING OUTPUT
  38.     // alert( ( /^\s+$/.test( target.firstChild.nodeValue ) || target.firstChild.nodeValue == null ) ? '<' + target.nodeName.toLowerCase() + '> tag' : 'data: ' + target.firstChild.nodeValue );
  39.   };
  40. }
  41.  
  42. function makeAjaxRequest ( target, type ) {
  43.   var url = target.href;
  44.   var args = 'foo=hede';
  45.   switch ( type ) {
  46.     case 'click': args += '&task=click'; break;
  47.     case 'hover': args += '&task=hover'; break;
  48.   }
  49.   var req = new Agent(); // my Ajax class
  50.   req.set_action('test_script.php');
  51.   req.set_method('POST');
  52.   req.set_format('text');
  53.   req.set_async(true);
  54.   req.success = function ( response ) {
  55.     alert( response );
  56.     if ( type == 'click' ) { // needs redundancy check for hover then click ...
  57.       window.location = url;
  58.     }
  59.   };
  60.   req.request(args);
  61. }
  62.  
  63. function cancelDefaultAction ( event ) {
  64.   var action = ( typeof event == 'undefined' ) ? window.event : event;
  65.   action.returnValue = false;
  66.   if ( typeof action.preventDefault != "undefined" ) {
  67.     action.preventDefault();
  68.   }
  69.   return true;
  70. }
  71.  
  72. </script>
  73. </head>
  74. <body>
  75. <span class="hover-ajax"><a href='http://www.google.com'>Hover Here</a></span>
  76. <br /><br />
  77. <span class="click-ajax"><a href='http://www.google.com'>Click Here</a></span>
  78. </body>
  79. </html>
Last edited by langsor; Sep 3rd, 2008 at 11:52 am.
Google is the answer to all of your questions -- the trick is knowing what question to ask in your specific predicament.
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2008
Posts: 5
Reputation: ximath is an unknown quantity at this point 
Solved Threads: 0
ximath ximath is offline Offline
Newbie Poster

Re: Frustrating Firefox Problem while making AJAX request on an anchor

 
0
  #6
Sep 3rd, 2008
Hi again,

•
•
•
•
Originally Posted by ~s.o.s~ View Post
The error makes proper sense; think about it, the page which made an Ajax request in the first place is no longer there and hence a NS_ERROR_NOT_AVAILABLE. You have two options here:

• Redirect the user to the Google home page once the Ajax request is complete and you have the status with you; analyze the status and redirect accordingly based on whether the async request was success or a failure.
• On the link click, navigate the user to another page on your domain, e.g. handleThis.php which performs the same job as that performed by the async request and navigates the user to Google home page. Pretty simple, no Ajax needed.

Thank you for the description of error, I guess I'm beginning to understand, but I still have a doubt that it is sensible.

What I'm doing is, triggering two requests before page is redirected, which means their destination is not undefined. When request is triggered, the page actually exists. What's more; if I wait for the request in hover phase to be completed and then I click, it certainly works without any error. This is the part that doesn't make sense in fact. Since page is redirected, according to your understanding of error, it must have thrown the same exception there. But it didn't, it works fine if I wait for hover request to complete and then click the link. Moreover, the code I've posted here works perfectly in IE as it is. I'm a bit confused now.

About your suggestions; the reason why I wouldn't do either of these solutions was I didn't want to interfere the current principles of the system. Which means I wouldn't change the way how page is redirected, since the developers of the community may change this part so I would certainly need to modify that, too. However, if it turns out that I have no other choice, certainly I would do something like that.. At least I can postpone the redirection until requests are complete.

@langsor: Thanks, I have glanced your code a little bit, it seems a little complicated. Thus, I want to confirm that I have got it correct, what you've done there is instead of adding onclick and onmouseover eventhandlers in HTML, you specify them in javascript so that they are binded in runtime. And after request is complete, you make the redirection, I suppose. By this way, you'll ensure that redirection happens after request. Correct me if I am wrong ?

Thanks to all.
Last edited by ximath; Sep 3rd, 2008 at 2:29 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Frustrating Firefox Problem while making AJAX request on an anchor

 
0
  #7
Sep 3rd, 2008
•
•
•
•
Originally Posted by ximath View Post
@langsor: Thanks, I have glanced your code a little bit, it seems a little complicated. Thus, I want to confirm that I have got it correct, what you've done there is instead of adding onclick and onmouseover eventhandlers in HTML, you specify them in javascript so that they are binded in runtime. And after request is complete, you make the redirection, I suppose. By this way, you'll ensure that redirection happens after request. Correct me if I am wrong ?
You are correct, and this way you don't interfere with the existing code at all. You just need some hook for the javascript to grab onto, like a class-name, id, name or href attribute (almost anything really).

I know this is a bit confusing code, but it is also incredibly flexible for almost any javascript event capturing ... let me break it down a little.

window.onload = register_triggers;
could also be an inline function, or using event handlers (ask if you want to know more about these), here's an inline example
window.onload = function () {
// script that executes after the window loads
};
and it's important to wait until the entire window-document has loaded since we are working with html elements, and if they haven't loaded yet we will get errors.

This make the entire html document a mouseover hotspot
document.getElementsByTagName('html').item(0).onmouseover = function ( event ) {
// onmouesover code for all elements inside <html> tags
};

In mozilla-DOM browsers you receive the event-object passed to the handler function
function ( event )
but IE makes the event a global or window-level object
window.event
so we end up with this branching code -- I renamed event into action
var action = ( typeof event == 'undefined' ) ? window.event : event;

In mozilla-DOM browser the element where the event originated is a property of the event called target, in IE it's called srcElement
so again we have branching code
var target = ( typeof action.target == 'undefined' ) ? action.srcElement : action.target;

Safari will register a text-node (the textual content of an element) to trigger an event, we don't really want this since a text-node can't contain any ID or other useful attributes, so we handle this by calling it's parent-element
if ( target.nodeName == '#text' ) { // Safari nodeType 3 work-around
target = target.parentNode;
}

At this point we know that an event has occurred, we know what element on the page caused the event, and we just need to know if that element is one of the ones we care about

Using a regular-expression test, we take a quick look at the (in this case) className of the target or originating element. If it matches up we execute our desired code
Since we don't want to change the attributes of the anchor links, instead we wrap them in a <span> and give that span a unique class that we can grab onto.
// custom handlers here ...
if ( /hover-ajax/.test( target.parentNode.className ) ) {
makeAjaxRequest(target,'hover');
}

For the onclick version of this we want to keep the link from actually executing and taking us off the page until we get our Ajax response.
// onclick triggers ... redundant code omitted
// custom handlers here ...
if ( /click-ajax/.test( target.parentNode.className ) ) {
makeAjaxRequest(target,'click');
so we return false to our target link, thus nullifying the link-action
return false;
we could instead use the more formalized approach and cancel the event object's action
//cancelDefaultAction(action); // the formalized approach

If you end up playing around with this approach some, you might want to uncomment the following line and just click-around the page some to see what output you get.
// SOME TESTING OUTPUT
// alert( ( /^\s+$/.test( target.firstChild.nodeValue ) || target.firstChild.nodeValue == null ) ? '<' + target.nodeName.toLowerCase() + '> tag' : 'data: ' + target.firstChild.nodeValue );

This should be familiar to you, it's just using my ajax class and using a switch statement to combine the two hover/click functions you had
function makeAjaxRequest ( target, type ) {
var url = target.href;
var args = 'foo=hede';
switch ( type ) {
case 'click': args += '&task=click'; break;
case 'hover': args += '&task=hover'; break;
}
var req = new Agent(); // my Ajax class
req.set_action('test_script.php');
req.set_method('POST');
req.set_format('text');
req.set_async(true);
req.success = function ( response ) {
alert( response );

This, of course, checks if it's a click action, and loads the original link URL after the response is received.
if ( type == 'click' ) { // needs redundancy check for hover then click ...
window.location = url;
}
what it does not do is find out if that request has already been made from a hover action before the person clicked the link ...

This is the formalized event cancellation method.
I forget which one uses action.preventDefault() and which one uses action.returnValue, but one is mozilla-DOM and one is IE.

function cancelDefaultAction ( event ) {
var action = ( typeof event == 'undefined' ) ? window.event : event;
action.returnValue = false;
if ( typeof action.preventDefault != "undefined" ) {
action.preventDefault();
}
return true; // seems counter-intuitive to our return false above
}

Hope this helps clarify a little but, let me know if you have any questions.
Last edited by langsor; Sep 3rd, 2008 at 4:13 pm.
Google is the answer to all of your questions -- the trick is knowing what question to ask in your specific predicament.
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2008
Posts: 5
Reputation: ximath is an unknown quantity at this point 
Solved Threads: 0
ximath ximath is offline Offline
Newbie Poster

Re: Frustrating Firefox Problem while making AJAX request on an anchor

 
0
  #8
Sep 3rd, 2008
•
•
•
•
Originally Posted by langsor View Post
You are correct, and this way you don't interfere with the existing code at all. You just need some hook for the javascript to grab onto, like a class-name, id, name or href attribute (almost anything really).

I know this is a bit confusing code, but it is also incredibly flexible for almost any javascript event capturing ... let me break it down a little.

window.onload = register_triggers;
could also be an inline function, or using event handlers (ask if you want to know more about these), here's an inline example
window.onload = function () {
// script that executes after the window loads
};
and it's important to wait until the entire window-document has loaded since we are working with html elements, and if they haven't loaded yet we will get errors.

This make the entire html document a mouseover hotspot
document.getElementsByTagName('html').item(0).onmouseover = function ( event ) {
// onmouesover code for all elements inside <html> tags
};

In mozilla-DOM browsers you receive the event-object passed to the handler function
function ( event )
but IE makes the event a global or window-level object
window.event
so we end up with this branching code -- I renamed event into action
var action = ( typeof event == 'undefined' ) ? window.event : event;

In mozilla-DOM browser the element where the event originated is a property of the event called target, in IE it's called srcElement
so again we have branching code
var target = ( typeof action.target == 'undefined' ) ? action.srcElement : action.target;

Safari will register a text-node (the textual content of an element) to trigger an event, we don't really want this since a text-node can't contain any ID or other useful attributes, so we handle this by calling it's parent-element
if ( target.nodeName == '#text' ) { // Safari nodeType 3 work-around
target = target.parentNode;
}

At this point we know that an event has occurred, we know what element on the page caused the event, and we just need to know if that element is one of the ones we care about

Using a regular-expression test, we take a quick look at the (in this case) className of the target or originating element. If it matches up we execute our desired code
Since we don't want to change the attributes of the anchor links, instead we wrap them in a <span> and give that span a unique class that we can grab onto.
// custom handlers here ...
if ( /hover-ajax/.test( target.parentNode.className ) ) {
makeAjaxRequest(target,'hover');
}

For the onclick version of this we want to keep the link from actually executing and taking us off the page until we get our Ajax response.
// onclick triggers ... redundant code omitted
// custom handlers here ...
if ( /click-ajax/.test( target.parentNode.className ) ) {
makeAjaxRequest(target,'click');
so we return false to our target link, thus nullifying the link-action
return false;
we could instead use the more formalized approach and cancel the event object's action
//cancelDefaultAction(action); // the formalized approach

If you end up playing around with this approach some, you might want to uncomment the following line and just click-around the page some to see what output you get.
// SOME TESTING OUTPUT
// alert( ( /^\s+$/.test( target.firstChild.nodeValue ) || target.firstChild.nodeValue == null ) ? '<' + target.nodeName.toLowerCase() + '> tag' : 'data: ' + target.firstChild.nodeValue );

This should be familiar to you, it's just using my ajax class and using a switch statement to combine the two hover/click functions you had
function makeAjaxRequest ( target, type ) {
var url = target.href;
var args = 'foo=hede';
switch ( type ) {
case 'click': args += '&task=click'; break;
case 'hover': args += '&task=hover'; break;
}
var req = new Agent(); // my Ajax class
req.set_action('test_script.php');
req.set_method('POST');
req.set_format('text');
req.set_async(true);
req.success = function ( response ) {
alert( response );

This, of course, checks if it's a click action, and loads the original link URL after the response is received.
if ( type == 'click' ) { // needs redundancy check for hover then click ...
window.location = url;
}
what it does not do is find out if that request has already been made from a hover action before the person clicked the link ...

This is the formalized event cancellation method.
I forget which one uses action.preventDefault() and which one uses action.returnValue, but one is mozilla-DOM and one is IE.

function cancelDefaultAction ( event ) {
var action = ( typeof event == 'undefined' ) ? window.event : event;
action.returnValue = false;
if ( typeof action.preventDefault != "undefined" ) {
action.preventDefault();
}
return true; // seems counter-intuitive to our return false above
}

Hope this helps clarify a little but, let me know if you have any questions.
That makes perfect sense, take you for the clarification. I'll try it.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Frustrating Firefox Problem while making AJAX request on an anchor

 
0
  #9
Sep 3rd, 2008
•
•
•
•
Originally Posted by ximath View Post
One another solution I have come up with was tracking the AJAX requests and cancel the incomplete ones when user clicks the link. However, this may not only risk efficiency but also it would be totally inconsistent with the semantics of AJAX which is about making requests in such a way that no one actually knows when a request is completed and no request should be aware of another one -- so requests are async..
One last thought, I suspect the easiest (but not necessarily most reliable) way to track if a request is already active, is using cookies ... either in the JavaScript or on the server-side.

Just my two-cents

PHP:
http://us2.php.net/setcookie

JS:
http://www.quirksmode.org/js/cookies.html

Cheers

Hmmn, on second thought, you would need to see if the cookie is readable without a page-reload. I think it is if it's set with JavaScript but probably not if set on the server...
Last edited by langsor; Sep 3rd, 2008 at 4:46 pm.
Google is the answer to all of your questions -- the trick is knowing what question to ask in your specific predicament.
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2008
Posts: 1
Reputation: Bob Holmes is an unknown quantity at this point 
Solved Threads: 0
Bob Holmes Bob Holmes is offline Offline
Newbie Poster

Re: Frustrating Firefox Problem while making AJAX request on an anchor

 
0
  #10
Sep 3rd, 2008
I'm not certain if this is what you are looking for. It works in both IE and FF. AJAX requests are made several times in quick succession (before the previous request can be completed) from the onload event of this page: http://mmpp.com/mcweb200.nsf/formYieldSearch?Openform. Section 2. and section 4. on the page show 'Loading' in the listboxes until the AJAX request has been completed. You can also click on section 1. Municipalities radiobutton before the others are loaded. I hope this helps.

I should also mention that it is essential that the request_via_http variable and the triggered onreadystatechange function must remain within this function, or it doesn't work.

javascript Syntax (Toggle Plain Text) 
  1. function getRequestViaHTTP(url, parameters, listName)
  2. {	var request_via_http = false;
  3.      if (window.ActiveXObject)
  4. 	{	// IE6 and previous.
  5. 		try
  6. 		{	request_via_http = new ActiveXObject("Msxml2.XMLHTTP");
  7. 		}
  8. 		catch (e)
  9. 		{	try
  10. 			{	request_via_http = new ActiveXObject("Microsoft.XMLHTTP");
  11. 			}
  12. 			catch (e) {}
  13. 		}
  14. 	} else if (window.XMLHttpRequest)
  15. 	{	// IE7, Firefox, Opera, Safari, etc.
  16. 		request_via_http = new XMLHttpRequest();
  17. 		if (request_via_http.overrideMimeType)
  18. 		{	request_via_http.overrideMimeType('text/plain');
  19. 		}
  20. 	}
  21. 	if (! request_via_http)
  22. 	{	alert('This XMLHTTP request has failed. IE (PC only), Firefox (Mac and PC), Safari (Mac only), & Opera (PC Only) have successfully tested this code.');
  23. 		return false;
  24. 	}
  25.  
  26. 	request_via_http.onreadystatechange = function()
  27. 	{	if (request_via_http.readyState == 4)
  28. 		{	if (request_via_http.status == 200)
  29. 			{	populateList(listName, request_via_http.responseText);
  30. 			} else
  31. 			{	alert('This XMLHTTP request has failed upon return. (readyState: ' + request_via_http.readyState + ')');
  32. 			}
  33. 		}
  34. 	}
  35. 	request_via_http.open('GET', url + parameters, true);
  36. 	request_via_http.send(null);
  37. }
Last edited by Bob Holmes; Sep 3rd, 2008 at 7:21 pm. Reason: additional information
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box browser bug calendar captchaformproblem cart checkbox close codes column createrange() css cursor date debugger decimal dependent design dom download dropdown element embed enter error events firefox focus form frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 iframe images index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsfile jsp libcurl listbox maps masterpage media menu microsoft mimic mp4 onmouseover paypal php player position post problem programming progressbar prototype redirect regex runtime safari scale scriptlets search security select size software sql text textarea unicode w3c website window windowofwords windowsxp
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC