I have a large section of code that I am using $('.data').prop('checked', false).button("refresh"); in to uncheck and refresh the jQuery UI styling on a group of checkboxes with data as their class. It works fine up until my code runs $("#div").load('output.php') which refreshes the output.php file. After this point, .prop('checked', false) works fine, but .button("refresh") stops working.
So what happens is the checkboxes keep unchecking properly, but the jQuery UI style doesn't refresh so they appear to stay checked even though they are not. Output.php is included on the page to start with, and I tried replacing the load with $("#div").load('text.txt') but it still stops working even if it is just loading the text file.
So it seems that .load() is breaking .button("refresh"). Any ideas what could be causing that or any potential solutions?
Is .data within #div? If so, the content of output.php will replace it, and the replaced elements will not carry the jQuery UI event data, as it was never bound to them.
The content that I was loading was html and had a <head> section. This was what was breaking .button("refresh"). I took what was in the head and included it in my main page's head and that solved the issue.
Related
I have a program with two files, a program.js and a program.php. The js one uses jQuery and wraps everything inside $(document).ready , so everything happens after DOM is loaded.
program.php is writing a few elements in the way of:
printf( "<table>"> );
How can I delay the elements that I create through php until DOM has loaded? They generate before the jQuery created elements, and I have some conflict.
Should I wrap the php items in a function and set a delay to it?
Is there a more ideal way? It doesn't feel proper to do
printf("<script>$document.ready(function(){");
//and the rest of elements that I want to delay
EDIT: The original conflict that made me think of this, was that the jQuery file is doing:
$("#create-booking").button().on("click", function() {
dialog.dialog("open");
});
While the php is doing:
printf("<button id='create-booking'>Create</button>");
So the event is not being applied. My suspicion is that the php element loads much faster and when it's created, the jQuery handler didn't have time to appear yet.
If your issue is just one of display and you just want everything to show at the same time, then you can hide the PHP generated elements (the one's in the HTML source of the page) with CSS and then show them in your $(document).ready() handler and then all content will show at the same time.
For example, if the PHP generated content was in a parent div like this:
<div id="container">
<!-- PHP generated content -->
<table>
...
</table>
</div>
Then, you could add a default CSS style rule like this:
#container {display: none;}
And, then add this Javascript:
$(document).ready(function() {
// do other scripting things here first
// then show your content, now that everything else is in place
$("#container").show();
});
If your issue is something else (you mention "conflict" without explaining what that is), then you need to describe what the actual conflict problem is so we can help you fix the root problem, not just add a bandaid around it. See XY Problem for an understanding of why it's better to describe your actual problem rather than your attempted solution.
EDIT:
From your comments, it sounds like your only concern is that the PHP content may be visible a little bit before your event handlers are in place. Unless you have some unusual delay in loading the web page, that generally does not cause a problem for web pages because the time gap is very small between display and event handler installation and the consequences of the problem are very small (a very quick click might be missed in which case the user would probably just click again). So, usually people do not worry about that issue. But, if you want to address it, you can just not make the content visible until after the event handlers are installed. There are many different ways to do that, but I've shown one above.
You should understand that there is a strict sequence of events here. All PHP generated content comes first. The PHP runs on the server and creates the HTML of the page. That finished HTML is then sent down to the browser. The browser starts to load and parse that HTML. Then, when the browser encounters a <script> tag as part of that page, it will run that script in the order the script tag appears in the page. Any <body> content (from your PHP server) that comes before that script tag will be already in the page and visible. Any <body> content that comes after that script tag will not yet be available to the script.
Further Edit:
OK, now you've explained that you're adding content to the page dynamically via Javacript/Ajax. That will likely finish after $(document).ready() so yes you would have a problem adding event handlers.
You have two choices to fix that:
You can delay the adding of event handlers until AFTER your ajax calls have finished adding content. You would have to hook into the completion callbacks for your ajax calls and then call a function from there that would add the event handlers.
You can switch to using delegated event handling which allows you to add the event handlers to an existing parent element BEFORE the actual child content has been added to the page. Here are some references on how to use delegated event handling:
JQuery Event Handlers - What's the "Best" method
Does jQuery.on() work for elements that are added after the event handler is created?
jQuery .live() vs .on() method for adding a click event after loading dynamic html
Should all jquery events be bound to $(document)?
Ok so I have created a wizard and everything works great. But I have one little piece that seems to 'bother' me if you will.
In the last step of the wizard I build, it uses obflush to process data onto the screen
to show some actions happening. But the problem with that is, that the 'entire' page doesn't load until the obflush process is done, and then the page all lines up nicely and such.
Im wondering if there is such a way that maybe ajax can flush the obflush process?
Maybe this is completely wrong but this is how I can envision it happening.
User goes thru the wizard and gets to the final page
The entire page loads
At the end of the page is some ajax code to apply to a tag maybe
The ajax is refreshing itself every second to check against the update of the obflush and then outputting what the obflush has outputted to the screen.
Does that make sense?
Any insight is greatly appreciated.
Thanks
This question is about how to load part of a web page with Ajax. In particular, how to load the structure of a page, and then fill in the details with Ajax calls.
I assume the intention is for the structure to be loaded quickly because it does actually have some content, and then load parts of the page that take a long time to process. Otherwise the effect on screen will be that loading is actually slower.
I would use the JavaScript library jQuery to help with this, although it can be done without any libraries as shown in this question.
The browser makes a web page request and the server responds like it would normally, but just with the structure of the page
Within the basically empty page that was loaded, jQuery will then make an Ajax call with load() that will load the response from a URL into the specified HTML section.
The code would look like this, where my-intro-div is the id of a regular HTML div tag:
$(function() {
var myIntroDiv = $('#my-intro-div');
myIntroDiv.load('/my_intro_div.php');
});
The PHP script my_intro_div.php returns the HTML that is meant to be displayed inside the my-intro-div tag
There are some good examples in the jQuery documentation here:
http://api.jquery.com/load/
jQuery can help with a tonne of other things too. It has a tiny learning curve that can be a little steep, but after that I've found that it is the most intuitive "language" I work with.
I'm trying to add some validation to some form fields in a jQuery Mobile site I'm building with a PHP back end.
I've done this in the past successfully using the jquery.validate plugin but I'm having trouble getting this to work with jQuery Mobile.
The validation is working in this jsFiddle page:
http://jsfiddle.net/GeX5C/5/
but I'm having trouble getting it to fire when I click the submit button from the hosted PHP page. From what I've read I can't use the usual:
$(document).ready(function(){
approach but not sure what to replace this with?
Would really appreciate any assistance here.
Thanks
2 options, in the event document ready is not supported for whatever reason..
one try the load event on the window, which will wait til everything is loaded and completely rendered, similar to the ready function but waits just that much longer course im paraphrasing but hopefully you get the point.. its applied the same as the ready function.
$(window).load(function(){
// Your code here
});
second option is dont use any load/ready. just make a function that fires off as the final line of your code, should whatever your doing truely not require the page to actually be fully rendered to run. logic to this is make a function then in the last lines call the function.
also try to keep a mass majority of your javascript especially pieces that require other things to load first at the bottom of your page just above the final body tag. Yea theres hot debate over this some people insist top is better while others insist bottom.. me Im a bottom guy think about the logic, when downloading the page downloads top to bottom in a sense correct? so.. put the heavier of the weight at the bottom such as external scripts. anyway im getting off point, hopefully this helps some what.
FYI this is js code that works for the form validation:
$('#id-for-the-page-element').live( 'pageinit',function(event){
$('#id-for-the-form').validate(options);
});
Hope this helps someone else.
I'm currently working on a website that you'll find here: http://steadfastdesignfirm.com/rgw/. I used an ajax effect that I found online at CSS-Tricks to dynamically load content from another php page and animate it (fade in and fade out) when a navigation tab is clicked.
I have managed to get this working fine, as you will see (please note the only two working pages are "Home" and "Experience RGW"), however, all of the jQuery scripts in my document that apply to elements within the div that reloads are broken when the content is dynamically generated.
As a quick example, take a look at the text resize tool beneath the image rotator on the home page and try changing the font size. Now, click on the "Experience RGW" tab and scroll down to the text resize tool again. Notice that now that we've loaded in experience.php dynamically within the "#ajax" div, the script doesn't work. Also, if you click on the "Home" link now, you will also notice that the image rotator doesn't work.
I've looked high and low online and through multiple forums to try and figure out how to fix this, and I believe I have to incorporate the jQuery .live function, to apply the script to any element, whether it's currently visible or not. Otherwise, document.ready only runs the scripts once after the DOM loads and will not affect the ajax loaded content. Is that correct? If so, how do I apply that to multiple jQuery files executed on my page?
Well, this is totally driving me crazy and I've tried hard to get it, but I just can't quite figure it out. I'm fairly new to jQuery, but am trying to learn fast. I would post some of the code here, but there is a lot involved in this question. :)
If anyone would be willing to shoot out a quick answer, or a few lines of code, I'd greatly appreciate it.
FYI: The script that runs the ajax effect is in ./scripts/page.js. Also, please remember that I currently have only the Home page and Experience RGW page working correctly, so please don't waste time trying to diagnose problems on the other pages. I haven't gotten to them yet. :)
Here is a link to some of the code on jsfiddle: http://jsfiddle.net/taylortsantles/R33YV/.
Thanks,
Taylor
I'm behind a proxy and can't see your page, but it sounds like the events are not being re-attached to the content created through ajax.
I'll try to explain, when your page loads the first time, you are attaching jQuery events to DOM objects on document.ready(), this function will be called only once.
Every time you drop DOM objects and create new ones with the ajax response, these new objects never get jQuery events attached again, since the document.ready() function didn't fire.
You can try putting your event-attaching code in a different function and invoke that function on document.ready() AND after every DOM modification (your ajax call to change the tab content).
Hope it helps.
The problem is a breakdown in the order of executing code.
page loads
load event fires and sets up elements
click event
ajax loads the new page
The new page doesn't have any events set to it. Two solutions
use "live" links in the window.load event callback
use run the page load code again.
Solution 1 is nice but if you have an specific plugin used then it won't be the total solution.
Solution 2 can be implemented by pulling out your code in window.load and wrapping in another function. Just all it onload and then in the callback when the ajax loads.
I know how frustrating is can be. I hope this helps.
You need to rebind any events after dynamically loading in elements to a page, as Javascript sees these as totally new DOM elements.
You can achieve this by modifying the code you use to update the page:
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#ajax")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #ajax", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav li").removeClass("on");
$("nav a[href='"+newHash+"']").parent().addClass("on");
// Rebind any events
documenttextsizer.setup("text-resize");
});
});
};
});
This applies to any events that happen WITHIN the updated elements in the page. So after the comment "//Rebind any events" you can add others as they are required! Hope that helps :)
I have a page generated by php which includes two drop-down lists (SELECTs) which contain a lot of items (about 2,000 each). The page is fine, but when it loads in Firefox, there's a delay during the load, and then it seems to refresh the entire page. If a user tries to click on anything before the "reload" occurs, it has no effect.
In Explorer, each drop-down just takes a while (a second or two) to appear, which is fine.
Anyone know what this is? And aside from using AJAX to dynamically fill the drop-down list, is there an easy way to avoid it?
EDIT: Additional information. I have got my PHP script to output to a log file whenever it is called, so I can now see that what seems to be happening is this:
A call is made to the PHP script, and the page starts to load. After a few seconds, another identical call is made to the PHP script, at which point the page starts to load again. This time it completes loading. So I guess it seems like the browser refreshes the page automatically for some reason before the page finishes loading.
Wild shot in the dark: Do you have any images or hidden image submit buttons with BLANK src? I needed to 'fake' a 'default enter' effect for a textbox and used a hidden image button before all the fields. Since it was hidden, I left the src attribute blank. Firefox loaded the page twice! Pointing the src attribute at a single-pixel but real image fixed it.
First, you should use a network sniffer like wireshark to confirm that the page really loads twice.
Then, confirm that it happens only with firefox;
Then, you are on the good way ! I experienced a variant of what n8wrl is proposing; it was in some css declarations with some empty background-image property --> Check your CSS for empty file declarations