使用 jqtouch 实现 ajax 加载微调器答案

【问题标题】：implementing an ajax loading spinner with jqtouch使用 jqtouch 实现 ajax 加载微调器
【发布时间】：2011-08-03 08:00:50
【问题描述】：

我想知道需要什么 javascript 或 jquery 函数才能让 ajax 加载微调器与 jqtouch 一起使用。

我在页面上有一个搜索按钮，单击该按钮时会提交到一个 php 文件，该文件处理搜索结果并逐行回显 hthml 中的结果 jqtouch 自动放入新 div 的 div（这是我的第一个 jqtouch 应用程序，但这看起来很标准，新的“页面”只是 html 中的新 div）。

我必须点击搜索按钮才能触发 javascript，因为我正在测试的 iphone 上不会出现“实时”和类似的 jquery 功能。 Onclick 我知道调用一个函数来“显示”页面上的加载 div，并在我感到沮丧时将其隐藏，但是我不知道如何检测 php 文件已完成对页面结果的处理，因为我不知道如何jqtouch 告诉我们。

编辑

function popup(){
    $('#popup').ajaxStart(function(){
        $(this).show();
        });

    $('#popup').ajaxComplete(function(){
        $(this).hide();
        });     

    }

这可以在计算机上运行，但有一个错误，正如我在下面对 bohzo 的回复中所解释的那样，我如何让它在 iphone 上运行？它在一个函数中，因为在我的 jqtouch 实现中需要 onclick 操作。

【问题讨论】：

它不叫'spinner'。微调器是一个数字选择器 +/-
一点眼睛糖果ajaxload.info
不，在这种情况下，微调器是一个小的动画旋转 gif，表示正在处理请求。

标签： javascript jquery jqtouch

【解决方案1】：

这适用于我的应用程序。

    function SubmitSearch()
    {
      $("#loading_gif").show();
      $.post('url to the php file', {var1: searchkey}, function(data) {
        $("#loading_gif").hide();

        //do something with returned data
        alert(data);
       });
    }

您可以将 php 文件中的搜索键捕获为 $key = $_POST[var1]; 希望这会有所帮助。

【讨论】：

【解决方案2】：

您可以使用.ajaxStart(..) 和.ajaxComplete(..)

【讨论】：

这似乎在我的电脑上工作，谢谢。在我接受答案之前，我会在我的 iPhone 上进行更多测试，因为我知道 jqtouch 是什么样的。
嗯，它在计算机上运行良好，但在 iphone 上却无法按预期运行。第一次单击搜索时，加载 gif 不会出现。如果我再次单击返回并再次单击搜索，它将出现。如果您愿意发表意见，我的代码将被编辑到我的问题中。

【解决方案3】：

这适用于使用 Zepto 的 jQTouch（尚未使用 jQuery 测试）。

CSS：

div#jqt #loading {
  background: rgba(0,0,0,0.5) url('../images/scanner/loading.gif') 50% 50% no-repeat;
  z-index: 999;
  position: fixed;
}

JS：

$(document).on('ajaxStart', function(){
    $('#loading').addClass('current');
});

$(document).on('ajaxStop', function(){
    $('#loading').removeClass('current');
});

【讨论】：