Solved

jQuery tabs not working in IE

Posted on 2011-02-15
13
1,861 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

Several part series to implement Internet Explorer 11 Enterprise Mode
This article discusses how to implement server side field validation and display customized error messages to the client.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
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.
Suggested Courses

628 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