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

[ydn-javascript] panel and ajaxcall

Expand Messages
  • Martin Tschofen
    I m stuck. I m trying to create a simple panel when a user clicks on a link (there will be many of the same type of links). When user clicks on it, an ajax
    Message 1 of 3 , Oct 7, 2007
    • 0 Attachment
      I'm stuck. I'm trying to create a simple panel when a user clicks on a link (there will be many of the same type of links). When user clicks on it, an ajax call will retrieve content and display it in one and the same panel.

      I can't get the panel to appear when the ajax call cames back. I am able to just show a panel after the click, but not if I use the ajax call.
      Firebug tells me that the ajax call comes back with the content however it never reaches the "getHelp()" function to render it.

      Any help would be great...martin

      Code:
      <?xml version="1.0" encoding="utf-8"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
              "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml ">
          <head>
          <title>test bubble</title>
              <script type="text/javascript" src="../yui/build/utilities/utilities.js"></script>
              <script type="text/javascript" src="../yui/build/container/container.js"></script>       
          <link href="../yui/build/container/assets/container.css" rel="stylesheet"/>
         
              <script type="text/javascript">
      //declare CMW namespace
      var CMW = window.CMW || {};
          CMW.Portlet = function() {
              var YuD = YAHOO.util.Dom;
              var YuE = YAHOO.util.Event;
              var YuP = YAHOO.widget.Panel;
              //public
              var my = {
                  init : function () {
                      var widgets = YuD.getElementsByClassName("plWidget", "div", "", function() {
                          YuE.on(this, 'click', function(ev) {
                              var tar = YuE.getTarget(ev);
                              if(tar.className == 'lkHelp') {
                                  bubble.cfg.setProperty('context',[tar,'tl','br']);
                                  contentParams = "testing";
                                  var sUrl = "file:///C:/testing/testresponse.html";
                                  var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, {success:this.getHelp, failure: this.asyncError, timeout:1500});
                                  //bubble.show(); <----THIS WOULD OPEN THE PANEL
                              }
                          });
                      });
                      //set bubble
                      var bubble = new YuP("i-bubble",
                          {
                              width:"200px",
                              close:true, 
                              visible:false,
                              draggable:true,
                              constraintoviewport:true,
                              effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration: 0.5}
                          }
                      );
                      bubble.render();
                  },
                 
                  getHelp : function(o){
                      if(o.responseText !== undefined){
                          this.bubble.setBody(o.responseText);
                          this.bubble.show();
                      }
                  },
                 
                  asyncError : function(o){
                      if(o.responseText !== undefined){
                          alert( o.statusText);
                      }
                  }
              };
              return my;
          }();
      YAHOO.util.Event.onDOMReady(CMW.Portlet.init, CMW.Portlet, true);   

      </script>
      </head>
      <body>
      <div class="plWidget" style="border:1px solid green;width:400px">
          <a class="lkHelp">Open bubble</a>
      </div>
      <div id="i-bubble">
          <div class="hd">Header One</div> 
          <div class="bd">Body One</div> 
          <div class="ft">Footer One</div> 
      </div>
      </body>
      </html>

    • Caridy Patiño Mayea
      Hi Martin: Look at this: var my = { init : function () { var widgets = YuD.getElementsByClassName( plWidget , div , , function() { YuE.on(this, click ,
      Message 2 of 3 , Oct 8, 2007
      • 0 Attachment
        Hi Martin:

        Look at this:

        var my = {
        init : function () {
        var widgets = YuD.getElementsByClassName("plWidget", "div", "", function() {
        YuE.on(this, 'click', function(ev) {
        // the "this" reference here will correspond to the click handle function,
        but not my object...
        var request = YAHOO.util.Connect.asyncRequest('GET', sUrl,
        {success:this.getHelp, failure: this.asyncError, timeout:1500});
        // You should use:
        var request = YAHOO.util.Connect.asyncRequest('GET', sUrl,
        {success:my.getHelp, failure: my.asyncError, timeout:1500});
        });
        });
        .......
        }
        };

        That's all, just be careful with the closures and the "THIS" reference. There is a common
        technique for dealing with this kind of issues:

        var my = function () {
        var that = this;
        console.log ( (that !== this) ); // will be equivalent...
        YAHOO.util.Event.on('mylink', 'click', function(ev) {
        console.log ( that );
        console.log ( (that !== this) ); // will be different
        });
        }

        Best Regards,
        Caridy (caridy at gmail.com)
        http://www.bubbling-library.com/

        --- In ydn-javascript@yahoogroups.com, "Martin Tschofen" <martin.tschofen@...> wrote:
        >
        > I'm stuck. I'm trying to create a simple panel when a user clicks on a link
        > (there will be many of the same type of links). When user clicks on it, an
        > ajax call will retrieve content and display it in one and the same panel.
        >
        > I can't get the panel to appear when the ajax call cames back. I am able to
        > just show a panel after the click, but not if I use the ajax call.
        > Firebug tells me that the ajax call comes back with the content however it
        > never reaches the "getHelp()" function to render it.
        >
        > Any help would be great...martin
        >
        > Code:
        > <?xml version="1.0" encoding="utf-8"?>
        > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        > "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
        > <html xmlns="http://www.w3.org/1999/xhtml">
        > <head>
        > <title>test bubble</title>
        > <script type="text/javascript"
        > src="../yui/build/utilities/utilities.js"></script>
        > <script type="text/javascript"
        > src="../yui/build/container/container.js"></script>
        > <link href="../yui/build/container/assets/container.css"
        > rel="stylesheet"/>
        >
        > <script type="text/javascript">
        > //declare CMW namespace
        > var CMW = window.CMW || {};
        > CMW.Portlet = function() {
        > var YuD = YAHOO.util.Dom;
        > var YuE = YAHOO.util.Event;
        > var YuP = YAHOO.widget.Panel;
        > //public
        > var my = {
        > init : function () {
        > var widgets = YuD.getElementsByClassName("plWidget", "div",
        > "", function() {
        > YuE.on(this, 'click', function(ev) {
        > var tar = YuE.getTarget(ev);
        > if(tar.className == 'lkHelp') {
        > bubble.cfg.setProperty
        > ('context',[tar,'tl','br']);
        > contentParams = "testing";
        > var sUrl =
        > "file:///C:/testing/testresponse.html";
        > var request =
        > YAHOO.util.Connect.asyncRequest('GET',
        > sUrl, {success:this.getHelp, failure:this.asyncError, timeout:1500});
        > //bubble.show(); <----THIS WOULD OPEN THE PANEL
        > }
        > });
        > });
        > //set bubble
        > var bubble = new YuP("i-bubble",
        > {
        > width:"200px",
        > close:true,
        > visible:false,
        > draggable:true,
        > constraintoviewport:true,
        > effect:{effect:YAHOO.widget.ContainerEffect.FADE,
        > duration: 0.5}
        > }
        > );
        > bubble.render();
        > },
        >
        > getHelp : function(o){
        > if(o.responseText !== undefined){
        > this.bubble.setBody(o.responseText);
        > this.bubble.show();
        > }
        > },
        >
        > asyncError : function(o){
        > if(o.responseText !== undefined){
        > alert(o.statusText);
        > }
        > }
        > };
        > return my;
        > }();
        > YAHOO.util.Event.onDOMReady(CMW.Portlet.init, CMW.Portlet, true);
        >
        > </script>
        > </head>
        > <body>
        > <div class="plWidget" style="border:1px solid green;width:400px">
        > <a class="lkHelp">Open bubble</a>
        > </div>
        > <div id="i-bubble">
        > <div class="hd">Header One</div>
        > <div class="bd">Body One</div>
        > <div class="ft">Footer One</div>
        > </div>
        > </body>
        > </html>
        >
      • Martin Tschofen
        I see. I thought I tried my but that gave me no properties for widget error. I ll try it tomorrow when I have access to the code again. Thanks...martin ...
        Message 3 of 3 , Oct 8, 2007
        • 0 Attachment
          I see. I thought I tried 'my' but that gave me "no properties for widget" error. I'll try it tomorrow when I have access to the code again.

          Thanks...martin

          On 10/8/07, Caridy Patiño Mayea <caridy@...> wrote:

          Hi Martin:

          Look at this:

          var my = {
          init : function () {
          var widgets = YuD.getElementsByClassName("plWidget", "div", "", function() {
          YuE.on(this, 'click', function(ev) {
          // the "this" reference here will correspond to the click handle function,
          but not my object...
          var request = YAHOO.util.Connect.asyncRequest('GET', sUrl,
          {success:this.getHelp, failure: this.asyncError, timeout:1500});
          // You should use:
          var request = YAHOO.util.Connect.asyncRequest('GET', sUrl,
          {success:my.getHelp, failure: my.asyncError, timeout:1500});
          });
          });
          .......
          }
          };

          That's all, just be careful with the closures and the "THIS" reference. There is a common
          technique for dealing with this kind of issues:

          var my = function () {
          var that = this;
          console.log ( (that !== this) ); // will be equivalent...
          YAHOO.util.Event.on('mylink', 'click', function(ev) {
          console.log ( that );
          console.log ( (that !== this) ); // will be different
          });
          }

          Best Regards,
          Caridy (caridy at gmail.com)
          http://www.bubbling-library.com/



          --- In ydn-javascript@yahoogroups.com, "Martin Tschofen" <martin.tschofen@...> wrote:
          >
          > I'm stuck. I'm trying to create a simple panel when a user clicks on a link
          > (there will be many of the same type of links). When user clicks on it, an
          > ajax call will retrieve content and display it in one and the same panel.
          >
          > I can't get the panel to appear when the ajax call cames back. I am able to
          > just show a panel after the click, but not if I use the ajax call.
          > Firebug tells me that the ajax call comes back with the content however it
          > never reaches the "getHelp()" function to render it.
          >
          > Any help would be great...martin
          >
          > Code:
          > <?xml version="1.0" encoding="utf-8"?>
          > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
          > "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
          > <html xmlns="http://www.w3.org/1999/xhtml">
          > <head>
          > <title>test bubble</title>
          > <script type="text/javascript"
          > src="../yui/build/utilities/utilities.js"></script>
          > <script type="text/javascript"
          > src="../yui/build/container/container.js"></script>
          > <link href="../yui/build/container/assets/container.css"
          > rel="stylesheet"/>
          >
          > <script type="text/javascript">
          > //declare CMW namespace
          > var CMW = window.CMW || {};
          > CMW.Portlet = function() {
          > var YuD = YAHOO.util.Dom;
          > var YuE = YAHOO.util.Event;
          > var YuP = YAHOO.widget.Panel;
          > //public
          > var my = {
          > init : function () {
          > var widgets = YuD.getElementsByClassName("plWidget", "div",
          > "", function() {
          > YuE.on(this, 'click', function(ev) {
          > var tar = YuE.getTarget(ev);
          > if(tar.className == 'lkHelp') {
          > bubble.cfg.setProperty
          > ('context',[tar,'tl','br']);
          > contentParams = "testing";
          > var sUrl =
          > "file:///C:/testing/testresponse.html";
          > var request =
          > YAHOO.util.Connect.asyncRequest('GET',
          > sUrl, {success:this.getHelp, failure:this.asyncError, timeout:1500});
          > //bubble.show(); <----THIS WOULD OPEN THE PANEL
          > }
          > });
          > });
          > //set bubble
          > var bubble = new YuP("i-bubble",
          > {
          > width:"200px",
          > close:true,
          > visible:false,
          > draggable:true,
          > constraintoviewport:true,
          > effect:{effect:YAHOO.widget.ContainerEffect.FADE,
          > duration: 0.5}
          > }
          > );
          > bubble.render();
          > },
          >
          > getHelp : function(o){
          > if(o.responseText !== undefined){
          > this.bubble.setBody(o.responseText);
          > this.bubble.show();
          > }
          > },
          >
          > asyncError : function(o){
          > if(o.responseText !== undefined){
          > alert(o.statusText);
          > }
          > }
          > };
          > return my;
          > }();
          > YAHOO.util.Event.onDOMReady(CMW.Portlet.init, CMW.Portlet, true);
          >
          > </script>
          > </head>
          > <body>
          > <div class="plWidget" style="border:1px solid green;width:400px">
          > <a class="lkHelp">Open bubble</a>
          > </div>
          > <div id="i-bubble">
          > <div class="hd">Header One</div>
          > <div class="bd">Body One</div>
          > <div class="ft">Footer One</div>
          > </div>
          > </body>
          > </html>
          >


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