Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jQuery tabs not working in IE

Posted on 2011-02-15
13
Medium Priority
?
1,879 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 1000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
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.
Suggested Courses

721 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