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)
Related
Sorry to ask such a basic question. I would like to add an Ajax feature to my input page which does:
use the blockUI plugin to add a popup window which tells users to wait
in the meanwhile ajax detects the existence of output page
if calculations are finished, ajax redirects the browser to the output page (batchoutput.html)
If everything goes well, the popup message will appear for around 1-2 mins until the calculations are done, then the browser will be redirected to the batchoutput.html page.
However, the situation is: the popup message window appears only for a second, then after a min or two the browser goes to the batchoutput.html. My guess is something is wrong with my ajax function. It seems like the ajaxstart and ajaxstop are misfired. Can I have some suggestions?
Here is the code:
$('.input1_button').click(function () {
$(document).ajaxStart(function(){
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} });
});
$(document).ajaxStop(function(){
$.unblockUI();
});
$.ajax({
type: "post",
url: "/batchoutput.html",
data: $(".articles").serialize(),
dataType: "html",
success: function() {
window.location = '/batchoutput.html';
}
});
});
ajaxStop is fired right after the ajax request is complete, and complete means error or success.
Therefore, what happens after you click a button is:
ajaxStart is fired, causing UI to block
ajax request to /batchoutput.html is performed
if request fails, ajaxStop is fired, causing UI to unblock
My suggestion is to:
block UI on button click (i.e. move $.blockUI directly into click function)
after that, send ajax request repeatedly until it finishes with success (you can use Javascript's native function setInterval or trigger next request on ajaxError)
when request succeds, unblock UI and redirect (this can be done either directly in success callback or in ajaxSuccess method)
I am trying to load HTML into the fancybox popup. Everything works great in every other browser but IE 8 (I haven't checked other versions of IE). The popup opens but there is nothing in it.
This is my js:
$(".fancyPopup").live('click', function(ev){
ev.preventDefault();
var selectedStrip = '#' + $(this).attr('id');
$(".fancyPopup").live('click', function(ev){
ev.preventDefault();
var selectedStrip = '#' + $(this).attr('id');
$.fancybox(
{
href: '/snapav/mkting/html/rackPowerStripSuggestions.html',
type: 'ajax',
fitToView : false,
afterShow: function(){
hideSeries();
$('.strips:not("' + selectedStrip + '")').hide('slow', function(){
$('ul' + selectedStrip).addClass('flagged');
});
}
});
});
Any help is MUCH appreciated.
This was actually 2 issues.
To get the content to fill the popup in IE, I needed to add a DOCTYPE and all that info that goes into a plain HTML page. Wasn't aware of that.
IE has a difficult time with animate. You have to have the exact property match up in your CSS that you are animating. So if in your CSS you have "padding: 4px 0", you have to break it down to "padding-top: 4px and padding-bottom: 4px" in your css, because you can't animate shorthand CSS in jQuery.
Lots learned here! Hopefully this can help someone else in the future.
I'm trying to mantain a container div behind my colorbox fixed while the user scrolls inside the colorbox itself.
I Google´d about it and found, quoting Jake Moore:
Example:
$().bind('cbox_open', function(){
$('body').css({overflow:'hidden'}); }).bind('cbox_closed', function(){
$('body').css({overflow:'auto'}); });
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
But the previously aint working for me, the scroll locks in the div behind but also in the colorbox, so the user cant scroll anywhere!
I am guessing the iframe has something to do with it since im calling colorbox this way:
$(document).on("click", ".some-link", function(e){
e.preventDefault();
var url = $(this).attr('href');
$.colorbox({
onComplete: function(){
some other stuff()
$.colorbox.resize();
$('body').css({overflow:'hidden'})
},
onCleanup: function(){
some other stuff()
$('body').css({overflow:'hidden'})
},
href: url,
});
});
Any ideas? Is there any other way to disable the scroll within a div, but allowing it in another one ?
Im using colorbox with something like infinite-scroll so when the user scrolls down more information keeps showing up (div boxes actually). Those boxes are the ones that fire the colorbox, ".some-link" is a link within the box.
Hope my english is tuned. Regards! Agustin
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;
*/
}
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.