I try to load a php file called summary.template.hp when the content in class profi is clicked and
load changepass.template.php when the content of class changepass is clicked.
There is no problem in loading in firefox. But in Internet Explorer 7 the summary.template.php file is loading but the changepass.template.php file is not loading. Give me some solution. Whether i have to unload the previous page before loading the next page?. If yes, then give me some tips for unloading the page.
$(function() {
$(".profi").click(function() {
$(".block1").load("views/summary.template.php");
return false;
});
});
$(function() {
$(".changepass").click(function() {
$(".block1").load("views/changepass.template.php");
return false;
});
});
A ColdFusion developer noted a somewhat similar situation here:
jQuery .load() function + IE + dynamic URL = hair loss -- so, is it possible that changepass.template.php script is returning headers or other code that causes IE to fail? Check the exact server response that's generated from changepass.template.php in Firebug.
About this?
Whether i have to unload the previous
page before loading the next page?
Does the changepass link work in IE if you click it first?
It shouldn't really be necessary but since IE can be unpredictable, you might try:
$(".block1").empty().load("views/changepass.template.php");
Related
(Not sure if I missed an already similar answered question…)
On click of a button, I'm loading various images from a database via PHP/MySQL and appending it to the body (the actual images are of course not stored in the database, the correct selection of the images is based on a posted variable).
My goal is to display a loading indicator after pressing the button and hiding the indicator after all the image data has completely loaded and displayed. This may be an easy to solve callback issue but I'm just getting started with AJAX. :)
The following is the code I currently managed to come up with. I'm guessing the load() function is not really the right one here?
Thanks for your help!
$("#somebutton").click(function(){
alert("fetching…");
$.post('loadmore.php', {
somevariable: somevariable
},
function(data){
$("body").append(data);
$(window).load(function(){
alert("finished loading…");
});
});
});
The function you have with the finished loading... alert is a success callback, so it gets executed once the AJAX call has finished. This means you don't need to use $(window).load.
Also, you can use the html method on an element to change its contents and display a message.
Something like this would work fine:
$("#somebutton").click(function(){
$('#divID').html('Loading...');
$.post('loadmore.php', {
somevariable: somevariable
},
function(data){
$("body").append(data);
$('#divID').html('');
});
});
Read the docs http://api.jquery.com/jQuery.ajax/
Use the success callback to append the body and then the complete and error callbacks to clear things up correctly.
$("#somebutton").click(function(){
alert("fetching…");
$.post('loadmore.php', {
somevariable: somevariable
})
.success(function(data){$("body").append(data)})
.error(function(){alert("oh dear")})
.complete(function(){alert("finished loading…")});
});
Remember to always have a fallback for removing the loader - nothing worse than just having a loader and no way to remove it from the page and continue using the application / web site.
I managed to solve my problem by reading and tweaking the code in the following article.
The function load() with the equation containing the self-explanatory variables [imagesLoaded >= imageCount] did the trick.
Know when images are done loading in AJAX response
I'm using jQuery to load content dynamically when the user clicks a link. The content is just a bunch of images that are then set to display in a slideshow of sorts. My problem is, I can't seem to figure out a way to show the loaded content only AFTER the images have fully loaded. I've tried several different solutions and all of them seem to either break the script or just not work the way I want. Here's the code I'm using now:
$(document).ready(function() {
$("a#item").click( function() {
var projectName = $(this).attr('class');
$("div.slideshow").css("display", "block");
$("div.slideshow").load(projectName+".php", function() {
var slideshow = new Array();
$("div.slideshow img").each(function() {
slideshow.push($(this));
});
startSlideshow(slideshow.shift());
function startSlideshow(image) {
image.delay(400).fadeIn(150, function() {
if(slideshow.length > 0) {startSlideshow(slideshow.shift());}
else { $("div.slideshow").delay(400).fadeOut(200, function() {$("div.slideshow img").css("display", "none")}); }
});
}
});
return false;
});
});
You can also see the full demo site here: http://publicprofileproject.com/
Any input would be greatly appreciated!
You could create an array of image objects in your JavaScript, loading each image into an element of the array. Attach an event handler to the onLoad event of the images.
In the event handler, increment a count of loaded images. When your counter reaches the length of your array, the browser will have all of the images. This is the point at which you can show your slideshow.
If you do this in your page load, it will have the added advantage of pre-loading the images ready for when the user clicks your link.
I believe this question has already been answered here.
The general idea is that you specify a load event handler to display it prior to specifying the source attribute.
Alternatively, if your projects+".php" file is specifying the images in ready-made, html mark-up, then you should be able to capture the load event of the images in the file you are loading. Add the following pseudocode into your file that is being loaded.
$("img").load(function() {
// show the div on the page it is getting loaded into
alert("images should be loaded now");
});
You might be able to place it in your original code segment and potentially bind it using the live / on binding events. ex: $("img").on("load", function() {...
From the load documentation:
The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.
Edit: Interesting discouragement for doing what it looks like you're doing:
Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
I have an odd problem in my jQuery code that loads in Drupal 7. I used the following instruction :
(function ($) {
Drupal.behaviors.exampleModule = {
attach: myPopUpFunction.....
})(jQuery);
On my mac browsers this codes loads after the document is loaded however on PC the popUp loads first and then the whole page loads.
Any idea?
Thank you,
not sure if your issue is browser specific, but my suggestion is that you could bind the myPopUpFunction with the window's load event, in that way only after the window's elements are all loaded the popup method would be triggered invoking the popup load
$(window).bind('load', function() {
// popup load goes here
});
this should serve the cause, but the popup would load after 'all' the elements including images which might not be desired.
Note: jQuery 1.7 onward suggests method .on() instead of bind.
I want to add a progress bar before my web page's content loads, so I thought of loading it dynamically via javascript. This content has embedded javascript in its html. I tried using jquery.load() which works perfectly besides the fact that it does not support the js that doesn''t work on the returned content
just to make it clear, what i'm doing is something like this to load all the content:
$("#contentid").html("progressBar.gif");
$("#contentid").load(script.php #content)
$("#contentid").show();
and inside the content returned from script.php there are js calls such as:
jquery.load (to crawl for data and displaying it when ready)
document.getElementById('some_div') (for chart api)
snippets that load widgets
I've been trying to work around with using jquery.ajax though not sure if\how its possible with it yet. would love for some input on that.should i be able to achieve that with it?
Any other idea that might show a progress bar till the script's content is loaded will be great. I'm trying to reduce changes in the code structure, since this long load happens only sometimes.
Thanks.
You may add a div with the progress bar, covering all the page, and remove it after the page is loaded, using:
$(window).load(function() {
$('#progressbar').remove();
});
JQuery's load method takes a callback function as an argument. That function will get called when the load is completed, so you can hide your progress bar at that point. Here is an example from their API docs:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
In your case, it would be something like:
$("#contentid").load(script.php, function(){
$("#contentid").hide();
});
Okay, i have a job to do before tomorrow morning..
i'm working on some jquery.
Where i load some external file data..
What i really want to know, is how am i going to load some data when i $.post / or $.get some data through jquery
Send request into jquery hey
and the same time change the url browser to ex. mywebsite.com/prices/ without making the refresh on the page
is it possible, and how to do ?
// edit (not working)
<li> <span>prices</span></li>
jquery: $('a.prices').click(function(e) {
e.preventDefault();
$.view.show('prices');
});`
but can see that some of the others samples are not that easy to make it work..
You can do it like this:
hey
$('a.priceLink').click(function(e) {
e.preventDefault();
$.view.load('prices');
});
When the user click the link, the normal URL will be shown on the browser line, but won't get visited (because of preventDefault) and $.view.load('prices'); will thus load in that content without refreshing the page.
EDIT: #William - please try this:
<li><span>prices</span></li>
$('a.prices').click(function(e) {
e.preventDefault();
$.view.show('prices');
});
You can use a jQuery plugin called URL Utils - there's also a great screencast that shows you how to use it.
As far as I know, you can only change the url for the anchor part (www.url.com/#anchor), and nothing else (without a browser refresh). Perhaps you can use SWFAddress for your purposes?
i found the solution!!
http://nix.lv/history/demo.html
took me about 10min to install, and it just work perfectly..(i did some mod )
solution:
<li><span>prices</span></li>
jquery(download the plugin at the link above):
$.history.init(pageload);
// PageLoad function
function pageload(hash) {
// hash doesn't contain the first # character.
if(hash) {
$.view.show(hash); // load pages
} else {
// start page
$.view.show(load_from_start);
}
}
try it.. :)