Loading ...
Sorry, an error occurred while loading the content.
 

Trying to Load NEW content into a div with YUI connection - with wait panel

Expand Messages
  • aspwiz2000
    I am now banging my head up against a wall.... I have a page with some content in a that I would like to change when a link is clicked. Whilst the new
    Message 1 of 2 , Jan 11, 2007
      I am now banging my head up against a wall....

      I have a page with some content in a <div> that I would like to change when a link is clicked.  Whilst the new content is loading, I would like to show a loading image.  This needs to be done using the existing div, and not an iframe.

      I have it all working except the ajax Call bit isnt working. The loading thing works though.  You click the link and the loading bar just stays there foreever... the new content either doesnt load, or just doesnt display.

      Could anyone give me an example that achieves what I want to do?

      Or... if anyone is feeling really helpful (or bored), tell me whats wrong with my code?

      The initWait() function is fired by clicking a link, and the content div has id of 'maincontent'

      all of the YUI javascript includes have been loaded, and here is the additional javascript code:-

      <script>
              
              function initWait() {
                  YAHOO.example.panel.wait =
                          new YAHOO.widget.Panel("wait",
                                          { width: "240px",
                                            fixedcenter: true,
                                            underlay: "shadow",
                                            close: false,
                                            draggable: false,
                                            modal: true,
                                            zindex: 100,
                                            effect: {effect:YAHOO.widget.ContainerEffect.FADE, duration:0.5}
                                            }
                                           );
                  YAHOO.example.panel.wait.setHeader("Loading, please wait...");
                  YAHOO.example.panel.wait.setBody("<img src=\"http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/gp/rel_interstitial_loading.gif\"/>");
                  
                  YAHOO.example.panel.wait.showMaskEvent.subscribe(fixMask, YAHOO.example.panel.wait, true);
                  var content = YAHOO.util.Dom.get('maincontent');
                  YAHOO.example.panel.wait.render(content);
                  
                          var callback = {
                              success : function(o) {
                                  content.innerHTML = o.responseText;
                                  content.style.visibility = "visible";
                                  YAHOO.example.panel.wait.hide();
                              },
                              failure : function(o) {
                                  content.innerHTML = o.responseText;
                                  content.style.visibility = "visible";
                                  content.innerHTML = "CONNECTION FAILED!";
                                  YAHOO.example.panel.wait.hide();
                              }
                          }
                  // Show the Panel
                  YAHOO.example.panel.wait.show();
                  
                  // Connect to our data source and load the data
                  var conn = YAHOO.util.Connect.asyncRequest("GET", "http://developer.yahoxo.com/yui/examples/container/assets/somedata.php?r=" + new Date().getTime(), callback);
                  // setTimeout('YAHOO.example.panel.wait.hide()', 5000);
                  content.innerHTML = o.responseText;
                                  content.style.visibility = "visible";
              }
              
              function fixMask() {
                  if (this.mask) {
                      var cover = this.element.parentNode.id;
                      var xy = YAHOO.util.Dom.getXY(cover);
                      this.mask.style.height = YAHOO.util.Dom.getStyle(cover, 'height');
                      this.mask.style.width = YAHOO.util.Dom.getStyle(cover, 'width');
                      YAHOO.util.Dom.setXY(this.mask, xy);
                  }
              }
              
              YAHOO.widget.Overlay.prototype.center = function() {
          /*
          this.element.style.left = parseInt(x, 10) + "px";
          this.element.style.top = parseInt(y, 10) + "px";
          this.syncPosition();
          this.cfg.refireEvent("iframe");
          */
          var elementWidth = this.element.offsetWidth;
          var elementHeight = this.element.offsetHeight;

          if (this.element.parentNode == document.body) {
              var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
              var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
              var viewPortWidth = YAHOO.util.Dom.getClientWidth();
              var viewPortHeight = YAHOO.util.Dom.getClientHeight();
              var x = (viewPortWidth / 2) - (elementWidth / 2) + scrollX;
              var y = (viewPortHeight / 2) - (elementHeight / 2) + scrollY;
          } else {
              var scrollX = 0;
              var scrollY = 0;
              var cover = this.element.parentNode.id;
              var coverXY = YAHOO.util.Dom.getXY(cover);
              var viewPortWidth = parseInt(YAHOO.util.Dom.getStyle(cover, 'width'));
              var viewPortHeight = parseInt(YAHOO.util.Dom.getStyle(cover, 'height'));
              var x = ((viewPortWidth / 2) - (elementWidth / 2) + scrollX) + coverXY[0];
              var y = ((viewPortHeight / 2) - (elementHeight / 2) + scrollY) + coverXY[1];
          }
          
          this.element.style.left = parseInt(x, 10) + "px";
          this.element.style.top = parseInt(y, 10) + "px";
          this.syncPosition();

          this.cfg.refireEvent("iframe");
      };

          YAHOO.widget.Panel.prototype.sizeMask = function() {
              if (this.mask) {
                  if (this.element.parentNode == document.body) {
                      this.mask.style.height = YAHOO.util.Dom.getDocumentHeight()+"px";
                      this.mask.style.width = YAHOO.util.Dom.getDocumentWidth()+"px";
                  } else {
                      var cover = this.element.parentNode.id;
                      var xy = YAHOO.util.Dom.getXY(cover);
                      this.mask.style.height = YAHOO.util.Dom.getStyle(cover, 'height');
                      this.mask.style.width = YAHOO.util.Dom.getStyle(cover, 'width');
                      YAHOO.util.Dom.setXY(this.mask, xy);
                  }
              }
          };
                      YAHOO.namespace("example.panel");
              </script>

      Thanks everyone for any help you can offer.

      Rob
    • Satyen Desai
      Hi Rob, Do you see any JavaScript errors? There are a couple of things I see in your code which may result in JavaScript errors. The first one would also
      Message 2 of 2 , Jan 12, 2007
        Hi Rob,
        Do you see any JavaScript errors?

        There are a couple of things I see in your code which may result in
        JavaScript errors. The first one would also result in the 'wait'
        panel not being hidden.

        1). You use an absolute URL for the async
        request: "http://developer.yahoxo.com/".

        Is the page you're running this code from being served from the same
        domain?

        If not, the browser will not let you make a call to another domain
        using the XHR object and you should see a Security/Permission
        related JavaScript error as a result.

        2). The 2nd line below will also result in a JavaScript error,
        since 'o' will be undefined here.

        var conn = YAHOO.util.Connect.asyncRequest("GET", "http://dev..
        content.innerHTML = o.responseText;

        Hope that helps,

        Satyen
      Your message has been successfully submitted and would be delivered to recipients shortly.