This discussion is archived
4 Replies Latest reply: Jul 4, 2011 1:41 PM by 610880 RSS

Prealod iFrame  - Loading image

610880 Newbie
Currently Being Moderated
Hi,
I have implemented a jQuery Modal Dialog with an iFrame page inside and I was thinking to add a "loading" functionality to this dialog using GIF image.
My iFrame is implemented the way it is described here: {message:id=9426960} and I know that I can do this "loading thing" directly in my iFrame page this way:
[http://ayasenchuk.blogspot.com/2010/02/apex-page-with-animated-loading-modal.html]

But I want it do right in my dialog script, like it is done here:

http://plugins.jquery.com/content/jquery-ui-frame-dialog-loading-pane
or here:
http://www.blog.highub.com/javascript/javascript-library/preload-iframe-using-javascript/

or even here:
http://stackoverflow.com/questions/2939314/use-jquery-with-and-iframe-progress-indicator

Is that possible, does anyone has experienced this?

Thanks
  • 1. Re: Prealod iFrame  - Loading image
    610880 Newbie
    Currently Being Moderated
    anyone?
  • 2. Re: Prealod iFrame  - Loading image
    vee Guru
    Currently Being Moderated
    The simlest implementation, could be using a hidden div having the animation GIF and and place it over the dialog modal window(using another dialog window even or inside the modal.
    In the iframe page add an onload JS code that hides the parent(window)'s element.

    I have described once method to show/hide such a loader image here: {message:id=9337500}

    the only change would be that you call the hide animation from the iframe page

    So in the child page's "execute when page loads" section (or any other onload hook)
    parent.hide_Anim ()
    or
    parent.$('#apexir_LOADER').hide();
    If you want a more elegant solution, check the following link
    http://thecrumb.com/2011/01/21/simple-loading-dialog-wjquery-ui/
    Here's a good discussion on some of these techniques with UI dialog
    http://blog.nemikor.com/category/jquery-ui/jquery-ui-dialog/
    And a plugin that does it directly
    http://tdryan.blogspot.com/2010/09/jquery-ui-frame-dialog-loading-pane.html
  • 3. Re: Prealod iFrame  - Loading image
    610880 Newbie
    Currently Being Moderated
    Hi Vee,
    Thank you for ypur reply and posted ideas to resolve my issue.
    I really like the last option (the Plug-in) and actually before posting this thread I did contact Dna (developer of this Plug-In) to see how it is working.
    So, I did try to put it into my app where it looks like this:
    <link rel="stylesheet" href="http://tdanryan.com/demo/framedialog/assets/css/shpblack/jquery-ui-1.8.4.custom.css" 
        type="text/css" media="screen" charset="utf-8" />
    <script type="text/javascript" src="http://tdanryan.com/demo/framedialog/assets/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://tdanryan.com/demo/framedialog/assets/js/jquery-ui-1.8.4.custom.min.js"></script>
    <script type="text/javascript" src="http://tdanryan.com/demo/framedialog/assets/js/jquery-framedialog-1.1.2.js"></script>
    <style type="text/css">
    .loading-image { background: transparent url('http://tdanryan.com/demo/framedialog/assets/im/progress-indicator-alpha.gif') 
    no-repeat center center; }         
    </style>
    <script type="text/javascript">
         var openNewInv = function(){
         var apexSession = $v('pInstance');
         var apexAppId = $v('pFlowId');
         var assetNumber = $v('P3_ID');
         var url = "http://son-orcl2:8080/apex/f?p="+apexAppId+":15:"+apexSession+"::NO:15:P15_ASSET_ID:"+assetNumber;
                    
                    jQuery.FrameDialog.create({
                        url: url,
                        loadingClass: 'loading-image',
                        title: 'Create Inventory Record',
                        width: 630,
                        height: 360,
                        autoOpen: false,
                        stack: true,
                        autoResize: true,
                        draggable: true,
                        buttons: {
                            "Cancel": function(){ $(this).dialog("close"); }  
                        },
                        open: function(event, ui){
                            // to hide a button panel
                            $(".ui-dialog-buttonpane").hide();
                            // this disables resizing without the iframe resized to content size.
                            $(".ui-resizable-handle").hide();
                        },
                        close: function(event, ui){                               
                         
                        }                      
                    });
                };
                $(function(){ 
                    openNewInv();                            
                            });
                
            </script>
    It just gave me the errors (see below, the same as from my workspace test)


    I did try to implement this solution on apex.oracle.com so it will load yahoo.com (instead of my application page link) in my modal window as an iFrame and will show a loading image while preloading wthe iFrame web site. But id doesnt work. I did use FireBug to see what is happening and it gives me errors when page is loading:
    elem.document.body is null
                    elem.document.body[ "client" + name ] || docElemProp;                      jquery-1.5.2.js (line 8346)
    and
    jQuery.FrameDialog.create is not a function
                    close: function(event, ui){                                                                f?p=32...61::YES (line 49)
    and when I click on "Create" to open my modal popup it gives:
    jQuery.FrameDialog.create is not a function
                    close: function(event, ui){                                                               f?p=32...61::YES (line 48)
    Here is my workspace link and credentioal so u can see my script.

    [http://apex.oracle.com/pls/apex/f?p=32646]
    user: guest
    psw: apex_demo

    Thanks
  • 4. Re: Prealod iFrame  - Loading image
    610880 Newbie
    Currently Being Moderated
    OK, all fixed. It is working now. If anyone is interested please see my previous post for workspace url and credentials.
    The only problem I have is that it is working under Apex 4 and not working in Apex 3, any suggestions?
    Thanks

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points