在codeigniter中单击提交按钮后显示加载gif [重复]答案

【问题标题】：Show loading gif after submit button is clicked in codeigniter [duplicate]在codeigniter中单击提交按钮后显示加载gif [重复]
【发布时间】：2019-03-16 02:32:11
【问题描述】：

如何在 Codeigniter 的提交按钮中显示加载 GIF？

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

在我的 CSS 文件中

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

在我的 JS 文件中：

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

【问题讨论】：

你在使用ajax表单提交吗？
是的，我正在使用 ajax 提交

标签： codeigniter

【解决方案1】：

试试这个：不要在css中使用图像给标签

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

【讨论】：

【解决方案2】：

你应该这样使用：

$("#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");
}

加载图片网址：-

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

请尝试这种方式....

【讨论】：