How to Fix my jQuery code in IE?? Works in Firefox..

Question

I am using jQuery to show/hide a div container (#pluginOptionsContainer), and load a page (./plugin_options.php) inside it with the required POST vars sent.

What POST data is sent is based on the value of a select list (#pluginDD) and the click of a button (#pluginOptionsBtn)...

It works fine in Firefox, but doesn't work in IE.. The '$("#pluginOptionsContainer").load()' request never seems to finish in IE - I only see the loading message forever...

bind(), empty() and append() all seem to work fine in IE.. But not load()..

Here is my code:

// wait for the DOM to be loaded
$(document).ready(function() {

 // hide the plugin options
 $('#pluginOptionsContainer').hide();

 // This is the hack for IE
 if ($.browser.msie) {
   $("#pluginDD").click(function() {
     this.blur();
     this.focus();
   });
 }

 // set the main function
 $(function() {

  // the button shows hides the plugin options page (and its container)
  $("#pluginOptionsBtn") .click(function() {
    // show the container of the plugin options page
   $('#pluginOptionsContainer').empty().append('<div style="text-align:center;width:99%;">Loading...</div>');
   $('#pluginOptionsContainer').toggle();
  });

  // set the loading message if user changes selection with either the dropdown or button
  $("#pluginDD,#pluginOptionsBtn").bind('change', function() {
    $('#pluginOptionsContainer').empty().append('<div style="text-align:center;width:99%;">Loading...</div>');
  });

  // then update the page when the plugin is changed when EITHER the plugin button or dropdown or clicked or changed
  $("#pluginDD,#pluginOptionsBtn").bind('change click', function() {
    // set form fields as vars in js
   var pid = <?=$pid;?>;
   var cid = <?=$contentid;?>;
   var pDD = $("#pluginDD").val();
    // add post vars (must use JSON) to be sent into the js var 'dataString'
   var dataString = {plugin_options: true, pageid: pid, contentid: cid, pluginDD: pDD };
   // include the plugin option page inside the container, with the required values already added into the query string
   $("#pluginOptionsContainer").load("/admin/inc/edit/content/plugin_options.php#pluginTop", dataString);
   // add this to stop page refresh
   return false;
  }); // end submit function

 }); // end main function
 }); // on DOM load

Any help would be GREATLY appreciated! I hate IE!

Answer 1

IE sometimes caches responses. You can check by watching the requests IE makes to the server. Fiddler2 is a tool that's good for watching http requests.

If you notice that you hit submit and don't see any http requests being made, IE is caching the result.

If that's the case, you can add a random number to the url to cache bust it:

$("#pluginOptionsContainer").load("url.php?random=" + Math.random()*99999, dataString);

Answer 2

IE is sometimes pickier then FF when it comes to duplicate element ids. Check if every ID you use is used only once and is not created anew during the ajax call.

Answer 3

If caching is the issue, then try setting cache = false in jquery's ajax setup...

 $.ajaxSetup ({
        cache: false,
    });