Cascading selects and reloading values on postback

Cascading selects and reloading values on postback

Hi all, using jQuery 1.4.1, ASP.NET MVC and a great little plugin called jquery.cascadingDropDown.js. This allows me to to create mulitple cascading related select boxes that are populated via AJAX. This is working fine for me except for when I am trying to reload the original values after a postback. I have the following code in my page;
 

  1. <script type="text/javascript">

    $(document).ready(

    function() {

    //Attach cascading behavior to the userId select element.

    $(

    "#userId").CascadingDropDown("#customerId", '<%= Url.Action("AsyncUsers") %>',

    {

    promptText:

    '-- Pick a User--',

    onLoading:

    function() {

    $(

    this).css("background-color", "#ff3");

    },

    onLoaded:

    function() {

    $(

    this).animate({ backgroundColor: '#ffffff' }, 300);

    $(

    this).val('<%= ViewData["UserId"] %>');

    }

    });

    //Attach cascading behavior to the roleId select element.

    $(

    "#roleId").CascadingDropDown("#userId", '<%= Url.Action("AsyncRoles") %>',

    {

    promptText:

    '-- Pick a Role --',

    onLoading:

    function() {

    $(

    this).css("background-color", "#ff3");

    },

    onLoaded:

    function() {

    $(

    this).animate({ backgroundColor: '#ffffff' }, 300);

    $(

    this).val('<%= ViewData["RoleId"] %>');

    }

    });

    $(

    "#customerId").change();

    $(

    "#userId").change();

    });

    </script>

    Now this is working ok up to a point. When my page reloads by I can fire the $( "#customerId" ).change(); event and it works but trying to fire $("#userId").change(); immediately afterwards does not. Is it because the last event is firing before the first one has finished? If so how can make sure the first change() trigger has completed because firing the second?