2

What's the best way to load HTML markup for a custom jQuery UI widget?

So far, I've seen elements simply created using strings (i.e. $(...).wrap('<div></div>')) which is fine for something simple. However, this makes it extremely difficult to modify later for more complex elements.

This seems like a fairly common problem, but I also know that the jQuery UI library is new enough that there may not be a widely accepted solution for this. Any ideas?

Andreas Grech
  • 105,982
  • 98
  • 297
  • 360
Wilco
  • 32,754
  • 49
  • 128
  • 160

4 Answers4

5

Something which is quite neat to do is this:

var newDiv = $("<div></div>"); //Create a new element and save a reference
newDiv.attr("id","someid").appendTo("body");

That way, you are creating an element, and storing its reference in a variable, for later use.

Andreas Grech
  • 105,982
  • 98
  • 297
  • 360
  • 2
    Good answer! Its worth considering also that DOM manipulation can be costly, so its worth trying to render load all your HTML before attempting any manipulation. There is also a convention to prefix any jQuery variables with a $. So newDiv would become $newDiv. This helps distinguish between jQuery and non jQuery variables. – James Wiseman Aug 08 '09 at 17:44
  • You can actually just do... $('
    ').attr({ id: 'someid' // lots more attributes }).appendTo('body');
     – Alex K Jan 27 '13 at 22:14
  • @RegionalC sure, but the point of my answer was to show how you could store a reference to the element for later use. – Andreas Grech Jan 28 '13 at 12:33
  • @AndreasGrech - Of course, I was just pointing out that you don't need the closing tag when creating elements with jQuery, and that you can set multiple attributes at once. – Alex K Jan 29 '13 at 15:50
  • @RegionalC: Ah yes, fair enough. – Andreas Grech Jan 29 '13 at 16:33
2

If you have a large amount of complex HTML, and don't want to deal with hardcoded strings in your JavaScript code, you can put it in a separate HTML file and use the Ajax load function.

It's chainable, so you can load the HTML file (the whole thing, or a selected fragment), inject it into your current DOM, and keep right on going.

system PAUSE
  • 37,082
  • 20
  • 62
  • 59
  • It's also worth checking out a JS templating engine, like the one in Underscore.js http://underscorejs.org/#template – Alex K Jan 27 '13 at 22:20
1

A lot of times for really complex templates i'll just store the html blocks as strings in JSON objects for later access ... eg:

var temp = {
  header : "<div class='foo'><h3>{HEADER}</h3></div>",
  content : "<div class='bar'><p>{COPY}</p></div>"
}

And then just perform some replacement on those when things come back. That way the markup is separated somewhat from the logic to load the data, so swapping out templates etc can be a little quicker.

var text = "I am the header text";
var head = new String(temp.header);
$(target).append(head.replace("{HEADER}",text));

Anyway, this approach has worked well for me with AJAX widgets and that sort of thing, where there is a possibility that the design may radically change around.

sparkey0
  • 1,641
  • 1
  • 12
  • 14
0

A popular, efficient method is to output all of your additional markup (whatever you may need later) to the bottom of your page in script tags, so that the markup is not rendered by the browser.

<script type="text/template" id="template-example">
    <!-- All of your markup here -->
    <% // do some JavaScript in here... %>
    <%= echo_this_variable %>
</script>

You can then grab your markup using jQuery...

var markup = $('#template-example').html();

And parse those JS examples I threw in there using a templating engine, such as the one in Underscore.js (which I recommend), or one of the jQuery ones in this answer: jQuery templating engines

Have fun!

Community
  • 1
  • 1
Alex K
  • 14,893
  • 4
  • 31
  • 32