Jquery ddl Change event Not firing

Question

I'm using .NET 4 and JQuery to show/hide Div's depending on what's selected from a DDL. When I manually click the drop downs the Jquery fires as expected and show's / hide's fields. But when I programatically change the selectedValue of the DDL, the Jquery simply doesn't fire. I have a single ddl with two options, single and recurring and I show the selected div and keep the other hidden.

$(document).ready(function () {
    $("#MainContent_ddlScheduleType").change(function () {
        $('#Single').hide();
        $('#Recurring').hide();
        var newSelection = "#" + this.value;
        $(newSelection).fadeIn('slow');
    });
});

Inside of the actual page there are two drop down fields, The first being a list of all Jobs currently in a database table. These jobs either run once or multiple times (single, recurring). The user selects the name of the job from the first drop down. A stored procedure pulls information for that job from the database and stores it inside of client side variables. I then compare that client side variable to decide if I should change dropdowns. Here's the eventhandler that does most of the work. So again in summary, when you select the job from the first drop down the second drop down is supposed to change to reflect if it's recuring or single (this happens successfully!) but the Jquery doesn't actually SHOW the respective Single / Recurring Div that it's supposed to show.

        protected void ddlJobList_SelectedIndexChanged(object sender, EventArgs e)
    {
        string  Frequency = null;
        SqlParameter sqlParameter = new SqlParameter("@JobName", ddlJobList.SelectedItem.Text);
        DataTable dt = SqlHelper.GetDataTable("zzGetJobInformation", CommandType.StoredProcedure, sqlParameter);

        if (!(dt.Rows[0]["Frequency"] is DBNull))
            Frequency = dt.Rows[0]["Frequency"].ToString();

        if (Frequency == null)
            ddlScheduleType.SelectedValue = "Single";
        else
            ddlScheduleType.SelectedValue = "Recurring";
    }

Any reason why this won't cause the Jquery to fire?

I looked here: jQuery drop down list change event not fire

Though I'm not using MVC, I have before so I can relate the code which looks very similar to me. Unfortunately the link for the 'solution' is no longer active and their answers weren't very descriptive. I can say for sure there are no console / javascript errors being reported in firebug.

Answer 1

Is this a race condition? At what point are you programmatically setting the selected value? $(document).ready waits until pretty late (relative to the lifecycle) to execute so that it knows that all the stuff you're trying to access inside of $(document).ready has been rendered...

If you're setting that selected value arbitrarily not in a document.ready, you could be calling it before the event is created.

Answer 2

ok, this explains it a little better. the confusion is from mixing server and client code. I would recommend using one or the other to manage the dropdown lists and affects, not both.

using both means you have to deal with postbacks, webforms events and maintaining the state on both the client (jquery) and server (.net) which is messy.

I would either use webforms to manage the state of the UI, or use jquery and ajax requests with page methods, asmx, or another type of asp.net handler to manage the state of the UI.