CODEWITHSUNDEEP
jqueryajaxasp.net-ajax
Hari
Hari

Reputation: 137

Add checkboxs into Checkboxlist using Jquery ajax method in asp.net

Add checkboxes into checkboxlist.

For eg: I am passing dataset value as "1001","1002","1003","1004","1005" and get this value as XML using GetXml() function.

The above value, will for 5 checkboxes separately and add into checkbox list.

Default.apsx.vb 

<WebMethod()> _
    Public Shared Function returnData() As String

        Dim dsUtil As New DataSet
        Dim lstSQL As String
        Dim fdat, tdat, detai, valG, sta As String
        Try
            fdat = "20140317"
            tdat = "20140318"
            detai = "College"
            valG = "Y"
            sta = "2"

            lstrSQL = ("Exec SP_College '" & fdat & "','" & tdat & "','" & detai & "','" & valG & "','" & sta & "'")
            _Command = New SqlCommand(lstSQL)

            Return GetDataset(_Command).GetXml()
        Catch Ex As Exception
            Throw New Exception("Error " & Ex.Message)
        End Try
        'Return ms
    End Function


Public Shared Function GetDataset(ByVal tSQLQuery As SqlCommand) As DataSet

        Dim ds As New DataSet
        cn = New SqlConnection("Data Source=localhost; Initial Catalog = master;uid=sa;pwd=sa;")
        Try
            cn.Open()
            Dim da As New SqlDataAdapter(_Command)

            _Command.CommandType = CommandType.Text
            _Command.Connection = cn

            da.Fill(ds, "UTable")

            Return ds

        Catch oEx As Exception
            Throw New Exception("GetDataset-" & oEx.Message)
        Finally
            ds.Dispose()
        End Try

    End Function



**Default.aspx page**

<table>
<tr>
<td>
<input type="button" id="btnTray" value="Click here" onclick="checnkAjaxfn()"/>
</td>
<td>
<div id="divCheckBoxList" >
<asp:CheckBoxList ID="chklistId" runat="server">
</asp:CheckBoxList>
 </div>
</td>
</tr>
</table>


**Ajax. Json script:**

function checnkAjaxfn() {
         $.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8",
          url: "Default.aspx/returnData",
          data:{},
          dataType: "json",
          success: OnSuccess,
          failure: function (response) {
           alert(response.d);
          },
          error: function (response) {
           alert(response.d);
          }
         });
       }


function OnSuccess(response) {
        debugger;
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        var xmlData = xml.find("UTable");

        var row = $("[id*=chklistId] tr:last-child").clone(true);

        $("[id*=chklistId] tr").remove();

        $.each(xmlData , function () {
         var xData = $(this);
         $("label", row).val($(this).find("Sys_ID").text());
         $("[id*=chklistId] tbody").append(row);
         row = $("[id*=chklistId] tr:last-child").clone(true);
        });
       }

The above does not add checkbox to checkboxlist.

I debugged. when it reach

$.each(xmlData , function () {

this line, its come at end line.

pls say how to generate checkbox inside checkboxlist

Upvotes: 0

Views: 5250

Answers (3)

praveen
praveen

Reputation: 21

<html>
<head><h1><b><i><center>RADIO BUTTONS </center></i></b></h1></head>
<body  bgcolor="palegoldenrod">
<form>
<script src="jquery-1.11.1.js">
</script>
<script>
$(document).ready(function(){
$("#age").blur(function() {
        var test = $(this).val();
        if(test=="")
        {
        $("#dropdown").hide();
        }
        else 
        {
        $("#dropdown").show();
        }

    });

    $.ajax({ 
        type: "GET", 
        url: "count.xml", 
        dataType: "xml", 
        success: function (xml) { 
            $(xml).find('countrylist').each(function () {
                var name = $(this).find('cname1').text(); 
                var option1 = $("<radio>" + name + "</radio>"); 
                var select=$("#div1");
                select.append(option1);

                var name = $(this).find('cname2').text(); 
                var option2 = $("<radio>" + name + "</radio>"); 
                var select=$("#div2");
                select.append(option2);

                var name = $(this).find('cname3').text(); 
                var option3 = $("<radio>" + name + "</radio>"); 
                var select=$("#div3");
                select.append(option3);
            });
        }   
    });
    });


function myCountry(country)
{
alert("HI" +country);   
 $.ajax({ 
            type: "GET", 
            url: "stat.xml", 
            dataType: "xml", 
            success: function (xml) { 
                var select = $('#div4'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname').text();    
                select.append($("<label>" + name + "</label>"));
                }
                }); 
                var select = $('#div5'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname1').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div6'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname2').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div7'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname3').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div8'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname4').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div9'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname5').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });

                        }
     });
}

function myFun(city)

{
alert("hiiiii" +city);  
 $.ajax({ 
            type: "GET", 
            url: "city.xml", 
            dataType: "xml", 
            success: function (xml) { 
                $(xml).find('city').each(function () 
                {
                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div10');
                var name = $(this).find('cname').text();    
                select.append($("<label>" + name + "</label>"));
                }


                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div11');
                var name = $(this).find('cname1').text();   
                select.append($("<label>" + name + "</label>"));
                }


                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div12');
                var name = $(this).find('cname2').text();   
                select.append($("<label>" + name + "</label>"));
                }
                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div13');
                var name = $(this).find('cname3').text();   
                select.append($("<label>" + name + "</label>"));
                }

                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div14');
                var name = $(this).find('cname4').text();   
                select.append($("<label>" + name + "</label>"));
                }


                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div15');
                var name = $(this).find('cname5').text();   
                select.append($("<label>" + name + "</label>"));
                }
                }); 
        }
     });
}

</script>


<br>
<br>
<br>
<label style="width:100px;float:left;">First Name</label> <input type="text" id="name"><br><br>
<label style="width:100px;float:left;">Middle Name</label> <input type="text"><br><br>
<label style="width:100px;float:left;">Last Name</label> <input type="text"><br><br>
<label style="width:100px;float:left;">Address Line1</label> <textarea rows="3" cols="16"></textarea><br><br>
<label style="width:100px;float:left;">Address Line2</label> <textarea rows="3" cols="16"></textarea><br><br>
<label style="width:100px;float:left;">Age</label> <input type="number" id="age" value="a"><br><br>
<div id="dropdown" style="display:none">

<label style="width:100px;float:left;">Country</label> <br>

<div id="div1">
<input type="radio" name="country" id="ind" value="India" onclick="myCountry(this.value)">
<label style="width:100px;float:left;"></label> </div><br>

<div id="div2">
<input type="radio" name="country" id="usa" value="US" onclick="myCountry(this.value)">
<label style="width:100px;float:left;"></label> </div><br>

<div id="div3">
<input type="radio" name="country" id="cnd" value="Australia" onclick="myCountry(this.value)">
<label style="width:100px;float:left;"></label></div>
<br>
<br>
<br>


<label style="width:100px;float:left;">State</label> <br>
<br>
<div id="div4">
<input type="radio" name="rad" id="radio2" value="Tamil Nadu" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div5">
<input type="radio" name="rad"  id="radio2" value="Andhra Pradesh" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div6">
<input type="radio" name="rad" id="radio2" value="Florida" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div7">
<input type="radio" name="rad" id="radio2" value="NewJersey" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div8">
<input type="radio" name="rad" id="radio2" value="Queensland" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div9">
<input type="radio" name="rad" id="radio2" value="Maryland" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<br>
<br>
<br>

<label style="width:100px;float:left;">City:</label> <br>

<div id="div10">
<input type="radio" name="ra" id="c1"  >
</div>

<div id="div11">
<input type="radio" name="ra" id="c1"  >
</div>

<div id="div12">
<input type="radio" name="ra" id="c1"  >
</div>

<div id="div13">
<input type="radio" name="ra" id="c1"  >
</div>

<div id="div14">
<input type="radio"  name="ra" id="c1"  >
</div>

<div id="div15">
<input type="radio" name="ra" id="c1"  >
</div>





<br>
<br>
<br>

<br>
<br>
<br>


<button value="" id="but">OK</button>
</b>
</form>
</body>
</html>
*/xml code/*

Upvotes: 0

user2621192
user2621192

Reputation:

If you are using asp.net CheckboxList controls it will be rendered once you bind datasource to it. If you are not willing to bind a datasource there is no point in using CheckboxList, instead generate pure HTML checkboxes with the same name.

Example: 

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car

You can generate this html using jQuery as follows:

$(function () {
var arry = ["Bike","Car"];
$(arry).each(function () {
    var checkBox = "<input type='checkbox' name='vehicle' value='" + this + "'/>" + this + "<br/>";
    $(checkBox).appendTo('#divPlaceHolder');
});});

Now in your query you can use the above sample simply replace the array with your xml output.

Upvotes: 3

Bador
Bador

Reputation: 283

Your suggested dataType in the Ajax Request is JSON but you are sending XML Data. Refering to https://api.jquery.com/jQuery.ajax/ says:

"json": Evaluates the response as JSON and returns a JavaScript object. The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of null or {} instead. (See json.org for more information on proper JSON formatting.)

Maybe your ForEach Loop just jump to the end line couse your xmlData variable is empty?

Upvotes: 0

Related Questions