【问题标题】:Load Jquery Accordion after button click using Jquery使用 Jquery 单击按钮后加载 Jquery Accordion
【发布时间】:2013-02-13 23:33:39
【问题描述】:

我正在使用 JQuery UI Accordion,它适用于静态内容。但是,当我从 ajax 休息服务调用中加载手风琴的 H3 和 Div 标签时。数据正常显示,但手风琴没有加载

onSuccess: function (data) {
        var results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;
        var html = "";

        for (var i = 0; i < results.length; i++) {
            html += "<div><h3><a href=\"#\">";
            html += results[i].Cells.results[3].Value;
            html += "</a></h3><p>"
            html += results[i].Cells.results[6].Value;
            html += "</p></div>";
        }
$("#results_accordion").accordion();

我的 Accordion Div 最初是空的,我想在单击按钮时填写上述服务调用中的数据。

$("#results_accordion").accordion();

有什么帮助吗?

【问题讨论】:

  • 只需在此处添加流程.. 第一页加载为空 results_accordion div --> 用户单击按钮 --> AJAX 调用使用 JQuery 将数据加载到 Accordion 上
  • 在执行手风琴功能之前,您应该先将html内容添加到您的页面中

标签: accordion jquery-ui-accordion


【解决方案1】:
$("#results_accordion").html(html).accordion();

在执行手风琴功能之前,您应该先将 html 内容添加到页面中

【讨论】:

    【解决方案2】:

    这是我实际调用的点击事件..

    function onclic(queryTerms) {
    
    Results = {
        element: '',
        url: '',
    
        init: function (element) {
            Results.element = element;
            Results.url = someurl;
        },
    
        load: function () {
            $.support.cors = true;
            $.ajax(
                    {
                        url: Results.url,
                        method: "GET",
                        headers: {
                            "accept": "application/json;odata=verbose",
                        },
                        success: Results.onSuccess,
                        error: Results.onError
                    }
                );
        },
    
        onSuccess: function (data) {
            var results = data.d.results;
            var html = "";
    
            for (var i = 0; i < results.length; i++) {
                html += "<div><h3><a href=\"#\">";
                html += results[i].Cells.results[3].Value;
                html += "</a></h3><p>"
                html += results[i].Cells.results[6].Value;
                html += "</p></div>";
            }
    
    
            Results.element.html(html);
            $("#results_accordion").accordion();
        },
    
        onError: function (err) {
            alert(JSON.stringify(err));
        }
    }
    
    Results.init($('#results_accordion'));
    Results.load();
    $("#results_accordion").accordion();
    

    }

    【讨论】:

    • 如您所见,我调用了 $("#results_accordion").accordion();在调用 Results.load() 之后。
    猜你喜欢
    • 2012-09-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-06-19
    相关资源
    最近更新 更多