Question

What is the most efficient way to load a resource using Ajax and then replace the contents of #listing and #contextActions?

// Load resource and replace source `listing` with target `listing`.
$('#listing').load('/myuri.php #listing');
// Load resource and replace source `contextActions` with target `contextActions`.
$('#contextActions').load('/myuri.php #contextActions');

Surely there must be a better way of doing this? I don’t like the idea of having two load requests on the very same resource!

Answer 1

There is a better way of doing that.

Have /myuri.php return a JSON object that contains the necessary data both for #listing and #contextActions and use a callback to assign it.

$.load('/myuri.php', {}, function (responseText, textStatus, XMLHttpRequest) {
   var data = $.parseJSON(responseText);
   $('#listing').html(data.listing);
   $('#contextActions').html(data.contextActions);
});