Execute JS on dialog onload - javascript

I would like to execute some JS function each time my YUI dialog gets loaded. I can't do that from body onload because that body tag belongs to parent page. I tried doing that by adding the function on onContentReady event. But that works only when the dialog gets loaded for the first time. Then if I close the dialog and reopen it, it doesn't work; probably because the content is already ready when the dialog was opened for the first time and hence the function is not called this time.
Any idea what can be done to solve this?

I decided to use dialog.changeContentEvent.subscribe to register the JS code I wanted to execute on dialog onload. This isn't exactly equivalent to onload but still suits my requirement.

Related

jQuery function and Page Reload issue (maybe)

I have this code (accepted solution).
This code snipped loads from a js file. When I put a breakpoint at this function, I see that this function getting called when the page (that includes it) is loaded.
After the initial page load, when I choose an option in this page, that anchor element is reloaded (Ajax) exactly same (js file does not reload) as part of the piece of data. However, now when I click on anchor link, it does not fire / open the outlook window.
Is it something about jQuery functionality that I am mis reading/using?
How do I resolve this?
If the element is reloaded you'll need to rebind the click event to it.
Alternatively to the way you are doing it you could bind to the window/body and just specify the id as the selector like this:
$('body').on('click', '#emailLink', function (event) {
// your code here...
});

Does ready event fire when page-turn

I am making a book, and use jQuery to change pages etc.
At the top I have an $(document).ready(function() that does different stuff when the page is loaded.
On the GUI page I got a "change page" button, and when this is pushed, the function turnPage() is called. This method contain some code pluss this:
$.mobile.changePage("#device"+window.device, {
transition: "slide",
reverse: false,
changeHash: true
});
My question is, when turnPage() is called, is also $(document).ready(function() called?
(Yes, I am new to this)
DOM ready event is an event that fires when the DOM is fully loaded except of images (<img>).
The event fires once for each page load. So:
If the turn page() function makes a redirect, the answer is Yes.
If the turn page() function only gets data with ajax request, the answer is No.
Important Update:
I found this in the official plugin website :
Important: Use pageInit(), not $(document).ready()
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event.
...
...
So turn page does an ajax request, so the final answer is No.
What is the ready event:
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external.

Initialize Facebook like button post page load and script execution

So I have a like button on my page which loads fine when the script is executed in the bottom of the page. The problem is that I have an Ajax based popout which renders some HTML that also has the like button. How can I initialize that?
I've tried putting same script, but it doesn't get executed.
Is there a way to explicitly call any method to initialize the button?
FB.XFBML.parse() will do the trick

Document.ready and a code that appears after it

I have a modal plugin on my page that shouts on $(document).ready but i also have another function (innerHTML) which puts the <a> 5-10 seconds after the page has been loaded, this way the modal doesn't work cause it's only working on the code that was there before it has been loaded.
I was thinking about making a function that will "click" on an existing <a> can it be done?
basically i need that when the <a> will appear it will open up the modal instead of going to chat.php
<a href=\"chat.php\" class=\"iframe\">
any help?
If you use bind method, or directly use onclick on your selectors, it will attach event to that specific control only if selector has results. Try to do same thing using live method, it will remember your event attachment even if your selector doesn't have any results, and if same kind of control is added later on, that event is automatically bonded to that control.
for example, if you are using
$('#btnSubmit').click(function(){ ... ); in document.ready replace it with $('#btnSubmit').live('click',function(){...}); this will fire click event even if you add btnSubmit after page load.

how to remove body onload function in java script?

I met one critical problem in java script .....help me to fix this.......
i have written the onload function in one jsp page say login.jsp...
in tat function i used window.open method to open a new window again with the same jsp page login.jsp with disabling the toolbars......
now wat happening is when iam opening same page again in new window obviously tat body onload function will again get called and opens a new window in indefinite........
but what i want is, i have to remove that onload function in tat jsp page once a new window is opened..
Is it possible to remove tat onload function while getting opened in the new window??
could anyone please come up with an idea or little bit of code to do this using java script??
Since it's the same page a quick workaround could be to check if the current window has been opened programmatically, before executing window.open, something like this:
window.onload = function () {
if (!window.opener) {
window.open(/*...*/);
}
};
The above code checks if the window.opener property has a value.
This property contains a reference to the window that opened this current window, and of course if the current window hasn't been opened programmatically, it will contain null.
In conclusion, the window.open method will be invoked only once.
It seems you're going about this the wrong way.
Although there may be a way to intercept the onload function before it actually runs (some javascript libraries can help you to add a handler to the OnDocumentReady event), but maybe you should be doing something serverside. For example - If you want NOT to popup the window in the second window, then one way is to set a querystring parameter telling the server not to add that attribute to the body tag.
You could also check the referrer. If the user is coming from that page, then don't add the attribute to the body tag.
Try having the popup JSP look to see whether you're coming from the problematic page. If so, set window.onload = null -- better yet, don't set anything at all in that JSP.

Categories