-
Nov 4th, 2014, 05:47 PM
#1
[RESOLVED] [JavaScript] Elements show in FF but not in IE
The majority of my users will use IE9 or above and I'm running into an issue where I'm showing/hiding forms based on the checked value of a radio button. Here is my code:
Code:
window.onload = function() {
// Generate events
document.getElementById('rbName').onchange = rb_CheckChanged;
document.getElementById('rbPolicy').onchange = rb_CheckChanged;
document.getElementById('rbPhone').onchange = rb_CheckChanged;
document.getElementById('rbEmail').onchange = rb_CheckChanged;
document.getElementById('btnAdvancedSearch').onclick = btnAdvancedSearch_Click;
// Set the default displays on the panels
document.getElementById('tabPolicy').style.display = 'none';
document.getElementById('tabPhone').style.display = 'none';
document.getElementById('tabEmail').style.display = 'none';
}
function rb_CheckChanged() {
hideForms();
var displayPnl = document.getElementById(this.getAttribute('data-form'));
displayPnl.style.display = 'initial';
}
function hideForms() {
document.getElementById('tabName').style.display = 'none';
document.getElementById('tabPolicy').style.display = 'none';
document.getElementById('tabPhone').style.display = 'none';
document.getElementById('tabEmail').style.display = 'none';
}
Code:
<div id='main'>
<form id='frmSearch'>
<legend>Search</legend>
<ul>
<li>
<input checked='checked' data-form='tabName' id='rbName' type='radio' name='search' value='name'>
<label for='rbName'>Name</label>
</li>
<li>
<input data-form='tabPolicy' id='rbPolicy' type='radio' name='search' value='policy'>
<label for='rbPolicy'>Policy Number</label>
</li>
<li>
<input data-form='tabPhone' id='rbPhone' type='radio' name='search' value='phone'>
<label for='rbPhone'>Phone Number</label>
</li>
<li>
<input data-form='tabEmail' id='rbEmail' type='radio' name='search' value='email'>
<label for='rbEmail'>Email Address</label>
</li>
</ul>
</form>
<form id='frmWithin'>
<legend>Within</legend>
<select>
<option selected>All Agencies</option>
</select>
</form>
<form id='frmFor'>
<legend>For</legend>
<ul>
<li>
<input checked='checked' id='rbCustomer' type='radio' name='search' value='customer'>
<label for='rbCustomer'>Customer</label>
</li>
<li>
<input id='rbProspect' type='radio' name='search' value='prospect'>
<label for='rbProspect'>Prospect</label>
</li>
<li>
<input id='rbAll' type='radio' name='search' value='all'>
<label for='rbAll'>All</label>
</li>
</ul>
</form>
</div>
<div id='input'>
<article class='tabs'>
<form id='tabName'>
<legend>Search By Name</legend>
<ul>
<li>
<label for='txtLastName'>Last Name:</label>
<input id='txtLastName' type='text' />
</li>
<li>
<label for='txtLastName'>First Name:</label>
<input id='txtLastName' type='text' />
</li>
</ul>
</form>
<form id='tabPolicy'>
<legend>Search By Policy Number</legend>
<ul>
<li>
<label for='txtPolicy'>Policy Number:</label>
<input id='txtPolicy' type='text' />
</li>
</ul>
</form>
<form id='tabPhone'>
<legend>Search By Phone Number</legend>
<ul>
<li>
<label for='txtPhone'>Phone Number:</label>
<input id='txtPhone' type='text' />
</li>
</ul>
</form>
<form id='tabEmail'>
<legend>Search By Email</legend>
<ul>
<li>
<label for='txtEmail'>Email Address:</label>
<input id='txtEmail' type='text' />
</li>
</ul>
</form>
<button id='btnAdvancedSearch' type='submit'>Search</button>
</article>
</div>
Whenever I run the code in FireFox 33.0.2 it performs as expected, but whenever I run the code in Internet Explorer 11, none of the forms show.
-
Nov 4th, 2014, 05:55 PM
#2
Re: [JavaScript] Elements show in FF but not in IE
Have you checked the browser console for script errors? You should be able to set breakpoints in the script code to see if the events are being fired correctly.
Using the F12 developer tools
-
Nov 4th, 2014, 05:59 PM
#3
Re: [JavaScript] Elements show in FF but not in IE
Yeah, I setup breakpoints on these three lines:
Code:
var displayPnl = document.getElementById(this.getAttribute('data-form'));
displayPnl.style.display = 'initial';
}
displayPnl is the expected element, it just doesn't display it.
-
Nov 5th, 2014, 02:22 PM
#4
Re: [JavaScript] Elements show in FF but not in IE
Hey, is there a reason that you get the element by "data-form". Actually i don't know what that is. Have you used it as custom property?
If so you can try to use a similar class to the wanted elements and try to get the class instead of the data-form.
I also think that doing so and modify a collection of elements is relatively easy with Jquery but not so sure about plain JS. Worst case scenario you have to do a loop on the elements.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Nov 5th, 2014, 02:41 PM
#5
Re: [JavaScript] Elements show in FF but not in IE
Hey, is there a reason that you get the element by "data-form".
Yeah, the value of data-form is the ID name of the form I want to display.
If so you can try to use a similar class to the wanted elements and try to get the class instead of the data-form.
I'm sorry, but I'm not following. Are you suggesting doing the same thing, only instead of using the custom data attribute to use the class attribute?
-
Nov 5th, 2014, 03:34 PM
#6
Re: [JavaScript] Elements show in FF but not in IE
Put this
this.getAttribute('data-form')
into a variable...
Or examine it the WATCH window...
-
Nov 5th, 2014, 03:41 PM
#7
Re: [JavaScript] Elements show in FF but not in IE
Put this
this.getAttribute('data-form')
into a variable...
I placed it in as a variable and it gives me the desired string value, it steps through everything as expected, but it still is hiding the form:
Code:
function rb_CheckChanged() {
hideForms();
var formID = this.getAttribute('data-form');
var displayPnl = document.getElementById(formID);
displayPnl.style.display = 'initial';
}
Or examine it the WATCH window...
I can't find a watch window in IE11
-
Nov 5th, 2014, 03:45 PM
#8
Re: [JavaScript] Elements show in FF but not in IE
What does this do?
.style.display = 'initial';
-
Nov 5th, 2014, 03:52 PM
#9
Re: [JavaScript] Elements show in FF but not in IE
What does this do?
.style.display = 'initial';
It's suppose to show the form again.
The way my code works is:
- Call the hideForms function by setting all my form element's display to none
- Get the ID of the form to be displayed again, which is stored in the data-form attribute of the RadioButton that was checked
- Display the form with the desired ID variable by setting the display to initial.
-
Nov 5th, 2014, 04:07 PM
#10
Re: [JavaScript] Elements show in FF but not in IE
Create CSS classes to hide or show - and assign or remove those classes from the elements.
-
Nov 5th, 2014, 06:10 PM
#11
Re: [JavaScript] Elements show in FF but not in IE
According to MDN, display:initial is not supported in IE. You will need to use one of the other display values instead.
-
Nov 5th, 2014, 06:14 PM
#12
Re: [JavaScript] Elements show in FF but not in IE
Originally Posted by tr333
According to MDN, display:initial is not supported in IE. You will need to use one of the other display values instead.
Wow, that's incredibly stupid. It's always something with IE... I've changed the display from initial to block and now it works.
-
Nov 5th, 2014, 06:16 PM
#13
Re: [RESOLVED] [JavaScript] Elements show in FF but not in IE
That's why a library like jQuery is so cool.
Built in hide/show classes applied to any object.
And cross-browser - that's the point!
-
Nov 5th, 2014, 06:18 PM
#14
Re: [RESOLVED] [JavaScript] Elements show in FF but not in IE
To be honest, the only reason why I've yet to use jQuery is because I don't know how to set it up. I thought you used it in just regular script tags, but apparently that's not the case.
-
Nov 5th, 2014, 06:23 PM
#15
Re: [RESOLVED] [JavaScript] Elements show in FF but not in IE
jQuery - so cool!
strPanel = "#someid"
$(strPanel).closest(".acs-panel-popup").hide();
That finds "#someid" in the DOM and travels UP to the closest element having that class of .acs-panel-popup and then .HIDE()'s it.
.TOGGLE would hide and show and retain knowledge of the state - that's even cooler.
-
Nov 6th, 2014, 12:49 AM
#16
Re: [RESOLVED] [JavaScript] Elements show in FF but not in IE
Originally Posted by dday9
To be honest, the only reason why I've yet to use jQuery is because I don't know how to set it up. I thought you used it in just regular script tags, but apparently that's not the case.
It's just another JavaScript framework. Include the source in a <script> tag like any other .js file.
There's a bunch of tutorials available on the jQuery website.
https://learn.jquery.com/about-jquery/how-jquery-works/
https://learn.jquery.com/
https://api.jquery.com/
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|