I am trying to display an ajax spinner when loading AJAX content.
The following code appears to work fine in Firefox but not in IE7. The functions to show and hide the spinner are being called but the browser just does not display it.
Here is the jQuery:
$.ajax({
url: filterorSearch,
data: {filterParams: JSON.stringify(filters), requestTime: new Date().getTime()},
beforeSend: function(){
showLoadingGraphic();
},
complete: function(){
hideLoadingGraphic();
},
success: function(data){
$("#BreakingNews").html(data);
GetRelatedarticles();
}
});
function showLoadingGraphic() {
alert("show");
var showSpinner = $('#page-placeholder-wrapper #main-left').prepend('<div id="ajaxLoader"></div>');
return showSpinner;
}
function hideLoadingGraphic() {
alert("hide");
var hideSpinner = $('#ajaxLoader').remove();
return hideSpinner;
}
And the associated CSS for the spinner:
#page-placeholder-wrapper #main-left
{
position:relative;
}
#ajaxLoader
{
background:rgba(255,255,255,.7) url("../images/icon-ajax-loading.gif") no-repeat center center;
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index:9999;
}
To get you working try this:
background: url("../images/icon-ajax-loading.gif") no-repeat center center rgba(255,255,255,.7);
I don't know why the rgba has to be last!
[EDIT]
IE does not support rgba, therefore with it starting on background: it errors and the rest of the line isn't executed for the css
See: Browser Support for RGBa
JQuery actually fires events when it's doing ajax.
$(document).ajaxStart(function(){
$('#ajaxIndicator').show();
}).ajaxStop(function(){
$('#ajaxIndicator').hide();
});
This will save you a lot of time over manually doing it for each individual call.
You could have a DIV relative to the top of the document which you can show/hide which overlays everything else on the page. (I forget the exact CSS which makes it always be 200px from the top of the screen, etc) update: I think it's position:fixed, although I'm not sure how well this will work in IE.
<body>
<div id="ajaxIndicator" style="position:fixed; top:200px; text-align:center">
<img src="../indicator.gif" /> Loading ...
</div>
...
Might be problems with Z sorting of your DOM elements;
IE handles Z sorting of objects in a bit different way then other browsers. Try setting z-index on your wrapper element and it should help. Generally it's a best practice if you want to save you troubles with elements positioned with relatie or absolute positioning to always give their parent proper z-index;
Having the actual page to debug would make it easier.
For the sake of my sanity and getting this done today.
I have added the "ajaxLoader" element to the markup, hidden initially with CSS and then show/hide when AJAX starts/stops.
This works fine for all browsers.
Thanks to all for their input.
Related
In jQuery, is there any way to mask whole page automatically when we execute each Ajax post (to prevent input from user or double submitting...)? I see this plugin: jQuery-blockUI (http://www.malsup.com/jquery/block/) but we still have to mask/unmask manually for each Ajax post.
As I know in ExtJS, we can control this by implementing "beforeAction" function, because this event will be fired right before any action on form, but in jQuery I do not find out anything like that.
Could you please give me a solution for this? Thank you so much.
It wouldn't be too hard to do this yourself.
HTML
<body>
<div id="mask"></div>
<!-- Everything else -->
</body>
CSS
#mask{
position:fixed;
width:100%;
height:100%;
background: /* You can make this slightly transparent black rgba(0,0,0,.3); or transparent */;
top:0;
left:0;
display:none;
}
JAVASCRIPT
var isPageMasked = false,
mask = $('#mask');
var maskPage = function(){
if(isPageMasked){
mask.hide();
} else {
mask.show();
}
isPageMasked = !isPageMasked;
};
Then you would just call maskPage() when you make you want to mask and unmask the page.
You can just use the beforeSend and complete functions
$.ajax({
beforeSend: function() {
//Mask page
},
complete: function(){
//remove Mask
}
}
});
I have a Facebook like button that is loaded using ajax.
The button works, but strangely in firefox it doesn't appear.
<fb:like href="#Model.Url" show_faces="true" height="30" width="400" ></fb:like>
In Firefox the html produced comes with the height = 0px. Why?
<span style="height: 0px; width: 400px;">
<iframe id="f2b3cbcbf388e" class="fb_ltr " scrolling="no" name="f3cdf7e205a545e" style="border: medium none; overflow: hidden; height: 0px; width: 400px;" ....
This doesn't happens on Chrome.
Related to facebook I only have this before close body tag
<script> (function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=00000";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));</script>
I'm still investigating the cause, but in my case, I think it is because the containing div is hidden at the time of the XFBML parse. Still looking for a better solution but this can be fixed by clearing the added height css manually like so:
FB.XFBML.parse(document, function(){
$('.fb_button_container iframe').css('height','');
$('.fb_button_container .fb-like > span').css('height','');
});
this uses jquery... you could easily not use it if you prefer.
Also in this case I had added the like button inside of a container with class "fb_button_container" -- that is not something auto-generated.
If I have more than 1 Facebook like button per page, he has a strange behavior.
I moved the button to the details page instead of the list page and this solved my problem.
I had the same problem. Button was rendered correctly in all other common browsers except Firefox. Somehow the span's inline style was set to 0px in Firefox. Thanks to theozero I finally managed the button to be rendered correctly. Like theozero I had the Facebook Like Button placed within a div that is hidden with JS on page load. With theozero's answer I found Facebook's documentation of the FB.XFBML.parse and placed their re-parse function exactly at the end of their originally provided Facebook JavaScript SDK (last line):
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.XFBML.parse();
And voilà the button was rendered!
EDIT: Too happy too soon. That only worked, cause immediately on page load I unhid the div containing the button. I than put the parse function into the JS that unhides the div. That works. It does. But now the element isn't toggling smoothly anymore... Argh! Facebook! Hole!
EDIT: So! Now it's done. Had to call the re-parse as callback on the slideToggle function, to re-parse the element when the toggling action was finished. .slideToggle('slow', function(){ FB.XFBML.parse(); }); Sure, the like button visibly pops up then suddenly, but I can live with that, although I could let the button fade hin somehow.
It took me an entire day to figure it out, but being logged in on Facebook with a "test user" renders the like button invisible. In my case, I was always logged in with my test user on Firefox, while logged out / logged in with my regular Facebook user in Chrome (and I initially thought this was a browser issue).
However, the solution was as easy as loggin off the test user.
It is specified in the FB docs that not all features are enabled for test users (and the like button is one of those features), but I'd thought that it would at least get rendered.
Anyway, I hope this helps someone.
As part of a page I am filling a div
{width:496px; height:640px; overflow-x: hidden ; overflow-y:auto; }
with ajax calls:
function ajaxcall(program, param) {
$("#ajaxloader").html("<IMG src='ajax-loader.gif'>");
$("#content").hide(); $("#ajaxloader").show();
$.ajax(
{
url: program,
type:"POST",
data: { "param":param },
success: function(back)
{
$("#ajaxloader").hide();
$("#content").html(back);
$("#content").fadeIn(300);
}
});
}
Depending on the mouse position, Chrome fills in the ajax content partly or completely outside of visible content div area. Safari, Firefox all work fine, chrome doesn't.
My research was unsuccesful so far. Trying a complete overflow:auto didnt work. Anyone a solution?
Try to set, overflow-y: hidden and overflow-y: auto back again. I hope it will helps. (I hate browsers differences)
I'm currently using jQuery Waypoints to highlight nav items as you scroll through sections of the page. All of that works fine; thanks to copying the code from the demo at http://imakewebthings.github.com/jquery-waypoints/.
My demo is: http://www.pandlmedia.com/index.php/index_new
However, I also want to create a waypoint at the #footer div which would trigger an event to change the color of all of the nav links.
$('#footer').bind('waypoint.reached', function(event, direction) {
$('.nav ul a').addClass('white');
});
This doesn't work, as there's nothing telling it to change back once it exits the #footer div. I'm not very experienced in writing jQuery or using this plug-in for that matter. What do I need to add to make this work? Is the fact that there are two levels of waypoints also causing problems?
well, looking closer at the "sticky elements" demo, I was able to modify the example of the disappearing '.top' button to make this work for my own needs described above:
<script type="text/javascript">
$(document).ready(function() {
$('.container .nav ul a').addClass('black');
$.waypoints.settings.scrollThrottle = 30;
$('#footer').waypoint(function(event, direction) {
$('.container .nav ul a').toggleClass('black', direction === "up");
}, {
offset: '50%'
});
});
The key was to add the .black class below the .white class in my css so that it overrides the color parameter properly.
I have several methods in my models, which are called by my controller. On the client, I want to update a progress bar while the model methods are running.
How can I communicate with the controller to get its progress?
True that you need AJAX / long polling to make this work. Here is XMLHttpRequest2. And to me, this has taken the web to next level. Its time for us to use it. I ve used it with jquery. Probably a lot more easy to understand what I ve done. Might need a little tweak to make it work. Here it goes..
$.ajax({
type: 'POST/GET',
url: "link/to/controller/method",
data: {whatever = 'foo'},
beforeSend: function(XMLHttpRequest)
{
//Upload progress
XMLHttpRequest.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
$( ".jquery-uploadbar-selector" ).progressbar({ value: percentComplete }); //jquery progress bar for upload
//incase you wanted an upload bar
}
}, false);
//Download progress
XMLHttpRequest.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
$( ".jquery-downloadbar-selector" ).progressbar({ value: percentComplete });
//jquery progress bar for download or in other words The real answer for question
}
}, false);
},
success: function(data){
//Here goes the end of what you have done.. I would just type..
console.log('Yay!! I guess, I ve answered my first bounty question and hoping to see it work well.');
}
});
Hope it works.. let me know if I am wrong somewhere.
You can't do this using PHP since PHP is server side and when it has completed its work the result is sent to the browser.
You may use Javascript to make AJAX call (google this, it is a way to make call to the server without reloading the page) and each time a method of the model is completed you may add 'loading' to your progress bar using JS. but really in PHP there isn't a way to know how much of an action has been completed
There are ways to do this with file uploads via Apache and NGINX, however that won't apply to your situation.
One way of doing it would be to use AJAX long polling to monitor a special controller or method of your controller to look for updates and update on the frontend when it changes.
have http connection open with client(user) and when you start the job send data(isWaiting=1) to your client or do ajax polling as Asiq said and fetch isWaiting status.
on html client side page , javascript to load progress bar when isWaiting=1
html page having this inside body tag
<div class="overlay" style="display:none;"></div>
and css
.overlay { width:100%; height:100%; z-index:5000; left:0;/IE/ top:0;
text-align:center; position:fixed;
background: url('https://memberschemes.rics.org/MembersPortal/images/ajax_loader-2.gif') no-repeat fixed center center;
background-color: #EFEFEF;
opacity:0.7;
/*
background: #F4F4F4;
background-repeat: no-repeat;
background-position: center;
*/
}