Dropdown selected value isn't getting selected, it always shows the first value in selection

I have two dropdowlists ddprojecttype and ddprojectname. On selecting project type I'm populating projectnames into ddprojectname with jQuery and AJAX. It's showing properly only.

However, whenever I am trying to make a selection on the dropdownlist it always selects the first item. And also 开发者_开发百科it's behaviour is peculiar: while I am viewing the aspx page in the browser then it's showing all the project names into the dropdown. Whereas in case of viewing the source it's not showing the dropdown options at all.

I will post the page code as well as the html for that and the jQery scripts for them:

 <asp:DropDownList ID="ddProjectTypeID" runat="server" >
                    </asp:DropDownList>
<asp:DropDownList ID="ddProjectName" runat="server"  >
                    </asp:DropDownList>

The jQuery for the scripts which loads the project names successfully is:

$('[id*="ddProjectTypeID"]').change(function() {
    if ($(this).find(":selected").text() != "--Select--") {
        $.ajax({
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            url: 'Services/Service.asmx/GetProjectNames',
            data: '{"p_type_id":"' + $(this).find(":selected").val() + '"}',
            dataType: "json",
            success: function(data, textStatus) {
                if (textStatus == "success") {
                    var myObject = data.d;
                    $('[id*="ddProjectName"] >option').remove();
                    $('[id*="ddProjectName"]').append($('<option></option>').val("--Select--").html("--Select--"));
                    for (var i = 0; i <= myObject.length - 1; i++) {
                        $('[id*="ddProjectName"]').append($('<option></option>').val(myObject[i].project_id)
                                        .html(myObject[i].project_name));
                    }
                }
            },
            error: function(data, textStatus) {
                alert('An error has occured retrieving data!');
            }
        });
    }
});

It loads the names successfully onto the ddprojectnames dropdownlist:

Curiously whenever I am executing this code :

protected void btnSubmit_Click(object sender, EventArgs e)
    {
    ScheduleDetails scdetails = new ScheduleDetails();
    scdetails.ProjectTypeID = ddProjectTypeID.SelectedItem.Value;
            scdetails.ProjectID = ddProjectName.SelectedItem.Value;


}

it only gets scdetails.ProjectTypeID = 1 but scdetails.ProjectID = "--Select--"

I am not getting the reason why. Although I have loaded the projectnames from the cascading dropdown from projecttypeID even then also it gets "--select--" as result whenever irrespective I chose any value from ddprojectname ...

Why is this happening?

---

My guess is that because the list items of ddDropDownName are dependent on the selection of the ID dropdown, that the selected value cannot get set in the client lifecycle possibly because available data does not exist yet.

Try setting an event in the PreRender phase of your page and inspect the selected value of your drop down. If it is set correctly there then that tells me that it is a problem loading this value into the dropdown from ViewState.

---

Would you try :

$("#<%=ddProjectTypeID.ClientID %>") instead of $('[id*="ddProjectTypeID"]') 

The ID of the DrpDwnList might be changed in the client side if you're using a master page or something.

---

Based on the fact above what I did is something interesting which I haven't came across earlier.

For an instance I have wrote what my problem was. Basically it's the postback error which occurs when you click and select an option from JavaScript, so what you can do is:

Create a custom control which is based on extending the System.Web.Ui.WebControls.Dropdownlist, and instead of using <asp:dropdownlist> just use that.

Here is the code for that for custom class:

 public class DropDown:System.Web.UI.WebControls.DropDownList
{
}

To the reference I would give you a very good blog post for that which actually has dealt with this problem which quite didn't help out with my original problem.

Postback Error Blog

But I could actually figure out what was the problem. Basically what happens is when I populate a dropdownlist with a jQuery AJAX on a cascading effect. The viewstate actually doesn't gets updated, so as a result when I click a button for postback it gives the error as:

nvalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page

Now to avoid that I have already given the link.

Now to solve the problem how to get the value. For that I have put an hiddenfield for the page for the cascading dropdown and have set its value to dropdowns selected value to hiddenfield. Now on button click I can get the actual value from the dropdown (which is basically a custom control) like :

$('[id*="btnSubmit"]').click(function() {
    $('[id*="hf"]').val($('[id*="ddProjectName"]').find("selected").val());
});

Note: You cannot do the textbox1.text = ddcustom.selectedvalue 

and now you can access the value from button as like:

protected void btnSubmit_Click(object sender, EventArgs e)
    { String Project_id= hf.value;  }

It's because the viewstate doesn't provide with the client side data which has been changed from cascading effect from jQuery AJAX.