Client Framework

Home » Client Framework » Forum » trigger event AFTER load

trigger event AFTER load

24 July, 2008 - 17:30 — bblyth

I have a page where i have three elements. The size of the third one is dependent on the size of the first and the second. I have written javascripts that set variables with the offset height of both elements, but unfortunately, the element they effect appears to be loading before they are! How do i run the sizing script AFTER all three element have actually loaded?

‹ Bug in window demos Scroll effect for table having large data ›

Maybe you need to take a

24 July, 2008 - 21:30 — Rus

Maybe you need to take a look on DOMNodeInsertedIntoDocument event handling?

DOMNode no go

25 July, 2008 - 09:46 — bblyth

Actually, i have looked at it and it is in use throughout the application - where we need to perform a function on one object after it loads. In this case, however, i have three objects. Objects A and B must declare their height to variables (after they've loaded with all of their data) which object C then uses those variables to set it's padding properties.

Objects A and B are loaded via JSP calls from within Object C. The biggest problem in all of this is that i can't use ID's to identify these objects. Therefore the functions that set the variables for each object must be within the objects themselves and therefore don't load in the order that i need. It seems as if object C is loading before objects A and B and therefore the script fails.

I need a way to write the scripts so that the body does not execute until all three objects are on the page and have heights...

load

25 July, 2008 - 11:08 — andys

Hi bblyth ,

Would you like to use the load event handler?
The load event is fired when the DOM implementation finishes loading the resources such as the document and any dependent resources (images, scripts, etc).

I hope this helps,

Andys

example

25 July, 2008 - 11:16 — bblyth

Can you please give me an example....

I tried:

e:handler event="load"
e:handler event="onload"
e:handler event="onLoad"

none of them would run the script.

Please bear in mind that it is a jsp loading within the document after the initial login & page load that i need to trigger this event.... so if the load must be attached to a body or frame element, it wont' work...

example

25 July, 2008 - 11:42 — andys

Hi bblyth,

Try this kind of snippet

<body>
   <script ....> ---> the backbase script tag
      ...
      <e:handler event="load" type="application/javascript">
          ...execute your code here...
      </e:handler>

      .....
   </script>
</body>

Hope this answering your question

Andys

wont work

25 July, 2008 - 11:54 — bblyth

that script won't work because at the time the body loads, the elements i'm trying to affect don't exist yet.

There is a key piece of functionality missing in Backbase - it's a great application,allowing events to happen independently all over the page without reloading the page every time. BUT there's no way to trigger events for all those changing pieces if they are dependent on one another. Timers don't work because if connection speed is off, the time runs out, or the page loads before the timer hits the mark. Listening for events doesn't work because you can't guarantee that the element you want to listen to will have loaded when the listener is created. Load commands don't work because the page doesn't reload, and domnodeinserted doesn't work because the node may have many includes the aren't loaded when the element is initially inserted in to the page, and as such the values you need (height for example) are not accurate.

There's a tremendous potential in backabase if the widgets and pages can communicate not so much when they are initially inserted in to the document, but when they are truly loaded (all dependent jsps and data) and actually drawn in to the browser.

trigger event AFTER load

12 August, 2008 - 13:27 — yudi

Hi,
Is it possible to have a snippet of your code (3 element that you want render)? What kind of elements are they ? Is it Backbase element (BTL)or HTML or your custom element?
Thanks,
Yudi

Include jQuery alongside

20 August, 2008 - 10:33 — dmitriid

Include jQuery alongside Backbase and have your code execute in $(document).load. That should do the trick

Consider using c:load tags

21 August, 2008 - 07:10 — Richard

Brandy,

If you are using JavaScript you might instead consider using a sequence of c:load tags in an XML handler - they should execute synchronously so the areas will then load sequentially.
After the c:load tags, then add an e:script containing your resizing javascript.

The problem with JavaScript and loading is that the Ajax call is asynchronous by nature, so each bb.command.load will execute without waiting for any response.
This is one of the nice things about the XML tags - one finishes executing before the next tag starts executing, which makes life easier for a developer.

If you are using xi:include for each region, consider changing that approach to an XML handler on the 'load' event as already suggested.
So the page will load, the load handler will fire (by the way, the load handler is a direct child of the backbase script tag).
Each of the 3 sections will load in sequence, then your resizing script will execute.

There is no need to use JQuery - the snippet suggested is equivalent to the e:handler sample code you see above.

good luck
Richard

on second thought

21 August, 2008 - 07:16 — Richard

maybe a plain old javascript timeout loop would be better.
Call the function using the load event handler as described above.
Just check if each of your three areas have been loaded, and if not sleep for 100ms.
If all are loaded, do your resizing.
That might be a lot simpler.

I'm assuming that the positioning cannot be achieved with CSS alone (which would be preferable).