hi frnds this is code for taken data from database appear in bootstrap accordion panel by using jquery ajaxltscript src34Scriptsjqueryjs34gtltscriptgt ltscript src34Scriptsjqueryuijs34gtltscriptgt ltlink href34Scriptsjqueryuicss34 rel34stylesheet34 gt ltscript type34textjavascript34gt var x 0 function var i 1 ajax method 34post34

HiPlease try below code to bind itHTMLltscript type34textjavascript34gt var x 0 function var i 1 ajax type 34POST34 url 34DefaultaspxGetCountries34 contentType 34applicationjson charsetutf834 dataType 34json34 success function data var xmlDoc parseXMLdatad var xml xmlDoc var countries xmlfind34Country34 var htmlString 3939 countrieseachfunction index var country this var col 39collapse39 i htmlString 39ltdiv class34panel paneldefault34 id34accordionpanel34gt39 htmlString 39ltdiv class34panelheading34 id34head34gt39 htmlString 39lth2 class34pan

How to bind data from database collapsable panel in jquery (html programmatically) in ASP.Net

samv

SOLVED CLOSED ACTIVE ANSWERED
User: samv
Posted: on Nov 10, 2015 02:32 AM
Forum: Data Controls
Answer: 1
Views: 4803
Sample Code: Download

hi frnds this is code for taken data from database appear in bootstrap accordion panel by using jquery ajax.

<script src="Scripts/jquery.js"></script>
    <script src="Scripts/jquery-ui.js"></script>
    <link href="Scripts/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        var x = 0;
        $(function () {
            var i = 1;
            $.ajax({
                method: "post",
                type: "post",
                url: "jquerydatatable.aspx/GetCountries",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var htmlString = '';
                    $(data.d).each(function (index, country) {
                        var col = 'collapse' + i;
                        htmlString += '<div class="panel panel-default" id="accordionpanel">';
                        htmlString += '<div class="panel-heading" id="head">';
                        htmlString += '<h2  class="panel-title">';
                        htmlString += '<a id="' + x + '"  data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#' + col + '">' + country.Name + '</a>';
                        htmlString += '</h2></div>';
                        htmlString += '<div id="' + col + '" class="panel-collapse collapse">';
                        htmlString += '<div clas="panel-body">' + country.CountryDescription + '</div>';
                        htmlString += '<div class="panel-footer" style="text-align: center;">';
                        htmlString += '<div class="row">';
                        htmlString += '<div class="col-sm-4"><input type="button" class="btn btn-primary shadow" style="color:white;" value="Download sample Document"/></div>';
                        htmlString += '<div class="col-sm-4"><input type="button" class="btn btn-info" onclick="uploadpopup(this,' + x + ')" value="Upload Filled Document"/></div>';
                        htmlString += '<div class="col-sm-4"><input type="button" class="btn btn-success" value="Download New Document"/></div>';
                        htmlString += '</div></div></div>';
                        
                        i = i + 1;
                        x = x + 1;
                    });
                    var acc = $('#accordion').html(htmlString);
                }
            });
            addcssrule($("#head"));
        });
        function addcssrule(target) {
            var cssrules = $("<style type='text/css'></style>").appendTo("head");
            cssrules.append(".panel-heading a.collapsed:after{ content:'+'; }");
            cssrules.append(".panel-heading a:after{font-family:'Glyphicons Halflings';content:'-';float:left;color:grey;font-weight:bold;font-size:x-large;text-decoration:none;}");
            
            //cssrules.append(".panel-heading a.collapsed:after{ content:'+'; }");
            //cssrules.append(" .panel-heading a:after {font-family:'Glyphicons Halflings';content:'+';float:left;color:grey;font-weight:bold;font-size:x-large;text-decoration:none;}");
            cssrules.append("a:hover{text-decoration:none;}");
            cssrules.append("a{text-decoration:none;}");
            cssrules.append("a:visited{text-decoration:none;");
            cssrules.append("a:link{text-decoration:none;");
            cssrules.append("a:active{text-decoration:none;");
        }
        function uploadpopup(anchor, x) {
            var docName = $('#' + x).text();
            $('#txtdocname').val(docName);
            $('#myuploadpopup').modal('show');
        }
        function listoofdocpopup() {
            $('#listofdocpopup').modal('show');
        }

    </script>

Shashika...

0 5

Reply
ANSWER
User: Shashikant
Replied: on Nov 10, 2015 05:08 AM
Modified: on Nov 10, 2015 05:09 AM
Report

Hi,

Please try below code to bind it.

HTML

<script type="text/javascript">
    var x = 0;
    $(function () {
        var i = 1;
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCountries",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var xmlDoc = $.parseXML(data.d);
                var xml = $(xmlDoc);
                var countries = xml.find("Country");
                var htmlString = '';
                $(countries).each(function (index) {
                    var country = $(this);
                    var col = 'collapse' + i;
                    htmlString += '<div class="panel panel-default" id="accordionpanel">';
                    htmlString += '<div class="panel-heading" id="head">';
                    htmlString += '<h2  class="panel-title">';
                    htmlString += '<a id="' + x + '"  data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#' + col + '">' + country.find("Name").text() + '</a>';
                    htmlString += '</h2></div>';
                    htmlString += '<div id="' + col + '" class="panel-collapse collapse">';
                    htmlString += '<div clas="panel-body">' + country.find("CountryDescription").text() + '</div>';
                    htmlString += '<div class="panel-footer" style="text-align: center;">';
                    htmlString += '<div class="row">';
                    htmlString += '<div class="col-sm-4"><input type="button" class="btn btn-primary shadow" style="color:white;" value="Download sample Document"/></div>';
                    htmlString += '<div class="col-sm-4"><input type="button" class="btn btn-info" onclick="uploadpopup(this,' + x + ')" value="Upload Filled Document"/></div>';
                    htmlString += '<div class="col-sm-4"><input type="button" class="btn btn-success" value="Download New Document"/></div>';
                    htmlString += '</div></div></div>';

                    i = i + 1;
                    x = x + 1;
                });
                var acc = $('#accordion').html(htmlString);
            }
        });
    });        
</script>
<div id="accordion">
</div>

[WebMethod]
public static string GetCountries()
{
    DataSet ds = new DataSet();
    DataTable dt = new DataTable("Country");
    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)), 
                        new DataColumn("Name", typeof(string)) ,
                        new DataColumn("CountryDescription", typeof(string))});
    dt.Rows.Add(1, "United States", "English");
    dt.Rows.Add(2, "India", "Hindi");
    dt.Rows.Add(3, "France", "French");
    ds.Tables.Add(dt);
    return ds.GetXml();
}

I hope this will help you out.

How to bind data from database collapsable panel in jquery (html programmatically) in ASP.Net

Company

Explore

Follow us

Contact Us