Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have this js that beginning so:
$( "#map-page" ).live( "pageinit", function()
{
//Here the body function
});
I would load this function after the page has completed to load.how can i do?
Update: Looks like this method won't work with jQuery mobile (strangely enough).
Try this instead:
$(document).ready(function () {
$("#map-page").doWhatever();
})
For what you want, I think that load suits better
You can read about it here http://api.jquery.com/load/
You should be more clear that you're referring to jQuery Mobile, anyways the best way is to bind a live event to the pagecreate/pageshow event that's triggered on the <div data-role="page">
If you want the code to run just once use pagecreate, if it needs to run everytime the page is shown (there is dynamic data) then use pageshow and fetch any changes via AJAX. Please note if you re-navigate to the page again via the back button etc, it may be fetched from memory in which case your html won't be updated - you must use non-AJAX loading or update your DOM via AJAX in the pageshow
Use an id or class to properly attach the listener, here's a more detailed answer I wrote: https://stackoverflow.com/a/9085014/737023
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am trying to get to the bottom of a webpage so that all the items are on the page before I run a script to find a specific item. However, I have to scroll down at least 5 or so times to allow more items to load. Is there a way to get all items to load right away so that I do no need to scroll?
To answer your question, you can add this to your script and call it in a loop to keep scrolling until you find your item:
window.scrollTo(0, document.body.scrollHeight); See here Scroll Automatically to the Bottom of the Page
You can also trying look at the Network tab in Chrome console (or other dev consoles) to see if there is some API you can try to access.
You can use the DOMSubtreeModified event like so:
html:
<div id='container'></div>
javascript:
document.getElementById('container').addEventListener('DOMSubtreeModified', function () {
window.scrollTo(0, document.body.scrollHeight);
}, false);
Assuming your items are dynamically added to the div with id=container.
Note: this is not going to win a beauty contest.
If your using pure JavaScript, use async attribute.
<script async>
//This will load the script after HTML body has been loaded.
</script>
For jQuery, you can use either async or $(document).ready(function() { });
This way you can let your document body be loaded first.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a jQuery application that adds a "tile" when i click "addTile" button. The resultant tile will have a menu of buttons (google, youtube, ...), which on click, removes the button menu and replaces it with the respective widget. This part is working fine. The next part includes adding the widget directly on load. Whcih means i have to programmatically click() the "menu" button which is not yet on the DOM. If i want to display a google widget directly on load of the document, how can i do that?
i am right now at this.
$(document).ready(function () {
$("#addTile").click().$("#setGoogle").click();
});
Do not try and click the button. That's impossible. Instead... only try to realize the truth...
There is no button.
You'll see, that it is not the button that clicks, it is the functionality of that said button that needs to be invoked directly.
try below thing
$(document).ready(function () {
$("#addTile").trigger('click');
$(document).on('click','#element_id',function(){
alert('click event is triggered');
});
$("#element_id").trigger('click');
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am building a website (Static HTML Website). In my index page, I have an image slider. I used JQuery for that. On clicking any image, that will pop up. And there is a link, for which I used another JQuery function. On clicking that link, a window will pop up. But the problem is that I am not able to use both of them at the same time. I defined both the functions inside
$(document).ready(function () { });
Is it because of that??
$(document).ready(function () { });
Is just making sure nothing inside get's fired before the whole page is loaded.
I think you could get much more specific help if you would post the whole code.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I deal with jQuery mobile and PhoneGap at the moment and have some questions about it (documentation and books did not help).
I'm using the multi-page template to develop a mobile app. Each page has some JavaScript.
Should each JavaScript begin with $(document).on("xxx")?
What's the difference between document ready and $(document).on("xxx")
And should I also use function onDeviceReady() in every JavaScript?
onDeviceReady() should be used for Phonegap side, if you want to execute anything after Phonegap is loaded successfully.
Classic document ready should not be used with jQuery Mobile because in some cases it can trigger before / after page is loaded.
on method is on the other hand just method used for event binding. Do not confuse it with document ready. What you need is jQuery Mobile page evenets. Read more about them here.
Use this:
$(document).on('pageinit', function() {
});
Instead of document ready.
Several page events exists, find more about them in an official documentation, or here. Official documentation is for older version of jQuery Mobile but it also translates to last 1.4 version.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
Many of you probably encountered this situation. For example you have a jQuery fade effect that fires on mouse over a link. At some point you add new links in the document trough ajax, so you need to apply the fade effect to them too.
There are two possibilities:
you call the fade function again after the ajax completes
you use something like livequery in your initial document.ready function to apply the fade on the links
Which method would you choose and why?
livequery adds overhead that is simply unnecessary unless you just don't have access to the javascript that is adding the dynamic elements.
If you're talking about event handlers that are triggering the fade, then you could use jQuery's event delegation capabilities the delegate()[docs] method (preferred) or the live()[docs] method .
If you're not talking about event handlers, then I'd definitely go with applying the code yourself in a callback to the AJAX request. livequery is slick, but should be an absolute last resort in my opinion.
jquery has a native function that does this without the need of an extra plugin. see $.live()
Edit: furthermore, your first option seems like code smell to me. keep it DRY and use $.live()