How to update tab content using jQuery

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • rizwan6feb
    New Member
    • Jul 2007
    • 108
    #1

    How to update tab content using jQuery

    Hi
    I have created a tabbed interface using jQuery using the code below

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <script type="text/javascript">
		$(document).ready(function(){
			$('#tabs').tabs({ remote: true });
		});
    </script>
</head>

<title>Ajax Tabs</title>

<body>

	<h2>Ajax tabs</h2>

	<div id="tabs">
		<ul>
			<li><a href="p1.html"><span>One</span></a></li>
			<li><a href="p2.html"><span>Two</span></a></li>
			<li><a href="p3.html"><span>Three</span></a></li>
		</ul>
	</div>

</body>
</html>
    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
    Tags: jquery update
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Is this what you're looking for?

        Comment

        • rizwan6feb
          New Member
          • Jul 2007
          • 108
          #3
          This seems to be the solution but not working for me, i have tried like this

          Code:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
      <script type="text/javascript">
         $(document).ready(function(){
             $('#tabs').tabs({ remote: true });
         });
	$('#tabs').tabs({
	    load: function(e, ui) {
        	$('a.link', ui.panel).click(function() {
	            $(ui.panel).load(this.href);
        	    return false;
	        });
	    }
	});
     </script>
 </head>
<title>Ajax Tabs</title>
 <body>
     <h2>Ajax tabs</h2>
      <div id="tabs">
         <ul>
             <li><a href="p1.html"><span>One</span></a></li>
             <li><a href="p2.html"><span>Two</span></a></li>
            <li><a href="p3.html"><span>Three</span></a></li>
         </ul>
     </div>
   </body>
 </html>

          p3.html contains a link to p4.html and a class with name 'link' is applied

            Comment

            • rizwan6feb
              New Member
              • Jul 2007
              • 108
              #4
              Please help.........

                Comment

                • acoder
                  Recognized Expert MVP
                  • Nov 2006
                  • 16032
                  #5
                  Where's the jQuery file included in your code?

                    Comment

                    • rizwan6feb
                      New Member
                      • Jul 2007
                      • 108
                      #6
                      Originally posted by acoder
                      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

                        Comment

                        • acoder
                          Recognized Expert MVP
                          • Nov 2006
                          • 16032
                          #7
                          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.

                            Comment

                            • rizwan6feb
                              New Member
                              • Jul 2007
                              • 108
                              #8
                              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

                                Comment

                                • acoder
                                  Recognized Expert MVP
                                  • Nov 2006
                                  • 16032
                                  #9
                                  It seems as if the function has not been applied to the link. Try selecting all links.

                                    Comment

                                    • rizwan6feb
                                      New Member
                                      • Jul 2007
                                      • 108
                                      #10
                                      Originally posted by acoder
                                      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

                                        Comment

                                        • rizwan6feb
                                          New Member
                                          • Jul 2007
                                          • 108
                                          #11
                                          Anyone with a better response ?

                                            Comment

                                            Previous template Next
                                            Working...