Page 1 of 3 123 LastLast
Results 1 to 10 of 23

Thread: Loading content into iFrame

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    28

    Default Loading content into iFrame

    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>

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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?

    Code:
    foo
    <iframe name="iframename></iframe>
    Also, setting the src attribute to a URL works.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    28

    Default

    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.

    Code:
    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?

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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?

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    28

    Default

    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?

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    28

    Default

    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.

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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.

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    225

    Default

    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

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    28

    Default

    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

  10. #10
    Ext JS Premium Member neongrau's Avatar
    Join Date
    Mar 2007
    Posts
    282

    Default

    Quote Originally Posted by Animal
    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!

Page 1 of 3 123 LastLast

Similar Threads

  1. iframe + script loading
    By Choleriker in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 15 Jun 2011, 4:14 PM
  2. Loading dialog when pulling page from iframe
    By namespace in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 8 Jul 2007, 3:48 AM
  3. Replies: 3
    Last Post: 18 Mar 2007, 3:52 PM
  4. Loaing external content into Iframe and Firefox
    By bidyut in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 9 Dec 2006, 12:22 AM
  5. loading tab panel content
    By orla in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 4 Oct 2006, 7:24 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •