Results 1 to 16 of 16

Thread: [RESOLVED] [JavaScript] Elements show in FF but not in IE

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Resolved [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.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    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
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  3. #3

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    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.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  4. #4
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    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.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  5. #5

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    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?
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  6. #6
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    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...

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  7. #7

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    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
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  8. #8
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: [JavaScript] Elements show in FF but not in IE

    What does this do?

    .style.display = 'initial';

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  9. #9

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    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:
    1. Call the hideForms function by setting all my form element's display to none
    2. Get the ID of the form to be displayed again, which is stored in the data-form attribute of the RadioButton that was checked
    3. Display the form with the desired ID variable by setting the display to initial.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  10. #10
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    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.

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  11. #11
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    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.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  12. #12

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: [JavaScript] Elements show in FF but not in IE

    Quote Originally Posted by tr333 View Post
    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.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  13. #13
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    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!

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  14. #14

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    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.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  15. #15
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    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.

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  16. #16
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: [RESOLVED] [JavaScript] Elements show in FF but not in IE

    Quote Originally Posted by dday9 View Post
    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/
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width