Page 1 of 1
This jQuery Won't Work in IE7, But Does in FF. Can You Fix?
Posted: Thu Oct 02, 2008 10:53 am
by supermike
The following code doesn't seem to work in IE7, but works just fine in FF. Can you help me figure out why?
Code: Select all
<select id="fldSection" size="1">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
</select>
<select id="fldSubsection" size="1">
<option value=""></option>
</select>
<script type="text/javascript">
$().ready(function() {
$('#fldSection').change(function() {
$('#fldSubsection').load('get_subsections.php?id=' + $(this).val());
});
});
</script>
Basically, the load statement interacts with the innerHTML property of the SELECT tag, meaning the OPTION tags inside. But the .load statement is different than the .html statement because .load will go get a remote page over AJAX, pass it a value, and pull the results back to paste into an innerHTML.
I could have substituted the .load statement with:
$('#fldSubsection').html("<option value='got here'>Got Here</option>");
...and it would have the same effect -- works in FF, but broke in IE7.
Re: This jQuery Won't Work in IE7, But Does in FF. Can You Fix?
Posted: Thu Oct 02, 2008 1:45 pm
by kaszu
Works for me in FF, IE6, IE7. Problem is not with this script, is there any other JS on that page? Is IE7 showing any errors?
Re: This jQuery Won't Work in IE7, But Does in FF. Can You Fix?
Posted: Thu Oct 02, 2008 1:49 pm
by supermike
I found the answer.
1. FF and all other browsers but IE let you swap SELECT OPTIONS on the fly. To handle things with IE, you have to replace the entire SELECT element, not the OPTIONS inside it.
2. Note that if you had, for instance:
<select id="test" name="test" size="1">
<option value="test">test</option>
</select>
...and you had a jQuery event attachment like so:
$('#test').change( function() {
alert('you changed me to: ' + $(this).val();
});
...this only works until that SELECT element is redrawn. Why would you redraw it? Well, if you have one select box choice that updates another select box -- that's why. So, if you did that, you would lose the attached jQuery event. The fix is to put an onChange="myfunction(this);" in the SELECT element once you redraw it so that you will always be able to catch that event.
I also discovered that the 'this' which is passed like so: onChange="myfunction(this);" can be converted back into a jQuery $(this) like so:
function myFunction(o) {
$(o).replaceWith("I'm replaced'); // just a sample where I demonstrate converting the Javascript 'this' object into the jQuery $(this) object
}
3. Therefore, noting the issue in # 1, you can't exactly use .load() or .html() to replace those options. You would use .load(), by the way, when you want to make a quick little AJAX call back to another page and then return its results into another element. So, the fix is to do it like this with a combination of $.get() and .replaceWith():
$('#fldType').change(function() {
$.get('edit_section_get.php', {id: $(this).val(), tag: 'fldSectionKey'} , function(data) {
$('#fldSectionKey').replaceWith(data);
}, 'html');
});
So, if someone changes the select box fldType, it then performs an AJAX call with 'edit_section_get.php', passes it the query params ?id=$(this).val()&tag=fldSectionKey (replacing Javascript with their actual values), and then on callback it receives data and replaces the entire select box fldSectionKey because edit_section_get.php did an echo statement of an entire SELECT box, complete with options and all.
So, my problem is fixed, but I had to go about it in a workaround, as you an see.
Re: This jQuery Won't Work in IE7, But Does in FF. Can You Fix?
Posted: Thu Oct 02, 2008 1:52 pm
by supermike
kaszu wrote:Works for me in FF, IE6, IE7. Problem is not with this script, is there any other JS on that page? Is IE7 showing any errors?
The code sample at the top of the thread will load without errors, but if the get_subsections.php page only returns OPTION elements, not the full SELECT element complete with OPTION elements inside, then you will get an unintended result on IE -- no options show up.
The workaround is to replace the entire SELECT element. In my previous post, I demonstrate this technique.
Re: This jQuery Won't Work in IE7, But Does in FF. Can You Fix?
Posted: Thu Oct 02, 2008 1:58 pm
by kaszu
This is what I had in my get_subsections.php and everything was working correctly with your initial code!
Code: Select all
<?php if (isset($_GET['id']) && $_GET['id'] == 'test1') { ?>
<option value="x1">A1</option>
<option value="x2">A2</option>
<option value="x3">A3</option>
<option value="x4">A4</option>
<?php } else { ?>
<option value="y1">B1</option>
<option value="y2">B2</option>
<option value="y3">B3</option>
<option value="y4">B4</option>
<?php } ?>
Re: This jQuery Won't Work in IE7, But Does in FF. Can You Fix?
Posted: Thu Oct 02, 2008 2:05 pm
by supermike
I just don't get it. I have IE6 and IE7 and they both fail. FF, though, works fine. I replaced the whole SELECT statement instead of just the OPTIONs inside, and all was well again.
Wait a minute -- what version of jQuery are you running? Maybe my version is old and perhaps they somehow have fixed this?
Re: This jQuery Won't Work in IE7, But Does in FF. Can You Fix?
Posted: Thu Oct 02, 2008 2:12 pm
by kaszu
jQuery 1.2.6
Re: This jQuery Won't Work in IE7, But Does in FF. Can You Fix?
Posted: Thu Oct 02, 2008 2:20 pm
by supermike
Yep. That's what I'm running. Hmmm. Weird.
Re: This jQuery Won't Work in IE7, But Does in FF. Can You Fix?
Posted: Thu Oct 02, 2008 2:27 pm
by kaszu
Re: This jQuery Won't Work in IE7, But Does in FF. Can You Fix?
Posted: Sun Oct 05, 2008 1:48 pm
by supermike
Dude! I figured it out thanks to your sample. Here's what I did wrong.
Instead of Vista, I was using Windows 2008 Server because it was free and acts sort of like a mix of XP and Vista (when set in classic mode). Well, W2K8S has IE7 in a super-tight security mode, which then wouldn't download jQuery. When I added your site to "Trusted Sites", however, then refreshed the page, your example worked 100%.
Long story short -- it was my security settings in my browser.