Show loading gif after submit button is clicked in codeigniter

Question

How can I show loading GIF in the submit button in Codeigniter?

 <button class="btn btn-primary" type="submit" name="save">
                        <?php echo lang('save'); ?>
                    </button>

In my CSS file

#btn btn-primary{
position:fixed;
left:0px;
top:width:100%;
height:100%;
z-index:9999; 
background:url(images/pageLoader.gif)50% 50% no-repeat rgb(249,249,249);
}

In my JS file:

$('document').ready(function(e){ 
$("#btn btn-primaryr").fadeout("slow")

are you using ajax form submit? – M.Hemant Mar 15 '19 at 12:04 — M.Hemant, Mar 15 '19 at 12:04
yes i am using ajax submit – puskar bist Mar 15 '19 at 12:05 — puskar bist, Mar 15 '19 at 12:05

score 0 · Answer 1 · answered Mar 15 '19 at 18:05

0

try this: do not use image in css give in tag

<img src="<?php url().images/pageLoader.gif?>" id="image">
$('.btn btn-primary').submit(function() {
    $('#image').css('visibility', 'visible');
});

answered Mar 15 '19 at 18:05

Birendra Singh

93
12

score 0 · Answer 2 · answered Mar 15 '19 at 18:32

You should use like that:

$("#signup-form").submit(function(event) {
    event.preventDefault();
    var form_data = new FormData($('#signup-form')[0]);
    $.ajax({
            url  : baseURL + "api/signup",
            type : "POST",
            data : form_data,   
            dataType : "JSON",   
            cache: false,
            contentType: false,
            processData: false,   
            beforeSend:function(){
              ajaxindicatorstart();
            },       
            success: function(resp){
                if(resp.resp == 1){
                    $('#signup-form')[0].reset();
                    alert(resp.Message);
                }else{
                    alert(resp.Message);  
                }
                ajaxindicatorstop();
            },
            error:function(error)
            {
                ajaxindicatorstop();
            }
        });
});


function ajaxindicatorstart() {
  if (
    jQuery("body")
      .find("#resultLoading")
      .attr("id") != "resultLoading"
  ) {
    jQuery("body").append(
      '<div id="resultLoading" style="display:none"><div><img src="' +
        baseURL() +
        'asset/img/ajax-loader.gif"><div>Loading...</div></div><div class="bg"></div></div>'
    );
  }

  jQuery("#resultLoading").css({
    width: "100%",
    height: "100%",
    position: "fixed",
    "z-index": "10000000",
    top: "0",
    left: "0",
    right: "0",
    bottom: "0",
    margin: "auto"
  });

  jQuery("#resultLoading .bg").css({
    background: "#000000",
    opacity: "0.7",
    width: "100%",
    height: "100%",
    position: "absolute",
    top: "0"
  });

  jQuery("#resultLoading>div:first").css({
    width: "250px",
    height: "75px",
    "text-align": "center",
    position: "fixed",
    top: "0",
    left: "0",
    right: "0",
    bottom: "0",
    margin: "auto",
    "font-size": "16px",
    "z-index": "10",
    color: "#ffffff"
  });

  jQuery("#resultLoading .bg").height("100%");
  jQuery("#resultLoading").fadeIn(300);
  jQuery("body").css("cursor", "wait");
}

function ajaxindicatorstop() {
  jQuery("#resultLoading .bg").height("100%");
  jQuery("#resultLoading").fadeOut(300);
  jQuery("body").css("cursor", "default");
}

Loading Image URL:-

https://pqmsystems.biz/asset/img/ajax-loader.gif

Please try this way....

Show loading gif after submit button is clicked in codeigniter

2 Answers2