1

I have a strange bug involving PHP, Ajax and IE.

The way my site is set up is that the root page will dynamically load content via jQuery's $.ajax based on the URL's hash tag. So http://example.com/#message/ will load a page to send a message. Standard stuff.

On submission of this messaging form, I append the hash tag to the POST request so that I can send the user back to the page where they came from. In this messaging example, I will receive $_POST['page'] = "message/" on the server side. Works great so far.

I'll process the request, then send the user back to the page. This is where the problem starts.

What I'm doing in my PHP script is:

$_SESSION['sent'] = true;
header('Location: '. rootUrl() .'/#'. $_POST['page']);`

(rootUrl() returns "http://example.com" in this case, so the string concatenates to "http://example.com/#message/")

This sends me back to the same messaging page that the user was previously at, and the script is something like:

if (isset($_SESSION['sent'])) {
    echo '<p>Your message was sent!</p>';
} else {
    // show the message submit form here
}
// fully clear so the user can reload the page and send another message 
unset($_SESSION['sent']);

Now this whole scenario works perfectly in every browser except IE, and does work perfectly in all browsers on the non-ajax version (ajax functionality was added through progressive enhancement, and non-ajax/ajax pages are 100% identical).

So what happens in IE? It loads the page with the hash tag twice! It sends two requests to the page.

This is a problem because I'm unsetting my $_SESSION['sent'] variable, so what the user experiences is that they hit send, then their message seemingly clears itself. It does process and send on the server-side, but the user has no way of knowing that.

This happens in all versions of IE, or at least from IE9 and below.

As a temporary fix, I've just decided to make the header redirect to the non-ajax version of the page, which works as expected.

It's a minor issue: the transition is slightly less smooth, but subsequent clicks on the site will bring back ajax functionality. However, I would still like to know why IE is loading my page twice.

The only thing that I've found even slightly related to the issue is that in IE, img tags with empty 'src' attributes will send a request to the root page, but there's only one img tag on my page and it's not empty. So I don't think that is the problem.

Corey
  • 1,177
  • 4
  • 16
  • 24
  • possible duplicate of [How can I prevent IE Caching from causing duplicate Ajax requests?](http://stackoverflow.com/questions/956390/how-can-i-prevent-ie-caching-from-causing-duplicate-ajax-requests) – Michael Durrant Jan 15 '12 at 03:56
  • @Corey Where are you calling session_start()? Is it possible your SESSION variables are not been set in IE? – Ben Jan 15 '12 at 04:02
  • @Ben session_start() is at the top of every page, and the SESSION variables *are* working properly. One way I tested this theory was in that area with the `

    ` tag, I placed a Javascript `alert()` after to pause the UI. In all browsers but IE, it displays the contents of the `

    ` tag, shows an alert and it's done. In IE, it shows the contents, the alert, then upon exiting the dialog box, the page reloads. I've also verified through server logs that IE is hitting the page twice. So I know for a fact that that part of the PHP script is being called by IE, it's just being unset and reloaded.

    – Corey Jan 15 '12 at 04:07
  • @Corey Could it be something to do with the hash tag? Maybe redirect to the page with a GET parameter set which then calls a JavaScript snippet to add the hash tag? see here.. http://stackoverflow.com/questions/2602260/javascript-location-hash-refreshing-in-ie/3804661#3804661 – Ben Jan 15 '12 at 04:28
  • @Ben thank you for that thread! I think I know what the problem is now: my ajax request sets window.location.hash. If this is the problem, I can think of a simple one line fix for it, let me try it. – Corey Jan 15 '12 at 05:07
  • @Ben well not surprisingly, that fixed the problem (don't you love IE? sigh...). It had nothing to do with my PHP script or ajax call, it's just a bug in the browser. – Corey Jan 15 '12 at 05:15
  • @Corey, Not a problem glad you got it working. – Ben Jan 16 '12 at 00:43

1 Answers1

0

Thanks to a thread Ben listed in the comments, I found the issue. It has nothing to do with my PHP script or ajax calls.

In my ajax script, when I load a new page, I also set window.location.hash. In normal browsers, all this does is change the hash appended to the URL in the address bar. IE treats it as if you are modifying window.location which triggers a page load.

The solution: add window.location.hash = window.location.hash to the very top of your page. This still causes two page loads on IE, but at least the dynamically loaded includes will work.

Community
  • 1
  • 1
Corey
  • 1,177
  • 4
  • 16
  • 24