jquery data not binding to dropdown

Question

2.00/5 (2 votes)

See more:

hi,

I am not able to bind the dropdownlist by jquery json binding. But while inspecting browser i can see the data. But not binding to dropdown. Please help me.

-------------------------------------------------------------------------
inspect code :

C#

d: [,…]
0: {__type: "dropdown.WebService1+CountryDetails", CountryId: "211249", CountryName: " New Bolt & Tools"}
CountryId: "211249"
CountryName: " New Bolt & Tools"
__type: "dropdown.WebService1+CountryDetails"

-------------------------------------------------------------------------------

i need the countryname to bind
-----------------------------------

XML

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService1.asmx/BindDatatoDropdown",
            data: JSON.stringify({ bCode: '<%=branchCode %>', stcon: '<%=strCon %>' }),
            dataType: "json",
            success: function (data) {
                $.each(data.d, function (key, value) {
                    $("#ddlCountryx").append($("<option></option>").val(value.CountryId).html(value.CountryName));
                });
            },
            error: function (result) {
                alert("Error");
            }
            });
    });
</script>

---------------------------

Posted 24-Aug-15 21:14pm

Member 11922091

Updated 27-Apr-16 5:25am

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 27-Apr-16 9:40am

Do you mean that data already contains correct items when success function is called? Are you sure the elements have properly filled in properties CountryId and CountryName?

If so, what's the problem? Debug appending items to a select element separately and add right code. But why not writing it all in some neat manner? Look what you are doing: not only in each call to success, but even on each iteration of the loop traversing data, you keep calling the same very $("#dllCountryx"), which is essentially document.GetElementById. Write code accurately, and you will get rid of many problems.

One problem: do you ever clear $("#dllCountryx") elements? Should your code work, on second Ajax request you will have more items in addition to the existing ones.

By the way: if the word "binding" came in fashion, it does not mean that you should call all you do "binding". :-)
—SA

F-ES Sitecore 27-Apr-16 10:24am

We can't debug your code remotely, use the "debugger" keyword to step through the code or try and use the console or alert boxes to track progress through the code.

Things I would look at are a) are there errors in the console? b) does the BindDatatoDropdown method get called and return results c) does your "success" method get called? d) what is in data.d, are there items there, does data.d.length have a value greater than zero? e) is your "each" called? f) is there an element on the page (view view->source, not on your aspx page in Visual Studio) with an id of "ddlCountryx" g) do value.CountryId and value.CountryName have values?

Just from looking at the code, however, the issue might be that you're not parsing data.d into JSON objects.

http://forums.asp.net/t/1934215.aspx?Using+jQuery+ajax+to+call+asmx+webservice+methods

Edit: Also if this is an asp:DropDownList then don't even bother trying to do what you're doing, it won't work.

Sergey Alexandrovich Kryukov 27-Apr-16 11:26am

You are right, but the bug is obvious enough; please see Solution 1.
I don't know exactly about JSON; the inquirer maintains that the data is in place and correct — be it this way. :-)
—SA

F-ES Sitecore 27-Apr-16 11:55am

There is nothing wrong with how he is populating the select, as long as value.CountryId and value.CountryName are returning values then they will appear as valid options. Saying the option doesn't need a value is a strange thing to say as well as the value is what is returned when the form is posted.

Sergey Alexandrovich Kryukov 27-Apr-16 13:26pm

No. Look thoroughly — it's a bug. When you set val, text won't appear. Try it and you will see.
And of course option does not need a value, by one reason you are missing: you can set some arbitrary property, "superPuperValue", and it will work, JavaScript to JavaScript. It's just makes no sense, because there is "value", but it's not strange. "Form posted" is nothing but your assumption. Yes, you are right, but if data is posted as Ajax, it's irrelevant. I don't disagree, the straightforward way it to use "value", and I said it in my answer; I just make a correct statement about the role of this property.
—SA

F-ES Sitecore 27-Apr-16 13:49pm

Option has both val and text, I did try his code and it did work. The value (set from val()) is what is posted with the form, the text (set from html()) is what is shown in the select list. I'm not sure where the confusion is coming from, this is quite a basic and well known feature of html.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2016-04-27T05:25:00

Please see my comment to the question.

The first bug I can see is using val. It means that you try to set the value of the value property of the element option. You certainly can do it, but this property has no significance to this element, in terms of visible HTML DOM. It can be used to pass data from a selected option to the script, and can be any object. You don't have to use it, can use any other new property; it's important to pass data from HTML which you don't write but create on the fly. In other words, you don't do anything you have to.

You probably need to add two to four things: the option text, and, optionally, one or more of the following attributes: id, value and selected. Please see: option — HTML | MDN[^].

The simplest way to add the option text is using innerHTML of this (or any other elements). In your simple case, this is enough. On top of that, you can add attributes, which can be done by using the save very val (for value) and, say, jQuery .attr():
.attr() | jQuery API Documentation[^].

Basically, that's all.

—SA