We Keep Coding

Knockout template document.ready fires before child page loads

we are usign knockout template for binding multiple pages. And On the main page we have a docuemnt.ready event
$(document).ready(function() { //some logic that makes use of the elements of child page. });.
Main page holds 3 child pages and as soon as the main page loads the ready event executes and result with error becuase child pages were not loaded by that time.
So it fires error that #inputbutton is null or not defined. Becuase at the time when ready event executed these child pages were loading.
So is there any way that we can hold the document.ready event of main to page to be fired after all the child page has been loaded completly? If we are able to do so then we will never get that error as every element will be available while the ready event fires.
Sorry cant disclose code because of some reasons

Make document.ready not wait for specific DOM elements to finish loading

I found myself in a following situation. I need to somehow not include <div class="article-meta-social"></div> element and all its contents into my document.ready function. The reason is, it has links to apis from facebook, twitter, g+ etc... and Multiplied by several posts it results in a little delay before contents within document.ready function are fired off.
Therefore, what can I change in order for this
$(document).ready(function(){
});
To not wait until .article-meta-social and its contents are ready?

$(document).ready relies on the native DOMContentLoaded event, which does exactly what it says - fires when the entire DOM has been parsed. So to achieve what you want, insert the contents of .article-meta-social dynamically inside your ready handler. This way it won't hold up the main rendering of your page.

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.

How do can I wire up an event to trigger after methods of my choosing finish execution in JavaScript?

Hard to summarize in one question, but here are the details:
I have an ASP.NET MVC 3 project (many of them actually).
My standard practice is for each view to have an Init() method that is fired when the document is ready. This is where I put all my UI code, like rendering buttons and accordions, etc.
I am using the trick to hide un-formatted html elements by setting the html tag to display: none and after Init() is complete, I can unhide everything.
This works pretty well, but I initially had the showing of content in my layout page, but that would execute before the Init code of a view finished running. It gets even more complex if I use partial views with their own Javascript.
What I would like is to attach a callback in one place that fires after the all of my possible Init() calls are finished.
I tried using custom events, but then I would have to trigger them at the end of every Init method, and that's not very efficient.
Requested Code:
Layout Page
<script>
$("html").addClass('init') // init has display: none
$(function() {
InitLayout() // Basic stuff for every page like menu, buttons, etc
$("html").removeClass('init'); // show all content
});
</script>
View Page
<script>
$(function() {
ViewInit() // Init all custom ui elements on page: tabs, accordions, etc
});
</script>
The problem is that the removeClass will occur before each page's Init fires. I am trying to find a way to avoid having the removeClass call at the bottom of every Init method. Is there some way to attach a callback programmatically to avoid repeating code. My main goal here is to implement hiding of unstyled content until everything is complete globally so I don't have to worry about it in each view.

You could try to register the occurence of the init procedure into a global variable (array). This should be done outside of the document.ready() or JQuery equivalent. So within the <script> tags.
When your Init functions, inside the document.ready() event handler or it's JQuery equivalent , are finished, unregister the occurence.
While unregistering, check if there are any occurences left, if not, modify your html style.
The gap between script parsing and the DOM actual finishes loading could be working for you in this case.

Best practice for triggering events on calling page from an ajax page

I have a page that lists a bunch of files. This page can be accessed directly via a URL or it can be loaded in a modal dialog via ajax from a different page.
If the files page is loaded via ajax, I would like to allow the user to click the name of the file and trigger an action in the page which loaded the files page. For example, there is an article edit page. This page contains an "attach a file" button. When the user clicks the button, the files page is loaded in a modal dialog and when a filename is clicked, the id of the file is inserted into the article form and the dialog is closed. However there is also an event edit page with a similar button, but I would like to handle the filename-click event slightly differently on this page.
I'd like to handle these click events slightly differently depending on the calling page. At the moment I'm defining a handler function with global scope in the page containing the form to which files are being attached, then testing for that function in the the files-page when the filename is clicked and calling if it exists. It works but it feels a little hacky. Is there some kind of best practice for this sort of thing that I'm not aware of?
I'm using jQuery if this makes things easier in any way..

Instead of relying on a global handler function as the interface between pages, you could rely on custom events instead:
"calling page":
$(document).bind("fileClicked", function(event, fileName) {
alert(fileName);
});
"page loaded via ajax":
$(".file").click(function() {
$(document).trigger("fileClicked", [$(this).text()]);
});

You should look at jQuery Live
Attach a handler to the event for all elements which match the current selector, now and in the future.
When a Ajax page is loaded it's not processed by the DOM in the same way the main page was loaded, therefore using live will attach the event on all current event emitters as well as the future ones such as dynamic Ajax content
Within your Ajax model
<div>
...
Add to main page
...
</div>
and within your static page (the one originally loaded)
$("#ajax_click_event").live('click',function(){
//Work wit the value of the form within the ajax div.
})