Append to DropDownList by return value of jQuery.Ajax

Question

I have 2 DropDownList, like Master-Slave. This is my Default.aspx:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
            <asp:Label ID="MsLbl" runat="server" Text="Groups" />
                </td>
                <td>
            <asp:DropDownList ID="Masterddl" runat="server">
                    <asp:ListItem Text="G1" Value="G1" />
                    <asp:ListItem Text="G2" Value="G2" />
                    <asp:ListItem Text="G3" Value="G3" />
            </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
            <asp:Label ID="Svlbl" runat="server" Text="Members" />
            </td>
                <td>
            <asp:DropDownList ID="Slaveddl" runat="server" />
            </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

And this is my Script:

$(document).ready(function () {
$('select#Masterddl').change(function () {
    MasterChangeHandler($(this).val());
});

function MasterChangeHandler(Value) {
    $.ajax({
        type: 'Post',
        url: 'MasterSlaveHandler.ashx',
        dataType: "text",
        data: 'ItemSelected=' + Value,
        async: 'true',
        success: function (data) { SuccessHandler1(data); }

    });
}


function SuccessHandler1(data) {
    $('select#Slaveddl').empty();
    $.each(data, function (i, slaveValue) {
        $('select#Slaveddl').append(
    $('<option></option>').val(slaveValue.Value).html(slaveValue.Text)
    );
    });
}

And My Handler:

public class SlaveValues {
    public string Value { get; set; }
    public string Text { get; set; }
}


public class MasterSlaveDropDownListsHandler : IHttpHandler {
    public bool IsReusable {
        get { return true; }
    }

    public void ProcessRequest(HttpContext context) {
        string valueSelected = context.Request["ItemSelected"];
        List<SlaveValues> slaveValues = new List<SlaveValues>();
        SlaveValues sv;

        sv = new SlaveValues();
        sv.Text = "SV1";
        sv.Value = valueSelected + "s1";
        slaveValues.Add(sv);

        sv = new SlaveValues();
        sv.Text = "SV2";
        sv.Value = valueSelected + "s2";
        slaveValues.Add(sv);


        string responseText =
    Newtonsoft.Json.JsonConvert.SerializeObject(slaveValues);
        context.Response.ContentType = "text/json";
        context.Response.Write(responseText);
    }
}

but there is nothing to append. Also I see the response in firebug windows as following(when I Select G2 from Master ddl):

[{"Value":"G2s1","Text":"SV1"},{"Value":"G2s2","Text":"SV2"}]

and finally I change my success method of script with this new one for test:

function SuccessHandler2(data) {
    $('select#Slaveddl').empty();
    $.each(data, function (i, slaveValue) {
        $('select#Slaveddl').append(
    $('<option></option>').val('Member' + i).html('Member' + i)
    );
    });
}

when try this new script the binding to Slave ddl work correctly but with some additional items : the index show member0 to member30 and I don' know why.

Edit1: I also try this one and append correctly:

function SuccessHandler3(data) {
var values = [{ "Value": "G2s1", "Text": "SV1" }, { "Value": "G2s2", "Text": "SV2"}];
        $('select#Slaveddl').empty();
        $.each(values, function (i, slaveValue) {
            $('select#Slaveddl').append(
$('<option></option>').val('Member' + slaveValue.Value).html('Member' +
 slaveValue.Text)
        );
        });
    }

So I think there is a problem with manipulate of return value (data).

for more specific view the following pic is the JSON tab in firebug windows when I select G3 in Master ddl:

JSON Tab in firebug

Edit2:

Also I try this one and just the first alert appear, apparently the (data.d) is null or unknown object:

function SuccessHandler6(data) {
    var selection = $('select#Slaveddl');
    $(selection).children().remove();
    alert('in handler and remove children correctly');
    if (data.d) {
        alert('data.d is not null');
        $(data.d).each(function (index, item) {

$(selection).append('<option>').val(item.Value).html(item.Text);
            alert('after append in index: ' + index);
        });
    }
}

How can I use return value correctly and append to Slave ddl? Where is the problem?

erimerturk · Answer 1 · 2011-11-03T09:37:34.110

1

u should try like that i think.

check this out.

http://jsfiddle.net/rTua4/1/

var values = [{"Value":"G2s1","Text":"SV1"},{"Value":"G2s2","Text":"SV2"}];

   $.each(values , function (i, slaveValue) {

        $('#xxx').append(
    $('<option></option>').val(slaveValue.Value).html('Member' + slaveValue.Text)
        )});

for your next operation try this.

function SuccessHandler1(data) {
    $('select#Slaveddl').empty();
    var m = JSON.parse(data);
    $.each(m , function (i, slaveValue) {
        $('select#Slaveddl').append(
    $('<option></option>').val(slaveValue.Value).html(slaveValue.Text)
    );
});

}

edited Nov 03 '11 at 09:37

answered Nov 03 '11 at 08:37

erimerturk

4,230
25
25

what do you mean next ? what do you need ? – erimerturk Nov 03 '11 at 09:08
I need append by return value but this is just a defined manually value, the values you defind is manually I need real return value. – Saeid Nov 03 '11 at 09:11

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

Maybe this can be useful this very like as your problem an have a complete step by step solution:

use return value of json in jquery

edited May 23 '17 at 10:32

Community

1
1

answered Nov 21 '11 at 11:08

score 0 · Answer 3 · edited May 23 '17 at 12:18

This link will help you. You need to get only the data part to show in your slave ddl. To get only that part you need to get data.d .. Read More here : Eval response.d in Jquery Ajax

here is a small example too:

$.ajax({ 
        url: 'Users.aspx/GetUsers', 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        data: JSON.stringify(postdata), 
        dataType: "json", 
        success: function(data, st) { 
            if (st == "success") { 
                var m = JSON.parse(data.d); 
                //you can run your loop here to add to ddl
            } 
        }, 
        error: function() { 
            alert("Loading Failed!"); 
        } 
    });

when I try your solution the firebug show: JSON.parse: unexpected character [Break On This Error] var m = JSON.parse(data.d); and not work. — Saeid, Nov 03 '11 at 08:59

score 0 · Answer 4 · edited May 23 '17 at 12:34

I want to point out that what you're attempting to accomplish with the HTTP handler is typically accomplished using a Web Service, or more accurately a WCF RESTful Web Service. WCF even handles the serializing of JSON for you. Here's a simplified example that you can just tailor to your needs. How do I return clean JSON from a WCF Service?

As far as I know, HTTP handlers are used to handle file types (for instance, you can associate a handler with a ".jpeg" file type to dynamically return ".jpeg" images).

It's the "proper" way to handle this.

Append to DropDownList by return value of jQuery.Ajax

4 Answers4