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

Posted by scott jarvis on Stack Overflow See other posts from Stack Overflow or by scott jarvis
Published on 2010-03-20T07:17:07Z Indexed on 2010/03/20 7:21 UTC
Read the original article Hit count: 214

Filed under:
|
|
|

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!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about load