Solved

jQuery tabs not working in IE

Posted on 2011-02-15
13
1,835 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
  • 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
 
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

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 …
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

920 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now