shadowbox display of html drawn from another page via jQuery.get()

Question

I'm a bit new to the Ajax thing and am hoping you all can suggest which of these two methods is most efficient. Both approaches seem to work, but perhaps there is some better way altogether?

thisPage.html wants to display a blob of html drawn from thatPage.html (on the same host) in response to a click on a link. I'm using Shadowbox's html player to display the blob, and I'm using jQuery's get() as a shortcut to the XMLHttpRequest.

In my first solution, thisPage.js contains this function:

function loadEntry(entry){
  jQuery.get('thatPage.html', function(data){
    var elem = document.createElement("div");
    elem.innerHTML = "<div class='entry-to-show'>" + jQuery(data).find("a[name='" + entry + "']").parent().parent().html() + "</div>";

    Shadowbox.open({
      options: {
        enableKeys: false
      },
      player: 'html',
      content: elem.innerHTML
    });
  });
};

But then I thought, rather than have thisPage load thatPage every time loadEntry is called, I'd just call it once when thisPage.js is loaded, wrap it up as a variable containing a jQuery object and access it like this:

var $Content = null;

jQuery.get('thatPage.html', function(data){
  $Content = jQuery(data).find("#content");
});

function loadEntry(entry){

  elem = $Content.find("a[name='" + entry + "']").parent().parent().html();

  Shadowbox.open({
    options: {
      enableKeys: false
    },
    player: 'html',
    content: elem
  });
};

Is this second method actually more efficient, or is there some other approach that would be more appropriate for what I'm trying to do? Any advice or general observations would be welcome.

Thanks, jjon

Answer 1

Your second approach is definitely more efficient. Without knowing more about what problem you're actually trying to solve by loading information from one page to another I can't provide a better solution although I can't think of any instances where what you're doing would be an inappropriate solution.