0

I'm loading quite a bit of json data through a jquery/ajax/php get. When I get the data, I display it in some tables on a modal i pop up. And I do it sort of like this.

str1  = "<table class='line_item_order_info_table'>";
str1 += "<tr><td class='line_item_label' >";
str1 += "Order no.";
str1 += "</td></tr>";
str1 += "<tr><td class='line_item_data' id='order_number_td'>";
str1 += data.order_number;
str1 += "</td></tr>";
str1 += "</table>";

str1 += "</td>";
str1 += "<td>";

str1 += "<table class='line_item_order_info_table'>";
str1 += "<tr><td class='line_item_label'>";
str1 += "Order date";
str1 += "</td></tr>";
str1 += "<tr><td class='line_item_data'>";
str1 += data.order_date;
str1 += "</td></tr>";
str1 += "</table>";

//many, many more lines that look like this

$('#modal-div').html(str1);

Is this the best way to put this data into html via javascript? It's sort of difficult to keep track of like this. This much html, without any indentations anywhere to make it easier to read, is sort of painful to look at or try to find something in.

Grateful if you can point me in the direction of a better strategy! Thanks!

1252748
  • 14,597
  • 32
  • 109
  • 229
  • 5
    Have you considered using templates? (this question has a few examples of template engines http://stackoverflow.com/questions/4286181/what-is-the-best-current-javascript-templating-engine) – MilkyWayJoe May 16 '12 at 14:36
  • This sounds like a bad implementation design. You should make use of templates like @MilkyWayJoe suggests. – Rob Angelier May 16 '12 at 14:46
  • thanks. can you give me a bit of background on templates. a quick google search gives me a lot of them, but not a lot of introduction to what they do or why they're better or more practical for what i'm doing. maybe you know some sites.. – 1252748 May 16 '12 at 15:06

3 Answers3

1

If you absolutely have to write out your HTML as you've described, you can just add line escapes to your markup after each line.

var myHTML = '<div class="bleh"> \
     <ul class="bleh2"> \
         <li>'+ data.order_number +'</li> \
         <li>'+ data.order_date +'</li> \
     </ul> \
  </div>';
sbeliv01
  • 11,550
  • 2
  • 23
  • 24
  • thanks! but i don't absolutely have to write html like that. what's a better way? I'm very interested! – 1252748 May 16 '12 at 15:00
  • I agree with Rob Angelier and MilkyWayJoe that my solution is not a great design (I'm trying to work with templates now) but this is a pretty cool way to make my current system a lot more readable. Thanks!! – 1252748 May 22 '12 at 17:14
1

If you pass an array of objects from your server code (rather than a string of HTML) you can then loop through the array using JavaScript, grabbing each of the properties of the objects in the array.

On each iteration $.append the html into your #modal-div.

something along the lines of this:

for (int i = 0: i<msg.d.length; i++) {

    var order_number = msg.d[i].order_number;
    ...

    $('#modal-div').append('<li>'+order_number +'</li>');
}
Greg
  • 31,180
  • 18
  • 65
  • 85
1

You can markup #modal-div in HTML as a template with specific ids and replace with actual data before showing the modal window.

example

<div id="modal-div">
<table class='line_item_order_info_table'>
  <tr>
    <td class='line_item_label' >Order Number</td>
    <td id="order_num">order_num</td>
  </tr>
  <tr>
    <td class='line_item_label'>Order date</td>
    <td id="order_date">order_date</td>
  </tr>
</table>
</div>

$(document).ready(function(){
  var data ={"ordernumber":"123", "orderdate":"12/01/1999"};
  $('#modal-div').hide();
  $('#submit').click(function(){
    $('#order_num').html(data.ordernumber);
    $('#order_date').html(data.orderdate);
    $('#modal-div').show();
  });
});
  • I've read that I should do the dom manipulation as little as possible. ie, only update it once, if possible. I think this would be a pretty heavy process by the time I did it several hundred times. but maybe it's negligible? – 1252748 May 16 '12 at 16:42