Open a jQueryUI Dialog After Database Information Populates Controls

I am playing around with C# and the jQuery UI Dialog box tonight. I have added a dialog div to a user management page that will enable Administrators to edit user information (such as address, phone, aspnetdb stuff). When the admin clicks on a row in a grid view, the dialog is activated, but the controls (text boxes and drop downs) take a few seconds to populate with the information. I would like the dialog to present the user's information, allow changes to the controls, allow the administrator to save the 开发者_StackOverflow社区data, and then update the grid view which is inside of an update panel.

Is there a way through Code Behind and jQuery to only show the dialog box after all of the fields have been filled in by the Datatable (dataset xsd)?

Thanks in advance for your help. This has stumped me for hours.

I'd go with the following scenario:

1. When a user clicks on a grid row, an ajax request will be made through jQuery.ajax that gets the appropriate data based on the user's selection.
2. the jquery.ajax function has an onSuccess callback function which activates the jqueryUI dialog.

Something like:

$.ajax({
  url: "myUrl.aspx/MethodName",
  type: "POST",
  data: ({id : my_grid_selected_id}),
  success: function(result){
   // Do the dialog fields population here.
   $( "#myDialog" ).dialog( "open" );
  }
}
);

UPDATE: Here's how you can populate data in you dialog's controls. I'll try to explain it with an example.

Server-Side (Method has to be static and has a [WebMethod()] attribute).

public class CustomData
{
    public string name;
    public int id;
}

[WebMethod()]
public static CustomData ReturnCustomData(int MyID)
{
    CustomData MyData = new CustomData();
    MyData.name = "Custom name";
    MyData.id = MyID;
    return MyData;
}

Client-Side:

$.ajax({
  url: "myUrl.aspx/ReturnCustomData",
  type: "POST",
  data: ({MyID : my_grid_selected_id}),
  success: function(result){
  $("your_name_textbox_identifier").val(result.name);
  $("your_id_textbox_identifier").val(result.id);
  $( "#myDialog" ).dialog( "open" );
  }
});  

For populating dropdown lists, check out http://www.isolutionteam.co.uk/how-to-populate-aspnet-dropdown-list-from-database-by-passing-radio-button-lists-selected-value-as-parameter-with-jquery/

If all else fails, you can just brute force this: say one of your fields looks like:

<input id='some_field'>

You can test to see if it's been populated with:

    if ($("#some_field").val() !== "")

And you can repeatedly check with a timer:

var fieldLoaded = setInterval( function() {
    if ($("#some_field").val() !== "") {
      clearInterval(fieldLoaded);
      $("#my_dialog").show();  
    }
}, 100);