Ajax 加载图标不显示在 Ajax 函数上 - Codeigniter答案

【问题标题】：Ajax Loading Icon Not Displaying on Ajax function - CodeigniterAjax 加载图标不显示在 Ajax 函数上 - Codeigniter
【发布时间】：2012-11-14 18:23:44
【问题描述】：

由于某种原因，我的 Ajax 加载程序图标没有按应有的方式显示和隐藏。这是我处理 ajax 调用的 jQuery 代码的 sn-p。我可以使用 Chrome 的开发人员工具看到#loading DIV...问题在于 jQuery 没有显示 DIV（在 div 本身上设置为 display:none 的内联样式）。如果我删除该内联样式，它会显示在它应该出现的位置...

我在这里遗漏了什么？

//website URL grab - Ajax call
$('.loadBTN').on("click", function(){

    var check_url = $('#web_address').val();

    if (!check_url || check_url == 'http://') { // form validation
        //alert('Please enter valid URL');
        // Do nothing
        return false;
    };

    var web_url = {
        url: $('#web_address').val(),
        ajax: '1' // needed for controller, to verify that request is ajax
    };         

    //display ajax loader animation
    $('#loading').show();

    $.ajax({
        url: 'ajax/web_embed',
        type: 'POST',
        data: web_url,
        success: function(msg) {
            $('#ajaxContent').html(msg); // output success in this container
            $('#loading').hide();
        } 
    });        


    return false;
});

【问题讨论】：

页面打开时在浏览器控制台中尝试$('#loading').show();会发生什么？
不明白你的意思，伙计……

标签： jquery ajax codeigniter codeigniter-2

【解决方案1】：

我建议订阅所有 ajax 开始/停止事件，而与谁负责：

$("#loading")
    .ajaxStart(function(){ $(this).show(); })
    .ajaxStop(function(){ $(this).hide(); });

一旦有ajax请求加载就会出现，当没有ajax请求正在进行时隐藏...

见http://api.jquery.com/ajaxStart/

【讨论】：

你建议我把它放在我的函数中的什么地方？我尝试了类似的东西......无济于事。
假设在body标签结束之前，只要这个javascript被执行时id为“loading”的元素就存在
不工作...没有错误。压缩。用这个替换了 .show() 函数...... $.ajax 函数之外的那个
你不必把它放在你的函数中，这段代码会知道什么时候有一个全局的ajax请求并相应地显示加载
对于已经对元素 ID 进行了两次和三次检查但仍未使其正常工作的每个人，我必须将 ajax 事件附加到文档而不是加载覆盖：$(document).ajaxStart(function(){$("loading").show();}).ajaxStop(function(){$("loading").hide();}。我正在使用 jQuery 2.0.3 并在 $(document)ready() 中附加 ajax 事件。

【解决方案2】：

更简洁的 Ajax 请求 IMO。使用Context 和BeforeSend

var scope = $("#container"); // wrap in a container div to use as the context

    $.ajax({
        url: 'ajax/web_embed',
        type: 'POST',
        data: web_url,
        context : scope,
        beforeSend : function(){ // use beforeSend 
            $('#loading').animate({
                'display'   :   'block'
            });
        },
        success: function(msg) {
            $(this).html(msg); // $(this) == context => #container
        } 
    });

【讨论】：