loading bar

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??

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

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

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


}