How to populate place holder on jqueryui accordin click

Question

I have problem in loading placeholder on jqueryui accordin click. I have populated according from backend. i need to populate the place holder based on the accordin header click.

this is my 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>

score 0 · Answer 1 · edited May 23 '17 at 10:24

0

The first mistake here is that you use PlaceHolder that they are not warp with any tag and so jQuery can not grab them. Use Panel that warp with span or div your content.

Second mistake is that when the asp.net renders them the final id of each one is get from the .ClientID property, so the code of jQuery will be as:

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

And one comment, if you do not actually add any controls on code behind on your Panel's then you simple place a <div id="columnPlaceHolder"></div> code to write on them, and use the jQuery call as it is now (don't add the CliendID)

edited May 23 '17 at 10:24

Community

1
1

answered Jul 27 '12 at 08:59

Aristos

66,005
16
114
150

thanks a lot, its working. but my method not returing any result set. – user1557020 Jul 27 '12 at 09:11
thanks a lot, its working. but my method not returing any result set. This is my method var dataSourceColumn = EasyOutputWeb.Services.GetDataSourceColumns(dataSourceID, onsuccess, onError); i am calling from asmx file. [WebMethod(EnableSession = true)] [ScriptMethod] public string[] GetDataSourceColumns(string dataSourceId) { //doing some operation and returing name array, i can able to see the result in onsuccess(msg) by using alert return names.ToArray(); – user1557020 Jul 27 '12 at 09:17
@user1557020 this is a second question. Really do not understand what is this issue. – Aristos Jul 27 '12 at 09:22
//var dataSourceColumn = EasyOutputWeb.Services.GetDataSourceColumns(dataSourceID, onsuccess, onError) this is the method i am calling from webservice, that returns string of arrays, i supposed to bind this string of arrays to my div column "columnplaceholder". – user1557020 Jul 27 '12 at 09:36

How to populate place holder on jqueryui accordin click

1 Answers1