CodeIgniter and Progress bar - codeigniter

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;
*/
}

Related

Fancybox ajax content not loading in IE

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.

Mask whole page when execute jQuery post?

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
}
}
});

Rollover images delay redirect to url onmouseover but stop onmouseout

Ok i looked thru all the answers for now but i cant find a solution.
This is what i am trying to create i have multple rollover images on 1 page every rollover image has his own url to a specific part of the homepage.
What i want is that when you move your mouse over it it shows the second image and it delays the redirect to the url until it hits the 3000 ms and then redirects the user to the url. But the delay must be stoped onmouseout and it doesnt redirect the user and it shows the first image again, all the rollover images must do the same thing on the same page, but each rollover has his own url.
Who can help me with some information on how to..
I would do the changing of the image with CSS and :hover, and do the redirect and timeout with javascript like so:
// markup
<a id="my_image_1" class="hover_linker" href="some_link_to_the_homepage.html"></a>
// styles
.hover_linker {
width:363px;
height:300px;
display:block;
}
#my_image_1 {
background-image: url('some-image.jpg');
}
#my_image_1:hover {
background-image: url('another-image.jpg');
}
// scripts
var redirectTimeout;
$(document).ready(function() {
$('a.hover_linker').mouseover(function(e){
redirectTimeout = window.setTimeout(function () {
window.location.href = $(e.target).attr("href");
}, 3000);
}).mouseout(function(){
window.clearTimeout(redirectTimeout);
});
});

jQuery Waypoints with different actions

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.

jQuery Ajax spinner not displaying in IE7

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.

Resources