By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,741 Members | 1,973 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,741 IT Pros & Developers. It's quick & easy.

How to update tab content using jQuery

rizwan6feb
100+
P: 108
Hi
I have created a tabbed interface using jQuery using the code below

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.      <script type="text/javascript">
  5.         $(document).ready(function(){
  6.             $('#tabs').tabs({ remote: true });
  7.         });
  8.     </script>
  9. </head>
  10.  
  11. <title>Ajax Tabs</title>
  12.  
  13. <body>
  14.  
  15.     <h2>Ajax tabs</h2>
  16.  
  17.     <div id="tabs">
  18.         <ul>
  19.             <li><a href="p1.html"><span>One</span></a></li>
  20.             <li><a href="p2.html"><span>Two</span></a></li>
  21.             <li><a href="p3.html"><span>Three</span></a></li>
  22.         </ul>
  23.     </div>
  24.  
  25. </body>
  26. </html>
  27.  
  28.  
Offcourse all the external script files have been included, and the tabs are working fine, what i want to do is

I have a fourth html file named p4.html, also p3.html contains a link to this file. i want to replace the content in the third tab with p4.html (when a link in p3.html file is clicked). Please help
Oct 17 '08 #1
Share this Question
Share on Google+
10 Replies


acoder
Expert Mod 15k+
P: 16,027
Is this what you're looking for?
Oct 17 '08 #2

rizwan6feb
100+
P: 108
This seems to be the solution but not working for me, i have tried like this

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.       <script type="text/javascript">
  5.          $(document).ready(function(){
  6.              $('#tabs').tabs({ remote: true });
  7.          });
  8.     $('#tabs').tabs({
  9.         load: function(e, ui) {
  10.             $('a.link', ui.panel).click(function() {
  11.                 $(ui.panel).load(this.href);
  12.                 return false;
  13.             });
  14.         }
  15.     });
  16.      </script>
  17.  </head>
  18. <title>Ajax Tabs</title>
  19.  <body>
  20.      <h2>Ajax tabs</h2>
  21.       <div id="tabs">
  22.          <ul>
  23.              <li><a href="p1.html"><span>One</span></a></li>
  24.              <li><a href="p2.html"><span>Two</span></a></li>
  25.             <li><a href="p3.html"><span>Three</span></a></li>
  26.          </ul>
  27.      </div>
  28.    </body>
  29.  </html>
  30.  

p3.html contains a link to p4.html and a class with name 'link' is applied
Oct 18 '08 #3

rizwan6feb
100+
P: 108
Please help.........
Oct 18 '08 #4

acoder
Expert Mod 15k+
P: 16,027
Where's the jQuery file included in your code?
Oct 20 '08 #5

rizwan6feb
100+
P: 108
Where's the jQuery file included in your code?
Offcourse the file is included, before line #4 in the head section, if it was not there, tabs should not be working
Oct 20 '08 #6

acoder
Expert Mod 15k+
P: 16,027
Besides that line, have you got any other code in that test page? Try with a simple test exactly as described and then build from there.
Oct 20 '08 #7

rizwan6feb
100+
P: 108
I have attached a zip file containing all the scripts and html files. Please find a link in the third tab which in not opening in the current tab, clicking the link leaves the tabbed interface
Attached Files
File Type: zip jquery.zip (32.7 KB, 173 views)
Oct 21 '08 #8

acoder
Expert Mod 15k+
P: 16,027
It seems as if the function has not been applied to the link. Try selecting all links.
Oct 21 '08 #9

rizwan6feb
100+
P: 108
It seems as if the function has not been applied to the link. Try selecting all links.
I have selected all links, still not working
Oct 22 '08 #10

rizwan6feb
100+
P: 108
Anyone with a better response ?
Oct 24 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.