Question

我试图在另一个问题中遵循建议，但我可能没有得到正确的语法。

当我点击div时，它会触发一个JQuery调用 - 它调用一个AJAX函数，加载一个文档。 AJAX调用必须返回到服务器并获取一些计算量很大的元素，因此我的想法是仅在AJAX调用将文档加载到目标div时才向下滑动JQuery滑块。使用$.when ... .done(...)确实要等到它完成，但它只是将div完全降低，而不是给我一个好的＆＃34;幻灯片＆＃34;在第一次点击。

奖励：希望光标变化一点＃34;加载＆＃34;或沙漏图标，而它等待让用户知道正在发生的事情。但这并非完全必要。

AJAX和Jquery：

function loadDoc(myUrl, id) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById(id).innerHTML =
                this.responseText;
        }
    };
    xhttp.open("GET", myUrl, true);
    xhttp.send();
}

$(document).ready(function () {

    $('.projSliderContent').hide();

    $('.projectSliders').on('click', function () {
        var targetArea = $(this).next('.projSliderContent');
        var urlToPass = $(targetArea).attr('url');
        var idOftarget = $(targetArea).attr('id');
        $.when(loadDoc(urlToPass, idOftarget)).done(   //fires AJAX func
            $(this).next('.projSliderContent').slideToggle("slow")
        );
    });
});

这是HTML：

 <div class="container-fluid" id="userProjectsSelectors">
        <div class="row-fluid">   
                <h2 id="projSlidersHeader">PROJECTS</h2>
                <div class="projectSliders" id="projleadSlider">
                    <h3>View Projects You Lead</h3>
                </div>
                <div class="projSliderContent" id="userLeadProjectsDiv" url='/my/url/here'>
                </div>
        </div>
    </div>

这里有一个jsfiddle - 它不能正常工作但可能有助于可视化。

Answer 1

$.when()期望承诺作为参数但你的函数不会返回。

可以简化它以使用返回promise的jQuery ajax方法

function loadDoc(myUrl, id) {    
  return $.get(myUrl).then(function(data) {
    $('#' + id).html(data)
  });    
}

甚至更容易使用jQuery load()：

$('.projectSliders').on('click', function () {
    var targetArea = $(this).next('.projSliderContent');
    var urlToPass = $(targetArea).attr('url');

    targetArea.load(urlToPass , function(){
       $(this).slideToggle()
    })
})

的 DEMO

Answer 2

你快到了。

问题是，您不是在等{AJ}呼叫完成slideToggle

之前完成的

您应该使用Deferred

function loadDoc(myUrl, id) {
  var d1 = $.Deferred();
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById(id).innerHTML =
        this.responseText;
      d1.resolve();
    }
  };
  xhttp.open("GET", myUrl, true);
  xhttp.send();
  return d1;
}

请注意，我将延迟对象返回$.when。当AJAX调用完成后，我正在解析延迟，然后执行.then()部分

详细了解Deferred here

PS。你小提琴坏了。你没有加载jQuery

AJAX加载后触发Jquery滑块

2 个答案: