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

Re: Putting an external file in a Layout

Expand Messages
  • Caridy Patino
    Hello Abhay, I think you have few options here, I will explain 2 of them: 1. In the content of the top panel (loaded by the dispatcher), you can have a link
    Message 1 of 10 , Aug 25, 2008
    • 0 Attachment
      Hello Abhay,

      I think you have few options here, I will explain 2 of them:

      1. In the content of the top panel (loaded by the dispatcher), you can
      have a link like this one:

      <a id='login' href="login.php">login</a>

      And then you can add your own listener to that link:

      <script>
      YAHOO.util.Event.on('login', 'click', function(e) {
      // display the dialog
      });
      </script>

      2. You can define a global behavior using the Bubbling Core
      (bubbling.js), creating a adding a new default action (in your
      application core):

      YAHOO.Bubbling.addDefaultAction('actionLogin', function() {
      /* display the dialog */
      });

      and then all the links like this one:

      <a href="login.php" class="actionLogin">login</a>

      will fire the default action on click, and you don't need to define
      listeners directly :-)

      Best Regards,
      Caridy Patino (caridy at yahoo-inc.com)
      Yahoo! LATAM

      --- In ydn-javascript@yahoogroups.com, "abhaysobti" <abhaysobti@...>
      wrote:
      >
      >
      > Thanks Caridy,
      >
      > Aah but I just make it work :
      >
      > I have a Layout with 4 Units. After the layout is rendered, I populate
      > the Units with contents from external HTML files. Since the Layout
      > Manager does not have support for external files, a use a function to
      > use a Despatcher to load the contents into the units.
      >
      > The function is :
      > function LoadUrlInUnitByPositionUsingDispatcher(cUrl,cUnit) {
      > var oUnit=layout.getUnitByPosition(cUnit);
      > YAHOO.plugin.Dispatcher.fetch ( oUnit.body, cUrl );
      > }
      >
      > Now , say the top panel is a HTML file which needs a "Logout" link. When
      > a user clicks this link, a SimpleDialog needs to ask the user whether he
      > really wants to logout. Can you tell me what should be the code in this
      > HTML page to make it work?
      >
      > Thanks for your immense effort in trying to solve my problem. Thanks in
      > advance
      >
      > Abhay
      >
      >
      > --- In ydn-javascript@yahoogroups.com, "Caridy Patino" <caridy@>
      > wrote:
      > >
      > > Hello,
      > >
      > > I think I know what is happening. The dispatcher use an Anonymous
      > > function to execute inline scripts, which mean that your variables are
      > > not global. For example:
      > >
      > > <script>
      > > function init () {
      > > // your stuff here
      > > }
      > > </script>
      > >
      > > Will be transformed into this:
      > > <script>
      > > (function() {
      > > function init () {
      > > // your stuff here
      > > }
      > > })();
      > > </script>
      > >
      > > So, "init" init is not a global variable and is only accessible within
      > > the same script chunk.
      > >
      > > So to tackle this issue you can use namespacing:
      > >
      > > <script>
      > > YAHOO.example.init = function () {
      > > // your stuff here
      > > }
      > > </script>
      > >
      > > Or the nasty trick to force it to global:
      > > <script>
      > > window.init = function () {
      > > // your stuff here
      > > }
      > > </script>
      > >
      > > P.S. I guess you should use onDOMReady instead of onLoad.
      > >
      > > Best Regards,
      > > Caridy Patino
      > >
      > > --- In ydn-javascript@yahoogroups.com, "abhaysobti" abhaysobti@
      > > wrote:
      > > >
      > > >
      > > > Wrong :
      > > >
      > > > Ok , I managed to load an external HTML file, but
      > > >
      > > > But if the loaded page has code like :
      > > >
      > > > YAHOO.util.Event.addListener(window,"load",init)
      > > >
      > > > doesn't fire the init function
      > > >
      > > > WHY?
      > > >
      > > > Thanks
      > > >
      > > >
      > > > --- In ydn-javascript@yahoogroups.com, "abhaysobti" <abhaysobti@>
      > > > wrote:
      > > > >
      > > > >
      > > > > Right,
      > > > >
      > > > > It seems to be working now : I wrote another function which loads
      > an
      > > > > external file into a Unit of a Layout.
      > > > >
      > > > > function LoadUrlInUnitByPositionUsingDispatcher(cUrl,cUnit) {
      > > > > var oUnit=layout.getUnitByPosition(cUnit);
      > > > > YAHOO.plugin.Dispatcher.fetch ( oUnit.body, cUrl );
      > > > > }
      > > > >
      > > > > Abhay
      > > > >
      > > > >
      > > > > --- In ydn-javascript@yahoogroups.com, "abhaysobti" abhaysobti@
      > > > > wrote:
      > > > > >
      > > > > >
      > > > > > Thanks for the reply guys,
      > > > > >
      > > > > > I wrote this function which is used by passing a URL and the
      > Unit
      > > > > > Position and the function asynchronously populates the Unit with
      > the
      > > > > > content of the Url [which is simply an HTML file]. What if I
      > want to
      > > > > > place a DataTable in this file? In that case, I will have to
      > HTML
      > > > file
      > > > > > to contain JavaScript to create the DataTable and the
      > DataSource.
      > > > > > However, this doesn't happen.
      > > > > >
      > > > > > Frankly, I love the YUI. It is a fantastic framework with Great
      > > > > features
      > > > > > and a clearcut roadmap. I also evaluated "DHTMLSuite" framework.
      > One
      > > > > > good thing is , it can load external HTML files on the fly in
      > any
      > > > > panel
      > > > > > while creation itself.
      > > > > >
      > > > > > //------------------------------------------------------------
      > > > > > // Abhay :
      > > > > > function LoadUrlInUnitByPosition(cUrl,cPosition) {
      > > > > >
      > > > > > // We first create a callback object. Note that we also set the
      > UNIT
      > > > > > argument to the
      > > > > > // name of the UNIT which needs to be populated with the
      > response.
      > > > > > var callback=
      > > > > > {
      > > > > > success:LoadUrlInUnitByPositionSuccess,
      > > > > > failure:LoadUrlInUnitByPositionFailure,
      > > > > > argument:{Unit:cPosition}
      > > > > > }
      > > > > >
      > > > > > // Now we hit the server with an asynchronous request
      > > > > > var
      > request=YAHOO.util.Connect.asyncRequest('GET',cUrl,callback);
      > > > > >
      > > > > > }
      > > > > >
      > > > > > // Success Handler
      > > > > > var LoadUrlInUnitByPositionSuccess=function(o){
      > > > > > // We first identify the Unit which needs to be popyulated with
      > the
      > > > > > response from the
      > > > > > // server.
      > > > > > // Note that "layout" is an object defined in the main page of
      > the
      > > > > html
      > > > > > file.
      > > > > > var oUnit=layout.getUnitByPosition(o.argument.Unit);
      > > > > > oUnit.set('body',o.responseText);
      > > > > > }
      > > > > > // Failure handler.
      > > > > > var LoadUrlInUnitByPositionFailure=function(o){
      > > > > > // We first identify the Unit which needs to be popyulated with
      > the
      > > > > > response from the
      > > > > > // server.
      > > > > > var oUnit=layout.getUnitByPosition(o.argument.Unit);
      > > > > > oUnit.set('body','<b>Error : Page could not be loaded</b><br>' +
      > > > > 'Error
      > > > > > Reported by Ajax : ' + o.statusText);
      > > > > > }
      > > > > > //------------------------------------------------------------
      > > > > >
      > > > > > I need and an urgent solution.
      > > > > >
      > > > > > Thanks for the help !!
      > > > > >
      > > > > > Abhay
      > > > > >
      > > > > > --- In ydn-javascript@yahoogroups.com, "Caridy Patino" caridy@
      > > > > > wrote:
      > > > > > >
      > > > > > > Yeah, as Eric said you can use the dispatcher. Unfortunatelly
      > the
      > > > > > > current version of the dispatcher is not integrated with the
      > > > "layout
      > > > > > > manager", as it's with the "Tabview", I hope to have this
      > feature
      > > > > for
      > > > > > > the next release. Meanwhile you can use it manually, and
      > inserting
      > > > > the
      > > > > > > content directly into a certain unit.
      > > > > > >
      > > > > > > If you need help with this?, just let me know.
      > > > > > >
      > > > > > > Best Regards,
      > > > > > > Caridy Patino (caridy at yahoo-inc.com)
      > > > > > > Yahoo! LATAM
      > > > > > >
      > > > > > > --- In ydn-javascript@yahoogroups.com, Eric Miraglia miraglia@
      > > > > wrote:
      > > > > > > >
      > > > > > > > ABhay,
      > > > > > > >
      > > > > > > > JavaScript can't be reliably inserted via innerHTML. If you
      > want
      > > > > > > > these pages to behave "normally," you'll need to load them
      > in
      > > > > > iframes.
      > > > > > > >
      > > > > > > > If all of these disparate pages are part of your own
      > application
      > > > > and
      > > > > > > > you control them, you should separate out the JS from the
      > CSS
      > > > and
      > > > > > > > HTML. Then, you can use the Get Utility or YUI Loader to
      > bring
      > > > in
      > > > > > > > your JavaScript and CSS and use Connection Manager to bring
      > in
      > > > > your
      > > > > > > > markup (or data from which you build your markup).
      > > > > > > >
      > > > > > > > If these are pages you don't control, you'll have to parse
      > the
      > > > > > > > JavaScript out once you fetch the page with Connection
      > Manager.
      > > > > > > > Caridy's Dispatcher Plugin
      > > > > > >
      > (http://www.bubbling-library.com/eng/api/docs/plugins/dispatcher
      > > > > > > > ) is often used for this; Caridy may be able to advise you
      > as to
      > > > > > > > whether this would be effective in your case.
      > > > > > > >
      > > > > > > > If you control the content, though, it's much better to
      > fetch
      > > > your
      > > > > > > > data with Connection Manager without mixing in JS and CSS.
      > > > > > > >
      > > > > > > > -Eric
      > > > > > > >
      > > > > > > >
      > > > > > > > On Aug 22, 2008, at 2:11 AM, abhaysobti wrote:
      > > > > > > >
      > > > > > > > > Ok , I managed to put the contents of an external HTML
      > file
      > > > into
      > > > > a
      > > > > > > > > Unit of a layout using the Connection Manager. However,
      > the
      > > > > > > > > Javascript inside the loaded file does not work.
      > > > > > > > >
      > > > > > > > > Now, I am into new trouble.
      > > > > > > > >
      > > > > > > > > ABhay
      > > > > > > > >
      > > > > > > > > --- In ydn-javascript@yahoogroups.com, "abhaysobti"
      > > > > <abhaysobti@>
      > > > > > > > > wrote:
      > > > > > > > > >
      > > > > > > > > >
      > > > > > > > > > Hi everyone,
      > > > > > > > > >
      > > > > > > > > > Though I did see a similar post, I cannot manage to get
      > it
      > > > > > working.
      > > > > > > > > >
      > > > > > > > > > Basically, I want the Units of a Layout to contain
      > contents
      > > > of
      > > > > > > > > External
      > > > > > > > > > HTML files. How can I manage to do it. I tried using the
      > > > > > connection
      > > > > > > > > > manager but with no luck.
      > > > > > > > > >
      > > > > > > > > > Abhay
      > > > > > > > > >
      > > > > > > > >
      > > > > > > > >
      > > > > > > > >
      > > > > > > >
      > > > > > >
      > > > > >
      > > > >
      > > >
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.