CodeIgniter Forums
loading bar - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forum-5.html)
+--- Forum: General Help (https://forum.codeigniter.com/forum-24.html)
+--- Thread: loading bar (/thread-64319.html)



loading bar - rchiu5hk - 02-08-2016

I am using codeigiter php with mysql db.

If I want to add loading bar in the most easy way after submit button until refresh the page, do you have any suggestion??


RE: loading bar - Diederik - 02-08-2016

Your question is unrealted to Codeigniter. You will need client side Javascript for this. In Jquery you could do it like this:

Code:
$(".button").click(function(e) {

   e.preventDefault();

   $('#result').html('<img src="/ajax-loader.gif" alt="Loading"/>');
   
   $.ajax({
       type: "POST",
       url:  '/yourUrl' ,
       data: { YourDataArray},
       success: function (data) {
           $('#result').html(data);
       },
       error: function (xhr, status) {
           $('#result').html('Error, somethign went wrong');
       }
   });



RE: loading bar - rchiu5hk - 02-08-2016

(02-08-2016, 02:44 AM)Diederik Wrote: Your question is unrealted to Codeigniter. You will need client side Javascript for this. In Jquery you could do it like this:

Code:
$(".button").click(function(e) {

   e.preventDefault();

   $('#result').html('<img src="/ajax-loader.gif" alt="Loading"/>');
   
   $.ajax({
       type: "POST",
       url:  '/yourUrl' ,
       data: { YourDataArray},
       success: function (data) {
           $('#result').html(data);
       },
       error: function (xhr, status) {
           $('#result').html('Error, somethign went wrong');
       }
   });

thanks


RE: loading bar - rchiu5hk - 02-08-2016

Hi,

I meet difficulty now.
I have below code. It seems it cannot work with your suggested code. Do I have any missing??
// --------- My Code ----------Without Loading bar---------------------------------
In controller call, in the function , $this->load->view('category.php', $data);
It only works with
document.getElementById("myForm").action="<?php echo base_url().MY_PATH; ?>getAll/1/".concat(catID).concat('/').concat(activeTab);
document.getElementById("myForm").submit();
// -----------Use your suggested code------With Loading Bar---------------------
// ---------Loading bar show but it seems the URL has problem after click a href. As the controller is loading view and without return success or any other thing // such as json response.......

In controller call, in the function , $this->load->view('category.php', $data);

In view page, <a id="newAds1" name="newAds1" href="#newAds" onclick="return setupTab('newAds', 'newAds1');"><?php echo $lblConditionNew;?>

In javascript ,
function setupTab(activeTab, activeCtrl){
var catID=document.getElementById("search-category").value;
$('#pleaseWaitDialog').modal('show');

setForm(function(data)
{
if(data == true)
{
$.ajax({
xhr: function()
{
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total*100;
//Do something with upload progress
$("#upload-progress-bar").width(percentComplete+"%");
console.log(percentComplete);
}
}, false);
return xhr;
},
url: "<?php echo base_url().MY_PATH; ?>getAll/1/".concat(catID).concat('/').concat(activeTab),
//data: formData,
processData: false,
contentType: false,
type: 'POST',
success:function(msg){
$("#".concat(activeCtrl)).attr("href", "<?php echo base_url().MY_PATH; ?>getAll/1/".concat(catID).concat('/').concat(activeTab));
$('#progress-bar').css("display", "none");
$('#pleaseWaitDialog').modal('hide');
}
});
}
return data;
});


}