Yes, don't think of it as the dialog being able to consume json data. Do this:
- fire your ajax
- in your handler prepare and reveal the dialog
- in the button handler for the dialog, if you want, fire more ajax and then handle the results.
The key is to think of the dialog differently than the examples you see on the jQuery UI website. Populate the dialog dynamically by plowing through the JSON return values and use the jQuery selectors to find what you need, create more and insert new elements to the dialog content.
Here is a more concrete example:
$( "#dialog" ).dialog({
modal: true,
buttons: {
Ok: function() {
fire_ok_ajax_with_handler(); //pretend the handler is ok_handler
}
}
});
// this method is called when the action the user takes wants to
// open the dialog. Note that it doesn't actually open the dialog
// but instead starts the ajax process of getting the data it needs
// to prepare the dialog
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
fire_ajax_to_start_stuff();
return false;
});
function fire_ajax_to_start_stuff(...) {
// assume start_handler method
}
function start_handler(data) {
//process data, which can be json if your controller formats it that way
// use the data to dynamically setup the dialog,
// show the dialog
$( "#dialog" ).dialog( "open" );
}
function fire_ok_ajax_with_handler() {
// this is where you set up the ajax request for the OK button
}
function ok_handler(data) {
// handle possible errors messages
// close the dialog
$( this ).dialog( "close" );
}
Please note that there is a LOT of pseudocode/hand waving in that example but it should give you the basic approach.