Question

I have a Rails application. I show multiple rows of data on the page. For each row I want to create a button that will show some extra data on a popup for that row.

I checked following

1. jQuery ui Dialog ( http://jqueryui.com/demos/dialog/ )

   • Doesn’t give option to get data with ajax query,
   • I don’t want hidden data for each row

2. jQPOOOP jQuery plugin
   http://plugins.jquery.com/project/jQPOOOP

   • looks like works on html data, I want something that may work on json data

Is there any way to build something using only jquery ui dialog but which work on json data retrieved from an ajax request ?

Answer 1

Yes, don’t think of it as the dialog being able to consume json data. Do this:

1. fire your ajax
2. in your handler prepare and reveal the dialog
3. 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.