jimfog Posted August 22, 2012 Share Posted August 22, 2012 I have attached in an html input/button tag an onclick event which points to js function that prints the page: <li><input id="prntbutton" type="button" value="print" onclick="printpage()" /></li> here is the function: function printpage(){ window.print()} The problem is that if I put the function inside the outer document.ready function that is used with jquery code, the print function does not run: $(document).ready(function() {function printpage(){ window.print()}}); Why that? Is the reason,maybe, that document.ready "accepts" only jquery function/code? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2012 Share Posted August 22, 2012 It is a now function that does not do anything but just sit there, it is not accessible from the outside the $(document).ready function . Usually a function inside the $(document).ready are applied with events 'click' mouseover etc, and only applied here once after the page loads to specific elements and that is that, it has done its job to that specific scheduled task on onloading of thepage, otherwise it would not work because the element targeted by these event functions have not been created yet! Link to comment Share on other sites More sharing options...
jimfog Posted August 22, 2012 Author Share Posted August 22, 2012 I do not understand exactly what are you trying to say.You say: It is a now function that does not do anything but just sit there, it is not accessible from the outside the $(document).ready function . What do you mean by saying now function, and as I say, outside of document.ready function, the print function I made, does work. Some clarification is needed. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2012 Share Posted August 22, 2012 document only runs at end of document load, anything in it! is inaccessible after that, as it is non global so. "it is NOW a function THAT does not do anything but just sit there", outside its is global, when called it will run. Link to comment Share on other sites More sharing options...
jimfog Posted August 23, 2012 Author Share Posted August 23, 2012 I somehow understand what are you talking about...but it surprises me though. You are saying, in other words, that the function document.ready,after the DOM loads, the content in it is "useless"...correct? As I remember,from past experience, code inside the document.ready function, stills works after the DOM loads. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 23, 2012 Share Posted August 23, 2012 Right! lets take the click event for an element, the element is created, the page finishes loading, the click event is applied to each specific element with id or class ref. Right! now you use ajax which replaced some of these elements, these new element will not have the click event function attached to them, because the function was only attached to those elements that were present when the document ready function was run. Functions that are going to be called after document ready should be made global outside document ready function, this function can be called from any jquery function that is applied to any element AFTER the time of page loading inside document ready function. Link to comment Share on other sites More sharing options...
jimfog Posted August 24, 2012 Author Share Posted August 24, 2012 It is more clear now...as to why window.print inside document ready does not work. In other words-and correct me if I am wrong-document ready deals many with elements that their state changes after an event,(upon clicking for example). probably, the above explanation might sound strange but this is how I perceived the issue-more or less. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 24, 2012 Share Posted August 24, 2012 This onclick event calling of function <li><input id="prntbutton" type="button" value="print" onclick="printpage()" /></li> cannot access print function defined in document.ready as it is only in the scope of document.ready on running. However this <li><input id="prntbutton" type="button" value="print" onclick="printpage()" /></li> with this $(document).ready(function() {$('#prntbutton').click(function(){printpage();});function printpage(){window.print()}}); will run because it is in the same scope as click event defined and attached in document ready. this also, will work! $(document).ready(function() {$('#prntbutton').click(function(){printpage();});});function printpage(){window.print()} Because the print function is global i.e accessible from inside and outside of document ready scope, the click function is defined and attached to specific element with reference to global function, and the calling of function is carried out because, again, it is global and defined outside of document ready scope. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now