Solved

jQuery tabs not working in IE

Posted on 2011-02-15
13
1,853 Views
Last Modified: 2013-12-08
I have a page using the jQuery UI tabs ajax method. Content form all tabs display perfectly in FF. The tabs display in IE but the content will not load when the tab is clicked.

in the head
<script>
&#9;$(function() {
&#9;&#9;&#9;  
&#9;&#9;$( "#tabs" ).tabs(<%if request("showpaycheck") = 1 then response.Write("{ selected: 1}")%>);
&#9;&#9;&#9;
&#9;});

</script>

The tabs:

<div style="width:inherit" id="tabs">
     <ul>
         <li><a href="grid_general.asp?editid=<%=request("editid")%>"><span>General</span></a></li>
         <li><a href="grid_contact.asp?editid=<%=request("editid")%>"><span>Contact</span></a></li>
         <li><a href="grid_moduleaccess.asp?editid=<%=request("editid")%>"><span>Access</span></a></li>
     </ul>
</div>
0
Comment
Question by:griffaw
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 3
13 Comments
 

Author Comment

by:griffaw
ID: 34899829
0
 
LVL 16

Accepted Solution

by:
BurnieP earned 250 total points
ID: 34902371
Hi,

I don't know if this is your real tabs or you just copy pasted them for a sample, but you have quote issues :

<div style="width:inherit" id="tabs">
     <ul>
         <li><a href="grid_general.asp?editid=<%=request("editid")%>"><span>General</span></a></li>
         <li><a href="grid_contact.asp?editid=<%=request("editid")%>"><span>Contact</span></a></li>
         <li><a href="grid_moduleaccess.asp?editid=<%=request("editid")%>"><span>Access</span></a></li>
     </ul>
</div>

You are using double quotes inside double quotes.  Should be more like :

<div style="width:inherit" id="tabs">
     <ul>
         <li><a href='grid_general.asp?editid=<%=request("editid")%>'><span>General</span></a></li>
         <li><a href='grid_contact.asp?editid=<%=request("editid")%>'><span>Contact</span></a></li>
         <li><a href='grid_moduleaccess.asp?editid=<%=request("editid")%>'><span>Access</span></a></li>
     </ul>
</div>
0
 

Author Comment

by:griffaw
ID: 34902716
BurnieP:

I tried your edit...same problem. Still no content in tabs.

PS: these are the real tabs.

Thanks
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 16

Expert Comment

by:BurnieP
ID: 34902847
Hi,

Just another ckeckup, you have javascript enabled on your IE browser?
0
 

Author Comment

by:griffaw
ID: 34903925
BurnieP:

Yes.

PS: Non-ajax tabs work perfectly in IE. Only the ajax method fails.

0
 

Author Comment

by:griffaw
ID: 34910776
Any thoughts?

Thanks
0
 
LVL 18

Assisted Solution

by:Sudaraka Wijesinghe
Sudaraka Wijesinghe earned 250 total points
ID: 34935040
Can you show us how the final HTML is rendered (without the server side code)?
0
 

Author Comment

by:griffaw
ID: 34937853
I'm officially embarrased....there was a single orphan </div> tag in the body on the pages being called by the ajax tabs.

i "ass"umed that since FF displayed ok and IE did not that the issue was browser related...never checked the html. Oh well, lesson learned. I'll split the points among everyone that responded.

I curious though, how could FF handle it and IE choked?

0
 
LVL 16

Expert Comment

by:BurnieP
ID: 34937915
I'm glad you found it.

I'm surprised that FF is more forgiving on small mistakes like that.  I generally assume that IE is normally more forgiving and FF is really by the book of html.
0
 

Author Comment

by:griffaw
ID: 34937928
Score one for Redmond :)
0
 

Author Comment

by:griffaw
ID: 34937946
Interesting that both FF and IE forgave the orphan with html tabs. Only IE failed with the ajax method.
0

Featured Post

Business Impact of IT Communications

What are the business impacts of how well businesses communicate during an IT incident? Targeting, speed, and transparency all matter. Find out more in this infographic.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question