Question

I’m using ajax requests to populate modal popup windows with data that users have filled out. The popup windows are just div layouts i’m showing/hiding with jquery. There’s definitely some delay in this process. As having the popup window wait until the data is retrieved breaks the user flow as it’s easily 4 seconds of waiting for something to happen. So I bring up the popup, than I make the ajax calls. There’s a couple seconds of lag time here as the data gets filled in. I’m not sure that prepopulating data makes sense either, as there’s potential for a lot of different combinations of data depending on what the user is doing. The queries being called are all fairly simple.

I know there has to be better methods of doing this. And I know it doesn’t help that instead of having robust class definitions that return everything in 1 call, that there are a couple calls currently being made each time I need to retrieve data. But passed that, I have no idea how I should be doing this.

Here is one of many examples. I’ll make the ajax call like so:

openPopup();

            Ext.Ajax.Request({
                action: 'retrieve_last_config',
                stage_id: stage_id,
                success_fn: function(response) {
                    Ext.each(response.config_data, function(result) {
                        if(result != null) {
                            $('#stage-due-date').html(result.date_due);
                            $('#stage-email-body').html(result.email_body);
                        }
                    });
                }
            }); //end ajaxRequest

The above is passing an id to a function that looks like this:

function retrieve_last_config($request) {

$last_config = stage_config::getLatest($request->db, "WHERE stage_id='{$request->stage_id}'");

foreach ( $last_config as $config ) {
    $config_data[] = array(
        'id' => $config->id,
        'stage_id' => $config->stage_id,
        'template_id' => $config->template_id,
        'date_due' => convertDateFormat($config->date_due),
        'email_body' => $config->email_body,
        'send_email' => $config->send_email,
        'create_date' => convertDateFormat($config->create_date),
    );

}

return json_encode(array('status' => 'OK', 'config_data' => $config_data));
}

I’d be happy to dig even deeper, with class definition etc. But I figured this would give enough of idea. Am I way off base as far as my approach? Any help is appreciated, thank you!

Answer 1

The high-level approach is fine. For performance problems, you start by measuring where time is spent. Without these details, we could all speculate but you’ll want to actually measure all of this anyway.

Questions you want to answer:

• How much time is spent retrieving the data on the server?
• How much time is spent doing the json_encode?
• How much data is going over the wire?
• How long does that take?

Answer these questions and you’ll know what to fix.