可折叠不适用于 Ajax答案

【问题标题】：Collapsible doesn't work with Ajax可折叠不适用于 Ajax
【发布时间】：2014-05-20 13:55:42
【问题描述】：

我正在尝试将带有 ajax 的数据库中的内容插入可折叠集（jquery mobile）中。我的问题是可折叠的东西目前不起作用。它卡在关闭位置，我的搜索过滤器无法搜索。

我不确定我在加载页面时的事件（有时我的可折叠设备从页面中消失，当我来自另一个示例时）。我对底部div的刷新也有疑问。

另外，如果您有代码建议。也许有更好的方法来做到这一点。

$homeDir = "http://localhost:8888/media";
$(document).on("pageinit ", "#informatique", afficherBranche);

function afficherBranche() {

    // Chargement des classes et des informations y relatives
    $.ajax({
        url: $homeDir + "model/getdata.php",
        dataType: "json",
        type: "GET",
        // en cas de succès
        success: function (data) {
            $("#collapsiblesetForFilter").empty(); // Vide le contenu de la LV
            // Parcours de l'objet jSon
            for (var i = 0; i < data.length; i++) {
                $("#collapsiblesetForFilter").append('<div data-role="collapsible" data-iconpos="right" data-filtertext="HTML programmation web" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-first-child ui-collapsible-collapsed">' + '<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">' + '<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-plus">' + data[i]["titre"] + '<span class="ui-collapsible-heading-status"> click to expand contents</span>' + '</a></h3>' + '<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">' + '<p>' + data[i]["description"] + '</p></div></div>');
            }
        },
        error: function () { }
    });
    $('#collapsiblesetForFilter').collapsibleset().trigger('create');
};

【问题讨论】：

你试过在ajax成功后调用$( ".selector" ).collapsibleset( "refresh" );吗？喜欢：$.ajax({/*blah*/, success : function(data) { /*do stuff*/; $('#collapsiblesetForFilter').collapsibleset( "refresh" );}});
您能否发布一个简单的 JSON 输出，我们可以使用它来重新创建您的示例？
感谢您的帮助。是的，移动刷新有很大帮助。此外，由于我正确刷新了它，因此我放入附加中的所有代码都是重复的。所以我删除了我的 div 中的一些类，和，现在它可以工作了。

标签： javascript jquery ajax jquery-mobile

【解决方案1】：

代码建议：

尝试使用 deferred，因为回调已被弃用。按照链接并搜索“弃用”，您将获得说明以及如何使用它。 jQuery.ajax()

基本上就是 $.ajax(..).done(function success() {}).fail(function error() {});

我不会说法语，所以我不确定出了什么问题，但我想你的最后一行也应该只在成功时调用，不是吗？这意味着您只需在 for 循环之后移动这一行。

【讨论】：

感谢您的帮助。正如你所说，向上移动这条线有点帮助。 $('#collapsiblesetForFilter').collapsibleset().trigger('create');所以我应该使用 .done 而不是使用 succes 而不是 error 它是失败？让我们看看它是否有效:)
是的。 .fail() 相当于错误回调。 Deferred 也是可转换的。你可以做“$.ajax(...).then(dosomething else which could fail).done(whatever).fail()”。这将导致给 then 的函数在成功的 ajax 调用之后执行，如果 then 函数有效则执行，如果之前有任何失败，则为 fail()。（据我了解..但我没有案例来测试这个）