I want to change the content of a div (#mydiv) via AJAX.
To do that I create a button (#change-button) inside #mydiv that trigger the following jQuery script
$(#change-button).on("click", function(){
$("#mydiv").load("page_to_be_loaded.hmtml #mydiv");
});
Basically I replace the text in #mydiv with the new page's one.
This code works fine for the first time, but if I click again on the freshly loaded #change-button jQuery doesn't fire anymore.
I understand the theory: the new #mydiv that has been injected by .load() is not seen by the DOM, so the jQuery script doesn't work.
I found at least two similar questions on SO, but none was properly answered and overall none seems to solve my problem. Can anyone explaining clearly the best practice in these cases.
Here is the other questions:
Update DOM after insert in jQuery
.on()-Function does not rebuild DOM
Thank you
Use delegation like this:
$("body").on("click","#change-button", function(){
$("#mydiv").load("page_to_be_loaded.hmtml #mydiv");
});
I think problem is because y our contents are dynamically loaded, so they are not present at the time of event binding. That's why it's not firing.
You can use delegation like bellow
$(document).on("click",'#change-button',function(){})
Related
I have a simple html page with jquery for updating the contents of the different menu items from a php script on my server but the scripts written for the ajax loaded elements are not working.
how do i correct this.
please.
You're trying to apply your code for elements that do not yet exist in your document and that are created dynamically.
If you're using jQuery, read this: http://api.jquery.com/on/
Yeah thats what i taught was the problem but i actually called the functions onload of those very elements an it didn't still work
Use .on() method, when generating elements dynamically..
$(document).on('event','selector',callbackFfunction(){
});
Example
$(document).on('click','button.yellow-button', function(e){
});
Let me know if it not works.
Is it possible to do something after the dom is ready but it is not rendered(White screen)
I would like to hide the contents from user and after some operations i would like to show the final picture.
I could use "display:none" on my body tag but i am working on a huge project so i dont want to change every page.
Thanks
Here is how?
document.onload = function() {
//your codes
}
Unlike, window.onload this function runs after the DOM is loaded, so the manipulation is possible, but it does not require all the elements to be rendered.
Is it possible to do something after the dom is ready but it is not rendered
Browsers render the DOM incrementally as they parse the HTML into it. The state you describe will not happen naturally.
You can fake it such…
I could use "display:none" on my body tag but i am working on a huge project so i dont want to change every page.
If you don't want to change every page because it is too much work, then too bad. Go and set up an external stylesheet that every page uses.
If you don't want to change every page because you only want the changes to appear on certain pages, then use a more specific selector.
That said, preventing content from displaying and giving users a white screen (or even a loading screen) is just going to turn people off and drive lots of them to another site. I wouldn't recommend doing this.
if you could use JQuery this one is called when the dom is ready but the page not loaded
$(document).ready(function(){
)};
I'll contribute my own 2 cents here.
With jquery, the $("document").ready() event fires after the DOM has been fully loaded(without images, that is) to your browser, but not displayed. So I think to achieve what you want, you'll have to input some handler function inside the ".ready()" method to handle whatsoever you desire to achieve.
Is that what you were looking for?
up to now, I still haven't figured out why the $.mobile.changePage won't fire in next/second page, it only works in the index page. I get it that using jquery mobile all script will be only loaded once because jqm is built in ajax way. But I still can't find a solution to my problem.
This script below don't fire if not in the index.page or first load.
$(document).bind("pageinit", function(){
$('.sns-down').bind('swipe', function(event) {
$.mobile.changePage('#featured', { transition: "slidedown"});
});
});
I made a simple demo and I attached it here for more clarification.
Download Link
Please help.
Don't use $(document).bind, use the new on delegation, this places a listener at your document root which listens to pageinit/pageshow events that bubble up when new pages are added by jQM.
$(document).on('pageinit', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){
$(this).find('.sns-down').bind('swipe', function(event) {
$.mobile.changePage('#featured', { transition: "slidedown"});
});
Don't use a straight $('.sns-down') this selector may inadvertently select elements not within your current page, you should always search from the current page.
Next thing to check is if #featured exists, if you included it in your first page then it'll be there. If your second page is a multi-page template and you link to it, jQM only pulls in the single page from your multi-page template. Just try an actual page to rule this issue out.
Use a debugger/alert to ensure that pageinit is caught properly by the page transition to rule that out, but it should work.
Hiya probably this might give you an idea you can copy paste the code:
http://jsfiddle.net/r4DyU/1/
Can you jsfiddle yours but above should help.
cheers!
Recently I saw that you could use either
$('document').ready(function() {
//Do Code
});
or
$('window').load(function() {
//Do Code
});
for jQuery.
However, they seem the same to me! But clearly aren't.
So my question is: Which one should I use for a website sort of based on animation and async? And also which one of the two is generally better to use?
Thanks.
$('document').ready runs the code when the DOM is ready, but not when the page itself has loaded, that is, the site has not been painted and content like images have not been loaded.
$(window).load runs the code when the page has been painted and all content has been loaded. This can be helpful when you need to get the size of an image. If the image has no style or width/height, you can't get its size unless you use $(window).load.
Well first of all you may want to consider using the "ready" event, which you can handler like this:
$().ready(function() {
...
});
Or, more succinctly and idiomatically:
$(function() {
...
});
The "load" handler really relates to an actual event, and can be handled on several different sorts of elements: <img> and <iframe> for example. The "load" event at the document or window level happens when all of the page's resources are loaded. The (synthesized, in some browsers) "ready" event however happens when the page DOM is ready but possibly before things like <img> contents.
Another option is to simply put your <script> tags at the very end of the <body> or even after the <body>. That way the scripts have the entire DOM to work with, but you don't have to worry about any sort of event handling to know that.
I'm trying to use jQuery to change some styling on my page. The page is made dynamically by executing another JavaScript file.
Right now I have
$(window).load(function(){
$('p').css('font','green');
});
Which does nothing.
$(document).ready(function() will change the static part of the page, but not the generated part.
If I just type $('p').css('font','green'); in the console, the expected results will happen. What is going on?
I'm guessing you are asking to be able to bind events to objects?
If so, look up the jQuery live() function: http://api.jquery.com/live/
If you are simply trying to apply CSS Styles to the page, you're better off relying on actual CSS style sheets.
Instead of listening for the document ready event, can you listen to an event fired by a workcomplete script building the page?
Or can you test for something in the page to indicate it's done every 100ms and then fire such an event yourself?