AJAX

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

•

Join Date: Sep 2008

Posts: 5

Reputation: ximath is an unknown quantity at this point

Solved Threads: 0

ximath

Offline

Newbie Poster

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

#11

Sep 4th, 2008

•

Originally Posted by Bob Holmes

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.

Hi,
I have tried to change href of anchor to javascript:void(0) and in this case it works in both IE and FF even if I don't wait hover request to complete. No problem. But when I change anchor's href to something else, say, http://www.google.com, this is where the problem begins. Thank you anyway.

•

Join Date: Aug 2008

Posts: 381

Reputation: langsor is an unknown quantity at this point

Solved Threads: 33

langsor

Offline

Posting Whiz

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

#12

Sep 5th, 2008

@ximath

Apparently I really like working on this puzzle ... I thought of this early this morning but have been away from my computer until now.

This is likely the way it should be done -- do you see what is different?

test_script.php (this is the same)

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<?php
if ( $_REQUEST ) {
  sleep(2);
  print $_REQUEST['task'].'::'.$_REQUEST['foo'];
  exit;
}
?>
<?php
if ( $_REQUEST ) {
  sleep(2);
  print $_REQUEST['task'].'::'.$_REQUEST['foo'];
  exit;
}
?>

main.html (this is changed)

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="agent.js"></script>
<script type="text/javascript">
 
window.onload = register_triggers;
 
function register_triggers () {
  // onmouseover triggers
  document.getElementsByTagName('html').item(0).onmouseover = function ( event ) {
    var action = ( typeof event == 'undefined' ) ? window.event : event;
    var target = ( typeof action.target == 'undefined' ) ? action.srcElement : action.target;
    if ( target.nodeName == '#text' ) { // Safari nodeType 3 work-around
      target = target.parentNode;
    }
    // custom handlers here ...
    if ( /hover-ajax/.test( target.parentNode.className ) ) {
      makeAjaxRequest(target,'hover');
    }
  };
  // onclick triggers
  document.getElementsByTagName('html').item(0).onclick = function ( event ) {
    var action = ( typeof event == 'undefined' ) ? window.event : event;
    var target = ( typeof action.target == 'undefined' ) ? action.srcElement : action.target;
    if ( target.nodeName == '#text' ) { // Safari nodeType 3 work-around
      target = target.parentNode;
    }
    // custom handlers here ...
    if ( /click-ajax/.test( target.parentNode.className ) ) {
      makeAjaxRequest(target,'click');
      // no return value or cancel default action !!!
    }
  };
}
 
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();
  req.set_action('test_script.php');
  req.set_method('POST');
  req.set_format('text');
  // make the request synchronous and everything works
  req.set_async(false);
  if ( resp = req.request(args) ) {
    // now we get the result as a return value of the synchronous request
    // and the link doesn't execute until we get the return value ...
    alert( resp );
  }
}
</script>
</head>
<body>
<span class="hover-ajax"><a href='http://www.google.com'>Hover Here</a></span><br /><br />
<span class="click-ajax"><a href='http://www.google.com'>Click Here</a></span>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="agent.js"></script>
<script type="text/javascript">

window.onload = register_triggers;

function register_triggers () {
  // onmouseover triggers
  document.getElementsByTagName('html').item(0).onmouseover = function ( event ) {
    var action = ( typeof event == 'undefined' ) ? window.event : event;
    var target = ( typeof action.target == 'undefined' ) ? action.srcElement : action.target;
    if ( target.nodeName == '#text' ) { // Safari nodeType 3 work-around
      target = target.parentNode;
    }
    // custom handlers here ...
    if ( /hover-ajax/.test( target.parentNode.className ) ) {
      makeAjaxRequest(target,'hover');
    }
  };
  // onclick triggers
  document.getElementsByTagName('html').item(0).onclick = function ( event ) {
    var action = ( typeof event == 'undefined' ) ? window.event : event;
    var target = ( typeof action.target == 'undefined' ) ? action.srcElement : action.target;
    if ( target.nodeName == '#text' ) { // Safari nodeType 3 work-around
      target = target.parentNode;
    }
    // custom handlers here ...
    if ( /click-ajax/.test( target.parentNode.className ) ) {
      makeAjaxRequest(target,'click');
      // no return value or cancel default action !!!
    }
  };
}

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();
  req.set_action('test_script.php');
  req.set_method('POST');
  req.set_format('text');
  // make the request synchronous and everything works
  req.set_async(false);
  if ( resp = req.request(args) ) {
    // now we get the result as a return value of the synchronous request
    // and the link doesn't execute until we get the return value ...
    alert( resp );
  }
}
</script>
</head>
<body>
<span class="hover-ajax"><a href='http://www.google.com'>Hover Here</a></span><br /><br />
<span class="click-ajax"><a href='http://www.google.com'>Click Here</a></span>
</body>
</html>

Okay, I'm done now :-)

Google is the answer to all of your questions -- the trick is knowing what question to ask in your specific predicament.

•

Join Date: Jun 2006

Posts: 7,620

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 468

~s.o.s~

Offline

Failure as a human

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

#13

Sep 6th, 2008

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

Of course the destination exists and so does the source when making the request, but clicking on the link loads a new page and hence the context in which the request was made is destroyed. Remember, Javascript is a client side scripting language in this case and hence its lifetime is the lifetime of the client session.

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

Because enough time is given for the request to complete and to process the response when you hover on the link. This isn't the case when you *click* on it since the browser attempts to load a new context.

> Moreover, the code I've posted here works perfectly in IE as it is.

Because what FF is showing in the Error console is not an error at all. Think about it, if you plan on ignoring the return status of your Ajax request, should it even matter to any browser? Does the same code run fine in Opera? Is this so called error hampering your functionality.

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

What kind of a system mandates you to forcefully use Ajax when the problem can be very easily solved with redirecting to a PHP page and performing navigating to your page of choice? Also, there are a lot many ways in which your current approach can be modified to work in a more predictable manner. One would be to navigate to the destination page after the Ajax requests are complete.

I don't accept change; I don't deserve to live.