使用 jqtouch 实现 ajax 加载微调器

Question

我想知道我需要什么 javascript 或 jquery 函数来获得与 jqtouch 一起使用的 ajax 加载旋转器。

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

我必须在搜索按钮上单击才能触发 javascript，因为“live”和类似的 jquery 函数不会在我正在测试的 iPhone 上运行。 Onclick II 知道调用一个函数来在页面上“显示”加载 div 并在我得到响应时隐藏它，但随后我迷失了如何检测 php 文件已完成处理页面结果，因为我不知道如何jqtouch 告诉我们这一点。

编辑

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

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

    }

这可以在计算机上运行，​​但有一个错误，如我在下面对 bohzo 的回复中所解释的，我如何让它在 iPhone 上运行？ 它位于一个函数内，因为 onclick 操作在我的 jqtouch 实现中是必需的。

Answer 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];
希望这有帮助。

Answer 2

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

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