PDA

View Full Version : Loading content into iFrame



Tym
19 Jan 2007, 11:41 PM
Despite posting a similar question before, searching the entire forum and checking the documentation I cannot work out how to get the following simple behaviour to work. It is starting to get very frustrating!

All I want to do is load some initial content into an iframe within the center (content) panel. Then all the standard <a> tags links in the left hand panel should also load into the iframe replacing the content that is currently there.

Although I can get the layout to appear, I cannot get the content to load within the iframe nor can I target the links to the iframe.

If anyone can point me to or send me a simple working example of how to load content into a center iframe, I would be very grateful.

____________ JS Code ____________________

Design = function(){
return {
init : function(){
layout = new YAHOO.ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 72
},
south: {
split:false,
initialSize: 30
},
west: {
split:false,
initialSize: 180,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 180,
autoScroll: true

},
center: {
autoScroll: true

}
});
layout.beginUpdate();
layout.add('north', new YAHOO.ext.ContentPanel('header', {fitToFrame:true}));
layout.add('south', new YAHOO.ext.ContentPanel('footer', {fitToFrame:true}));
layout.add('west', new YAHOO.ext.ContentPanel('nav', {fitToFrame:true}));
layout.add('center', new YAHOO.ext.ContentPanel('content', {tag: 'iframe', src: 'home.asp'}));
layout.endUpdate();

}

}

}();
YAHOO.ext.EventManager.onDocumentReady(Design.init, Design, true);


________________ DIVs ___________________

<div id ="container">
<div id="header" class="ylayout-inactive-content">Header goes here </div>
<div id="nav" class="ylayout-inactive-content">Nav Links go here</div>
<div id="content" class="ylayout-inactive-content">Replaciable content goes here</div>
<div id="footer" class="ylayout-inactive-content">Footer goes here</div>
</div>

Animal
20 Jan 2007, 1:08 AM
Loading into an iframe?

This isn't yui-ext you are asking about, it's basic HTML development! Why not learn HTML before you try to mess with complex front ends?



foo (???)
<iframe name="iframename></iframe>


Also, setting the src attribute to a URL works.

Tym
20 Jan 2007, 1:25 AM
Animal

As moderator, perhaps you should read a post thoroughly before you shoot off with an rude, undeveloped and poorly thought out response - something you did last time too.

I know how to target an iframe as I've been working with HTML for nearly ten years. However, I am a designer and not a programmer, which is why I'm asking for help with getting the iFrame to load in the content div of this border layout. Once the iframe is present, then I should be able to target it with the sort of link you suggest (and which, by the way, I never felt the need to detail as it is a given).

Furthermore, you could be a little more constructive to people who are asking for help. like stating why you think the scr is an URL that does not work? The home.asp page is present, and I can manually load it using a function such as the one seen below.


function loadHome() {
dashboardFrame = YAHOO.ext.DomHelper.append(document.body, {tag: 'iframe', frameBorder: 0, id: 'dashboardFrame', src: 'home.asp'});
dashboardPanel = new YAHOO.ext.ContentPanel(dashboardFrame, {titlebar:false, fitToFrame:true, closable:false});
layout.add('center', dashboardPanel);
}


So answer me this - what is wrong with the code that I originally posted? Why is the home.asp page not loading in the iframe within the center area?

Animal
20 Jan 2007, 1:30 AM
OK, I can't see anything wrong with that code.

Is the request to fill the iframe actually being sent?

When you bring up Firebug's "Net" tab, do you see it being GOT from the server.

When you bring up Firebug's "HTML" tab, and examine the DOM, what is the "src" attribute of the iframe?

Tym
20 Jan 2007, 1:44 AM
I don't think the request for the iframe is being sent. I know the iframe is not loading, as the page simply displays the default content of the div (some text).

I'm running Firebug 0.4.1 (latest version) within Firefox 2.0.1 and can't see a Net tab anywhere. In the DOM tab of the inspector the parentNode of the text is <div id="content" class="body body_bg_0 ylayout-active-content">. There is no mention of the iFrame in any of the tabs (Source, Style, Layout, Events and DOM)

My understanding is that the iFrame should be placed within this div... is that correct?

Tym
20 Jan 2007, 1:53 AM
By the way, I'm sorry if I flamed on a bit before. I've been struggling with this for hours and am getting rather frustrated. I'm almost tempted to recode the application in frames, because I know I can get it to work. Anyway, I wanted to say thank you - I do appreciate your help.

Animal
20 Jan 2007, 1:58 AM
s'OK. We get so many non-coders who want to write a fully AJAXy RIA, asking people to do their work for them....

The latest version of Firebug is 1.0.

It is SUPERB. You can examine all HTTP requests, headers and content, and inspect and modify the running DOM structure. It's debugger interface is excellent too - better than the Visual Studio one for IE that I used to use.

Download that, and your task will be 100 times easier.

seldon
20 Jan 2007, 4:51 AM
Hi,

Perhaps my code is of some help. I load content into an iframe, though not by specifying a source url, but by filling it with the o.responseText. See my currently work-in-progress for an example:

http://www.trendon.nl:9999/xsn/index.php

Click the 'nieuwsbrief openen' button; the center panel of the dialog is an iframe that is loaded dynamically.

Hope this is of any help,

Cheers,

Seldon

Tym
20 Jan 2007, 12:11 PM
Hi Seldon,

Thanks for the response. Your application looks fantastic! Rather than having to dig around in the javascript, would you mind posting the code that loads the iframe with the o.responseText here in the discussion forum?

Thanks
Tym

neongrau
20 Jan 2007, 1:27 PM
The latest version of Firebug is 1.0.


i was still using the current 0.4.1 too - just grabbed the 1.0beta.

OMFG this soooo cool, awesome!

Tym
20 Jan 2007, 9:46 PM
I've upgraded to FireBug 1.0.

There is still no reference to the iframe. Likewise there is no reference to the iframe being requested or got in the Net tab.

Using the HTML tab all I still see is the container div. My understanding is that the iFrame should be placed within this div... is that correct?

Animal
20 Jan 2007, 11:57 PM
Ah, that did it! Firebug saves the day!

The COntentPanel config is wrong:



layout.add('center', new YAHOO.ext.ContentPanel('content', {tag: 'iframe', src: 'home.asp'}));


should be:



layout.add('center', new YAHOO.ext.ContentPanel('content', {fitToFrame:true, autocreate: {
tag: 'iframe', src: 'home.asp'}}));


Look at the configs of ContentPanel, they are a special ContentPanel-specific set of props, not a DomHelper config. You put the DomHelper config in autoCreate.

Tym
22 Jan 2007, 2:03 AM
Hey

The suggested changes have been made but I'm still not seeing the iframe. This is after creating a cut down version of the page as seen at at http://harvester.intulogica.com/Template_test_basic.htm and reproduced below.

As before, Firebug does not show any request for the iFrame at all. I'm sure I've something simple wrong, but I can't find it. Help?



<html>
<head>
<title>Layout Test</title>


<script type="text/javascript" src="http://harvester.intulogica.com/jscript/yahoo-min.js"></script>
<script type="text/javascript" src="http://harvester.intulogica.com/jscript/dom-min.js"></script>
<script type="text/javascript" src="http://harvester.intulogica.com/jscript/event-min.js"></script>
<script type="text/javascript" src="http://harvester.intulogica.com/jscript/animation-min.js"></script>
<script type="text/javascript" src="http://harvester.intulogica.com/jscript/container-min.js"></script>
<script type="text/javascript" src="http://harvester.intulogica.com/jscript/utilities.js"></script>
<script type="text/javascript" src="http://harvester.intulogica.com/jscript/yui-ext.js"></script>
<script language="javascript">
Example = function(){
return {
init : function(){
layout = new YAHOO.ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 72
},
south: {
split:false,
initialSize: 30
},
west: {
split:false,
initialSize: 180,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 180,
autoScroll: true

},
center: {
autoScroll: true

}
});
layout.beginUpdate();
layout.add('north', new YAHOO.ext.ContentPanel('header', {fitToFrame:true}));
layout.add('south', new YAHOO.ext.ContentPanel('footer', {fitToFrame:true}));
layout.add('west', new YAHOO.ext.ContentPanel('nav', {fitToFrame:true}));
layout.add('center', new YAHOO.ext.ContentPanel('content', {fitToFrame:true, autocreate: {
tag: 'iframe', src: 'home.htm'}}))
layout.endUpdate();
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>

<link rel="stylesheet" type="text/css" href="http://harvester.intulogica.com/css_new/container.css" />
<link rel="stylesheet" type="text/css" href="http://harvester.intulogica.com/css_new/reset-fonts-grids.css"/>
<link rel="stylesheet" type="text/css" href="http://harvester.intulogica.com/css_new/tabs.css"/>
<link rel="stylesheet" type="text/css" href="http://harvester.intulogica.com/css_new/layout.css"/>
<link rel="stylesheet" type="text/css" href="http://harvester.intulogica.com/css_new/harvester.css" />
</head>
<body>
<div id="container">
<div id="header" class="ylayout-inactive-content" >Header Goes here </div>
<div id="nav" class="ylayout-inactive-content">Nav goes here</div>
<div id="content" class="ylayout-inactive-content body body_bg_0" name="content">Content goes here. It should be replaced with the content of the home.htm file.</div>
<div id="footer" class="ylayout-inactive-content">Footer goes here. </div>
</div>
</body>
</html>

Animal
22 Jan 2007, 2:09 AM
Typo. The config property is autoCreate.

from the first few lines of ContentPanel.js:



if(!this.el && config && config.autoCreate){
if(typeof config.autoCreate == 'object'){
if(!config.autoCreate.id){
config.autoCreate.id = el;
}
this.el = YAHOO.ext.DomHelper.append(document.body,
config.autoCreate, true);
}else{
this.el = YAHOO.ext.DomHelper.append(document.body,
{tag: 'div', cls: 'ylayout-inactive-content', id: el}, true);
}
}

Animal
22 Jan 2007, 2:14 AM
You are attempting to autocreate the "content" div, but you already have one!????

Tym
22 Jan 2007, 2:52 AM
Right. Now we are seeing some results.

I changed autocreate to autoCreate and I removed the content div - and now the iFrame appears to be loading. I was not sure if the div should have been there or not... which was why I twice asked if "the iFrame should be placed within this div".

This leads me to what I hope is my last question - how can I assign CSS classes and a name to the iFrame so that I can target it. I tried

layout.add('center', new YAHOO.ext.ContentPanel('content', {fitToFrame:true, autoCreate: {
tag: 'iframe', src: 'home.htm', name: 'content', class: 'ylayout-inactive-content body body_bg_0'}}))

But this did not work

Tym
22 Jan 2007, 2:54 AM
Nevermind. That did work. The browser had not refreshed properly.

Animal
22 Jan 2007, 3:03 AM
Check with Firebug whether the iframe is getting the classnames you expect.

The usual DomHelper config option for class is "cls".

Tym
22 Jan 2007, 3:09 AM
Almost perfect. Now all I need to do is get rid of the border around the iframe....

Tym
22 Jan 2007, 3:13 AM
By the way, the iFrame is now getting the correct CSS class - but there is still a border around it in IE. I think I need to add a frameborder attribute.

Tym
22 Jan 2007, 3:16 AM
This did the trick!

layout.add('center', new YAHOO.ext.ContentPanel('content', {fitToFrame:true, autoCreate: {
tag: 'iframe', src: 'home.htm', id: 'content', name:'content', cls:'body body_bg_0', frameborder:'no'}}))

It's all working fine now. Thanks Animal and everyone else. I wish this was explained a bit more in the doco or in the examples - it would have saved lots of frustration. nevermind...

Animal
22 Jan 2007, 3:22 AM
If you go through the blog entries in which Jack introduces the various widgets and classes - every one has a worked example. You can pick up a lot from there.

The latest documentation tool does extract and produce a section for config options. They just have to be annotated by Jack (who's coding like crazy right now)

Animal
22 Jan 2007, 3:25 AM
Like this for DomHelper: http://www.jackslocum.com/blog/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/

This for Layout and Regions: http://www.jackslocum.com/blog/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/