CODEWITHSUNDEEP
javascriptjquery
ryandlf
ryandlf

Reputation: 28555

jQuery Load Without Appending to Element

I am using jQuery's load function to get template data from external html files. In most cases I prefer to storage the data in a variable and append it when I need to later on. For example, I may end up cloning the node several times, or appending other data to it etc etc. The point is I need to be able to load an element from an external file, but not append it to an existing document.

What I am doing now is simple:

var storage = document.createElement('div');
$(storage).load('somehtmlfile.html #sampleTemplateDiv');

But its annoying to have to remove the html from inside the storage div every single time. It would be nice if I could do something similar without having to append to a redundant container div and I could just have the data from the html file waiting nicely in the storage variable. Is this possible?

A non-jquery solution would be perfectly acceptable.

Upvotes: 3

Views: 4761

Answers (4)

Amir Akhrif
Amir Akhrif

Reputation: 11

My solution was to append .load to document ready. It loads the php functional script without the need for an element.

$( document ).ready(function() {
    // code
}).load('url/to/file.php');

Hope this helps!

Upvotes: 0

Ben Huson
Ben Huson

Reputation: 11

Could you load it into a jQuery object that is not appended to the DOM? e.g.

var data = $( '<div id="loaded-content" />' ).load( url );

You later when you want to use it:

$( '#my-container' ).html( data.html() );

Upvotes: 1

ryandlf
ryandlf

Reputation: 28555

My solution was to use .ajax instead of .load and to temporarily store the data in the storage div, the extract it and return the element. I am using this inside an external function as well, so it was appropriate to make this a synchronous call...unfortunately or I wouldn't be able to properly return the element.

var ret = null;
$.ajax({
    url: url,
    async: false,
    success: function(data) {
        var storage = document.createElement('div');
        storage.innerHTML = data;
        var template = $(storage).find('#' + id);
        if(template.length > 0) ret = template[0];
    }
});
return ret;

Upvotes: 1

Ozzy
Ozzy

Reputation: 8312

One way you could do this is by loading a JSON object which contains the data, like so:
(you could also point the URL to a server-scripted file that reads the URL parameters and outputs a JSON object)

Example:

//JQUERY:
$.ajax({
  method: "GET",
  dataType: "json",
  url: "path/to/template.json",
  success: function(data) {
    var storage = data.template.html;
    // do something here
  }
});

//JSON FILE:
{
  "template":
  {
    "html":"<div ...></div>",
    "some_var":"some_value"
  }
}

Another way, you could just load the HTML file with parameters... ex: change the url to: url: "path/to/my_template.html?id=some_div" or use load() with the URL with params in it.

Then in each template file just insert a script to read the variable and rewrite the document with the element requested.

Code:

//query.js
function getQueryString() {
  var q = {}
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0; i<vars.length; i++) {
    var pair = vars[i].split("=");
    q[pair[0]]=pair[1];
  }
  return q;
}
  $(document).ready(function() {
    var $q = getQueryString();
    if ($q.id) {
      document.write($($q.id).html());
    }
  });

//template html files
//head section
<script type="text/javascript" src="query.js"></script>

I havent tested this but I think it should work...

You'll need to put that script in each template file.

Upvotes: 0

Related Questions