In this short article, we’ll see some techniques to generate DOM elements and section using jQuery and its chaining feature.<\/p>\n
<\/p>\n
There are 2 techniques out there to create dynamic DOM elements.<\/p>\n
1. Using the createElement()<\/em> method on the Document<\/strong> standard oject: <\/p>\n 2. Using jQUery<\/p>\n Clearly the second method is better and cleaner. However this technique is suitable only for occasionnal dynamic DOM creation. If you need to create iterable items (like a table or a list of items) with dynamic data, it’ll become quickly a nightmare<\/p>\n <\/p>\n Here is a very common use case: you are designing a user search page<\/strong>. There is a search form with various parameters. Below the search section is the result section where you display all found users in a table.<\/p>\n In the old style architecture, a click on “Search<\/strong>” button will submit the form to the server, which will then execute the query and build the result table and render the response page. All the job is done server-side.<\/p>\n With RESTfull <\/strong>architecture, the server only takes care of the DB querying and will return a list of JSON objects<\/strong> as results. The client-side is responsible for the data formatting. There “HTML templating<\/strong>” comes into play.<\/p>\n The idea is to create a template row representing a result and hide it at the end of the page:<\/p>\n As shown above, all the DOM element templates are nested inside a div container with style=”display:none;”<\/em><\/strong> so it will not be visible on the page.<\/p>\n The same div can contain several template elements, like our template row for search result or any other templates. You need to give them a unique id so they can be easily fetched using jQuery selector<\/strong>. Now let’s see how we can format result row upon reception of the JSON data from server. Let’s assume that the returned data is a list of JSON objects representing each an user details:<\/p>\n In the ajax success function, upon reception of the JSON data set, we iterate through the “data<\/strong>” list. For each user JSON we:<\/p>\n That’s pretty simple. The job is done with a jQuery chain using end()<\/strong> method to go back and forth to the row element (for details on jQuery chaining<\/strong>, check my previous post<\/a>).<\/p>\n Please notice that at step 2, we need to clear the id of the cloned element otherwise we’ll end up having several rows with the same id in the DOM<\/strong>, big trouble!<\/p>\n Of course, the example is quite straightforward because the logic is minimalist. If you have complex logics with if\/else if blocks involved, all the jQuery chaining beauty is gone!<\/strong><\/p>\n\nvar myDiv = document.createElement(\"div\");\nvar mySpan = document.createElement(\"span\");\nmySpan.createTextNode(displayedText);\nmyDiv.appendChild(mySpan);\n<\/pre>\n
\nvar myDiv = $('div').append(($('span').html(displayText));\n<\/pre>\nII HTML templating with jQuery<\/h1>\n
A) The idea<\/h3>\n
\n<div>\n\t<form id="searchForm">\n\t\t...\n\t\t<button type="submit" onclick="doSearch()">Search<\/button>\n\t\t...\n\t<\/form>\n\t<section id="resultArea">\n\t\t<table id="resultTable">\n\t\t\t<thead>...<\/thead>\n\t\t\t<tbody><\/tbody>\n\t\t<\/table>\n\t<\/section>\n<\/div>\t\n<div id="templates" style="display:none;">\n\t<tr id="rowTemplate">\n\t\t<td class="name">Name<\/td>\n\t\t<td class="age">Age<\/td>\n\t\t<td class="skills">Java, C#, Python<\/td>\n\t\t<td class="xp">5 years<\/td>\n\t<\/tr>\n\t\n\t<span id="someOtherTemplate">\n\t\t...\n\t\t...\n\t<span>\n<\/div>\n<\/pre>\n
\n <\/p>\nB) Implementation<\/h3>\n
\n{\n\t\"name\": \"John Skit\",\n\t\"age\": \"29\",\n\t\"skills\": \"Java, Groovy, HTML5\",\n\t\"xp\": \"7 years\"\t\n}\n<\/pre>\n\nfunction doSearch()\n{\n\t$.ajax({\n\t\ttype: 'GET',\n\t\turl: '\/search',\n\t\tdataType: 'json',\n\t\tsuccess: function(data)\n\t\t{\n\t\t\t$.each(data, function(index,user)\n\t\t\t{\n\t\t\t\t$('#rowTemplate').clone().attr('id','')\n\t\t\t\t.find('.name').html(data.name).end()\n\t\t\t\t.find('.age').html(data.age).end()\n\t\t\t\t.find('.skills').html(data.skills).end()\n\t\t\t\t.find('.xp').html(data.xp).end().\n\t\t\t\t.appendTo('#resultTable tbody');\n\t\t\t});\n\t\t}\n\t});\n}\n<\/pre>\n\n
\nfunction doSearch()\n{\n\t$.ajax({\n\t\ttype: 'GET',\n\t\turl: '\/search',\n\t\tdataType: 'json',\n\t\tsuccess: function(data)\n\t\t{\n\t\t\tvar row;\n\t\t\t$.each(data, function(index,user)\n\t\t\t{\n\t\t\t\trow =$('#rowTemplate').clone().attr('id','');\n\n\t\t\t\trow.find('.name').html(data.name).end()\n\t\t\t\t.find('.age').html(data.age);\n\n\t\t\t\t\/\/ Age discrimination\n\t\t\t\tif(data.age > 50) \n\t\t\t\t{\n\t\t\t\t\trow.find('.age').addClass('oldDuffer'); \n\t\t\t\t}\n\t\t\t\t\n\t\t\t\trow.find('.skills').html(data.skills).end()\n\t\t\t\t.find('.xp').html(data.xp);\n\n\t\t\t\t\/\/ XP highlighting\n\t\t\t\tif(data.xp < 3) \n\t\t\t\t{\n\t\t\t\t\trow.find('.xp').addClass('junior'); \n\t\t\t\t}\n\n\t\t\t\trow.appendTo('#resultTable tbody');\n\t\t\t});\n\t\t}\n\t});\n}\n<\/pre>\n