0

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

3 Answers 3

3

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.

Sign up to request clarification or add additional context in comments.

2 Comments

how can i add my xml data into array?
Looking at your post the checnkAjaxfn() is returning JSON data not XML. All you do is loop through your JSON data using jquery each api and generate the checkboxes. i.e. like $(responses.d).each(function(){});
0

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?

Comments

0
<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/*

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.