Create Dynamic (AJAX) HTML

Question

I am looking for information on this topic as described below. In particular, I'm looking for the “best-known method” or design pattern in which HTML is dynamically generated.

This is a very common task for me: Send something to the server via POST → get a list of results in JSON format → take this list from 0 to n results and show them, often as a list. This usually means creating the actual HTML in Javascript (jQuery) with something like:

HTMLResult = "<div id=.... " HTMLResult = HTMLResult + JSONDataElement HTMLResult = "</div>" ... 

Then I add each element using jQuery, or collect them and replace the HTML of some container div.

I'm tired of doing this. This is a mistake, prone, ugly, inefficient, etc.

I would rather do something else OO. Perhaps the element will be defined in some way - it is in the div, span that it contains ... so that I can do something like this:

 tempElement = new Element tempElement.text = JSONData.text ResultsList.addElement(tempElement) 

I am looking for information on the best ways to do what I described. I prefer a minimal set of tools: HTML, CSS, jQuery.

(Also how to build HTML on a server, in this case Django)?

Answer 1

Cloning elements is supposedly pretty fast, so what I sometimes do is include element templates that will be generated on the start page, with display: none . Then, when I receive data from the server, I can

 var newElement = $('#some-template').clone().removeAttr('id'); 

Then it depends on how much you need to replace. Sometimes I just set the necessary attributes and set the text, etc., Sometimes I have placeholders in the template and go something like

 newElement.html(newElement.html().supplant(paramObj)); 

where paramObj contains values ​​to replace placeholders, and supplant is taken from Crockford . Of course, changing the String prototype is not without problems, but in this case it is easy to avoid using a function.

Answer 2

• Ask the web designer to create a beautiful dummy list if he / she has not already created one
• Delete all dummy item lists, but one
• Hide the last element of the remaining list (for example, Display: none)
• In the last remaining item, create placeholders for variables sent by the server (for example, range)
• In your JavaScript, deep clown the element, make replacements, make the element visible and attach the element corresponds to node

I would not create HTML on the server.

Answer 3

Why don't you think of writing a generic function with parameters for the target Dom Element and the data you need to add? You can come up with a general method, for example:

 function GenericAjaxResponseHandler(TargetElement, AjaxResponse) { //Implemet the handler here } 

Answer 4

As you already mentioned, the easiest way to create new elements is to the backend, where you have absolute control over the creation in pure html. On the client side, you must create all of these elements programmatically. However, the biggest drawback of this method is that you kill the reuse of the JSON provider.

If you are interested in reusing data, creating RESTful as a system, and creating an OOP element, I would suggest the Dean Edward Base JS class , which simplifies OOP in JavaScript and can help you create your custom elements and collectors.

With the base, you can create an easy class hierarchy that will make your code accessible and readable.

If one of your problems is creating jQuery element efficiency , read this question