Avatar of erikTsomik
erikTsomik
Flag for United States of America asked on

Jquery tabs

I am trying to implement jquery tabs and load the iframe in it.

so I came up with following code. That code will append the the iframe to the panel and resize the iframe. There are a few problems here.

First, when the page is loaded the content does not get loaded until I click on the tab. Once It clicked and loaded if I need to come back it does not reload it show previous result.

I need the tab act like a ajax tabs
The other issue is the iframe  does not re-size properly

<div id="tabs">
		<ul style="padding: 0; margin: 0;">
		
			
				<li><a href="##tab-1">test1</a></li>
<li><a href="##tab-2">test2</a></li>
<li><a href="##tab-3">test3</a></li>
			
		</ul>

<div id="tab-1" title="index1.cfm"></div>
<div id="tab-2" title="index2.cfm"></div>
<div id="tab-3" title="index3.cfm"></div>
		 
		
		<cfoutput query="rc.getMenuTab" >
			<div id="tab-#rc.getMenuTab.currentrow#" title="index.cfm?event=#rc.getMenuTab.link#"></div>
		</cfoutput>	
		
		
	</div>

Open in new window


 $('#tabs').tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "There was an error loading this content. ");
                }
            },
            select: function(event, ui) {
                var pnl = $(ui.panel);
                var url = pnl.attr('title');    // get url to load from title attr

                //if ((url) && (pnl.find('iframe').length == 0)) {
                    $('<iframe />')
                        .attr({
                            frameborder: '0',
                            scrolling: 'no',
                            src: url,
                            width: '100%',
                            height: '100%'
                        })
                        .appendTo(pnl)
                        .load(function() {      // IFRAME resize code

                            var iframe = $(this);   // iframe element
                            var win = this.contentWindow;   // child window
                            var element = $(win.document);  // element to size to; .document may return 0 depending on sizing of document, may have to use another element

                            $(win.document).ready(function() {
                                iframe.height(element.height());    // resize iframe
                            });
                       });
              //  }

                return true;
            }
        });

Open in new window

jQueryJavaScriptAJAX

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Michel Plungjan

Why use an iFrame at all?
ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23