Question

I have two checkboxlists on a page – Parent and Child. Both are in seperate collapsable divs. When the Parent’s div collapses I use jquery to call a WebMethod that executes a query on the database, serializes the returned List to json, and returns it to the jquery method.

The above all works very well and I am able to successfully get the expected json string.

What I would like to do now is to populate the Child checkboxlist based on that json data. Preferrably, I would like to be able to set the text and value as well (the DataTextField and DateValueField properties of the checkboxlist).

Can anyone provide examples of how to do this?

   function RunCentralEffect() {
        $("#ParentDiv").hide('blind', 200);
        var names = [];
        $('#ParentDiv input:checked').each(function () {
            names.push(this.value);
        });
        $.ajax({
            type: "POST",
            url: "BranchReportForm.aspx/MyWebMethod",
            data: "{'args': '" + names + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                alert('Success!');
                //Now what?
            }
        });
    }

Thank you!

Answer 1

When you are talking about ChecbkboxList controls, DataValueField and DataTextField properties you are referring to ASP.NET abstractions which your jQuery methods will have no knowledge of as these are handled in your codebehind which generates the HTML that is sent to the browser.
What you are going to have to do is manipulate the DOM elements directly. Without knowing a bit more about the actual html layout that is generated by your code it is tricky to provide more of an answer but at a high level you will need to loop through your returned json objects and append a new checkbox and label into the appropriate div.