I would like to know if jquery tabs will load information independently?

brihol44
brihol44 used Ask the Experts™
on
Hello,

I'm working on a new CMS system and I'm wanting to use some sort of Tab system that will make things more accessible for the administrators.

It looked like this example here was going to serve all my needs..

http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment.htm

Except when I tried submitting a form (other than the default 1st tab container because it's already set out on the page inline) within the Tab content area It submits to a new page and doesn't stay within the tab content area.

I'm now looking at Jquery tabs and I'm trying to determine if the tabs load the related content area independently when it's clicked? The examples I've seen just looks like it loads all of the content inline. It's just that I will have several tabs with lots of dynamic information loading so I don't want the page to all of the content at once. If somebody can point to me an example that does what I need or possibly write up a quick example of how to keep the 1st example from submitting and appearing into a new window instead of within the tab content container that's what I'm looking for.

Here is a link to one example that I see but it's just not clear to me the extent of it's functionality or that it does what I need it to do.

http://www.coldfusionjedi.com/demos/jquerytabs/test3.html#1

Thank you,

Brian



Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Greg AlexanderLead Developer

Commented:
No, it will post it inline, but you culd use iframes for the inline content and that should work
Greg AlexanderLead Developer

Commented:
Something like
<div id="example">
     <ul>
         <li><a href="#first-tab"><span>Content 1</span></a></li>
         <li><a href="#second-tab"><span>Content 2</span></a></li>
         <li><a href="#third-tab"><span>Content 3</span></a></li>
     </ul>
	 
	 <div id="first-tab">
	 <iframe src="content.htm"></iframe>
	 </div>
 
	 <div id="second-tab">
	 <iframe src="content.htm"></iframe>
	 </div>
 
	 <div id="third-tab">
	 This is the third tab.
	 </div>
 
</div>

Open in new window

Greg AlexanderLead Developer

Commented:
Rather:
<div id="example">
     <ul>
         <li><a href="#first-tab"><span>Content 1</span></a></li>
         <li><a href="#second-tab"><span>Content 2</span></a></li>
         <li><a href="#third-tab"><span>Content 3</span></a></li>
     </ul>
	 
	 <div id="first-tab">
	 <iframe src="content.htm"></iframe>
	 </div>
 
	 <div id="second-tab">
	 <iframe src="content2.htm"></iframe>
	 </div>
 
	 <div id="third-tab">
	 <iframe src="content3htm"></iframe>
	 </div>
 
</div>

Open in new window

Author

Commented:
From what I remember about using iframes is having an issue with the height. I don't want scrolling to appear and from what I remember it will appear if I don't set the height manually and I don't really know the height at all times because the page will load dynamic information that will change all the time. Unless there's a way that I don't know about that the Iframe will stretch vertically to the content.

Brian
Lead Developer
Commented:
Outside of strictly using AJAX for posting and such, I would resize the iframes with jquery onload

http://www.lost-in-code.com/programming/jquery-auto-iframe-height/

Author

Commented:
Sweetness! Haven't tried it yet but it all looks creditable.

Brian

Author

Commented:
Well I spoke too soon... It seems that the first tab works great but any tab after that only shows the first line. I'm using the same file for the second tab so I'm not sure what's happening...

<div id="tabs">
            <ul>
                   <li><a href="#first-tab"><span>Contact Information</span></a></li>
                   <li><a href="#second-tab"><span>Sales Rep</span></a></li>
             </ul>
             
             <div id="second-tab">
             <iframe id="myframe" name="myframe" width="100%" class="autoHeight" scrolling="no" frameborder="0" src="includes/inc_advertiser_profile.cfm"></iframe>
             </div>
             
             <div id="first-tab">
             <iframe id="myframe2" name="myframe2" width="100%" class="autoHeight" scrolling="no" frameborder="0" src="includes/inc_advertiser_profile.cfm"></iframe>
             </div>
      
             

      </div>

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial