4 Replies Latest reply: Jul 4, 2011 3:41 PM by 610880 RSS

    Prealod iFrame  - Loading image

    610880
      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
          anyone?
          • 2. Re: Prealod iFrame  - Loading image
            vee
            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
              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
                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