locked
load drob down using ajax in jquery repeator RRS feed

  • Question

  • User-1399352090 posted

    Hello,

    i m using jquery repeator plugin form re create forms.

    here it is :  http://briandetering.net/repeater

    in my form i have department dropdown wich is loading from ajax

     $.ajax({
                url: "/ajax.aspx",
                data: "f=department",
                dataType: "json",
                success: function (Result) {
                    Result = Result;
                    $.each(Result, function (key, value) {
                        $("#ddldepartment").append($("<option></option>").val
                        (value.ID).html(value.Name));
                    });
                },
                error: function (Result) {
                    alert("Error");
                }
    
            });

    in my case it is loading only on first form's dropdown

    Apperciate from best response

    Wednesday, December 14, 2016 9:42 AM

All replies

  • User475983607 posted

    There are several issues with the posted code that need to be fixed first.  The data format is not proper JSON format, there is no indication what department is, the URL is probably not correct as it is missing the web method name,  missing the content-type,  assigning a variable to itself...

    You're defined json as the datatype but it looks like you are doing a classic form post?  No where in the code are you using a JQuery Repeater?

    Please use Developer tools (F12) and open the console to find and fix the errors.  

    I assume the AJAX call would look similar to the following but it is not clear what you're doing so I can't be certain.

    $.ajax({
    		method: 'post',
    		url: "ajax.aspx/webmethod",
    		data: JSON.stringify({f : department }),
    		dataType: "json",
    		contentType:'application/json;charset=utf-8',
    		success: function (Result) {
    			$.each(Result.d, function (key, value) {
    				$("#ddldepartment").append($("<option></option>").val(value.ID).text(value.Name);
    			});
    		},
    		error: function (Result) {
    			alert("Error");
    		}
    
    	});

    Wednesday, December 14, 2016 10:56 AM
  • User-707554951 posted

    Hi smd_yasin,

    Based on your needs, Following code for your reference:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCustomers",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var ddlCustomers = $("[id*=ddlCustomers]");
                ddlCustomers.empty().append('<option selected="selected" value="0">Please select</option>');
                $.each(r.d, function () {
                    ddlCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
                });
            }
        });
    });
    </script>
    
    
    <asp:DropDownList ID="ddlCustomers" runat="server">
    </asp:DropDownList>

    .CS

    [WebMethod]
    public static List<ListItem> GetCustomers()
    {
        string query = "SELECT CustomerId, Name FROM Customers";
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                List<ListItem> customers = new List<ListItem>();
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        customers.Add(new ListItem
                        {
                            Value = sdr["CustomerId"].ToString(),
                            Text = sdr["Name"].ToString()
                        });
                    }
                }
                con.Close();
                return customers;
            }
        }
    }

    For more information, please refer to the following links:

    http://www.aspsnippets.com/Articles/Populate-Bind-ASPNet-DropDownList-using-jQuery-AJAX-and-JSON-in-C-and-VBNet.aspx


    Best regards

    Cathy

    Thursday, December 15, 2016 6:02 AM