如何在 jquery ui 手风琴点击中填充占位符答案

【问题标题】：How to populate place holder on jqueryui accordin click如何在 jquery ui 手风琴点击中填充占位符
【发布时间】：2012-07-25 22:12:23
【问题描述】：

我在 jqueryui 上加载占位符时遇到问题点击。我已经从后端填充。我需要根据accordin 标题点击填充占位符。

这是我的html

<html>
<head>
    <script>

    $(function () {
        $('#login').button({ icons: { primary: "ui-icon-person"} });
        $('#showDataSource').button({ icons: { primary: "ui-icon-newwin"} });
        $('#logout').button({ icons: { primary: "ui-icon-locked"} });

        $('#login').click(function () {

            var panel = $('#loginPanel').dialog({ modal: true });
            panel.parent().appendTo($("form:first"));
        });

        $('#logout').click(function () {
            (function (event) {

            });
        });

        $('#showDataSource').click(function () {
            $('#dataSource').dialog({ modal: true, width: 1000, height: 700 });
            $('.accordion').accordion({ autoHeight: false, navigation: true, collapsible: true,
                active: false,
                changestart: function (event, ui) {
                    var dataSourceID = ui.newHeader.find('a').attr('id');
                    //var dataSourceColumn = EasyOutputWeb.Services.GetDataSourceColumns(dataSourceID, onsuccess, onError);
                    $.post(dataSourceID, function (data) {

                        //ui.newHeader.next("div").html(dataSourceID);
                        $('#columnPlaceHolder').html(dataSourceID);
                    });
                }
            });
        });
    });

    function onsuccess(msg) {
        alert(msg);
    }
    function onError(msg) {
        alert(msg);
    }

    </script>

</head>

<body>
        <div id="dataSource" runat="server">  
                <div class="divtable">  
                    <div class="headrow" id="#accordianHeight">  
                        <div class="divcol">  
                            Data Sources</div>  
                        <div class="divcol" >  
                            Columns</div>  
                        <div class="divcol">  
                            Strong Keys</div>  
                    </div>  
                    <div class="divrow">  
                        <div class="content">  
                            <div class="accordion" id="accordianHeight">  
                                <asp:PlaceHolder ID="dataPlaceHolder" runat="server" />  
                            </div>  
                        </div>  
                        <div class="content">  
                            <div id="dataColumn">  
                                test column  
                                <asp:PlaceHolder ID="columnPlaceHolder" runat="server" />  
                            </div>  
                        </div>  
                        <div class="content" >  
                            <div id="dataKey">  
                                Test key  
                                <asp:PlaceHolder ID="keyPlaceHolder" runat="server" />  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>  

</body>
</html>

【问题讨论】：

标签： asp.net jquery-ui

【解决方案1】：

这里的第一个错误是你使用PlaceHolder 而他们are not warp with any tag 所以jQuery 无法抓取它们。使用带有 span 或 div 内容的 Panel 扭曲。

第二个错误是asp.net在渲染它们的时候，每一个的最终id都是从.ClientID属性中得到的，所以jQuery的代码是这样的：

$('#<%=columnPlaceHolder.ClientID%>').html(dataSourceID);

还有一条评论，如果您实际上没有在Panel 后面的代码上添加任何控件，那么您只需放置一个<div id="columnPlaceHolder"></div> 代码来编写它们，并像现在一样使用jQuery 调用（不要'不添加 ClientID)

【讨论】：

非常感谢，它的工作。但我的方法没有返回任何结果集。
非常感谢，它的工作。但我的方法没有返回任何结果集。这是我的方法 var dataSourceColumn = EasyOutputWeb.Services.GetDataSourceColumns(dataSourceID, onsuccess, onError);我从 asmx 文件中调用。 [WebMethod(EnableSession = true)] [ScriptMethod] public string[] GetDataSourceColumns(string dataSourceId) { //做一些操作并返回name数组，我可以通过使用alert return names.ToArray在onsuccess(msg)中看到结果();
@user1557020 这是第二个问题。实在不明白这是什么问题。
//var dataSourceColumn = EasyOutputWeb.Services.GetDataSourceColumns(dataSourceID, onsuccess, onError) 这是我从 webservice 调用的方法，它返回数组字符串，我应该将此数组字符串绑定到我的 div 列“columnplaceholder”。