Howto return formated HTML-code with a javascript function

Question

This question is bothering me for quite some time. Is there a better way to do this, because this is very difficult to code and to maintain?

function format_details ( d ) {
  var r = '';
  var vaste_afspraak = (d.werkbon.werkbonafspraaktype_id == 1)? 'JA': 'NEE';
  r += '<div class="well no-padding"><table id="dt_details" class="table table-bordered table-condensed" class="display" width="100%">';
    r += '<tbody>';
    r += '<tr>';
      r += '<th colspan="2" class="text-center">#' + d.werkbon.id + ' - Details werkbon ' + d.werkbon.nummer + '</th>';
    r += '</tr>';
    r += '<tr>';
      r += '<th style="width:20%;">Locatie naam</th>';
      r += '<td>' + d.werkbon.locatie_naam + '</td>'; 
    r += '</tr>';
    r += '<tr>';
      r += '<th>Adres</th>';
      r += '<td>' + d.werkbon.locatie_adres + '</td>'; 
    r += '</tr>';
    r += '<tr>';
      r += '<th>PC Plaats</th>';
      r += '<td>' + d.werkbon.locatie_postcode + ' ' + d.werkbon.locatie_woonplaats + '</td>'; 
    r += '</tr>';
    r += '</tbody>';   
  r += '</table></div>';
  return r; 
}

I'm voting to close this question as off-topic because it is asking for [a code review](http://codereview.stackexchange.com/help/on-topic) — Quentin, Jan 22 '16 at 14:37
Possible duplicate of [Creating multiline strings in JavaScript](http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript) — gfullam, Jan 22 '16 at 14:46

Jonathan Lam · Answer 1 · 2016-01-22T14:42:39.730

Although there really isn't any need to format code out from JS to HTML (whitespace is ignored in the browser), you can do this by printing out tabs (\t) as necessary.

EDIT I assumed at first that you wanted to format the outputted HTML, but if you wanted to format the JS function as well, look at the following:

For example:

function format_details ( d ) {
  var vaste_afspraak = (d.werkbon.werkbonafspraaktype_id == 1)? 'JA': 'NEE';
  return '<div class="well no-padding"><table id="dt_details" class="table table-bordered table-condensed" class="display" width="100%">' +
  '\t<tbody>' +
  '\t\t<tr>' +
  '\t\t\t<th colspan="2" class="text-center">#' + d.werkbon.id + ' - Details werkbon ' + d.werkbon.nummer + '</th>' +
  '\t\t</tr>'  +
  '\t\t<tr>' +
  '\t\t\t<th style="width:20%;">Locatie naam</th>' +
  '\t\t\t<td>' + d.werkbon.locatie_naam + '</td>' +
  '\t\t</tr>' +
  '\t\t<tr>' +
  '\t\t\t<th>Adres</th>' +
  '\t\t\t<td>' + d.werkbon.locatie_adres + '</td>' +
  '\t\t</tr>' +
  '\t\t<tr>' +
  '\t\t\t<th>PC Plaats</th>' +
  '\t\t\t<td>' + d.werkbon.locatie_postcode + ' ' + d.werkbon.locatie_woonplaats + '</td>' +
  '\t\t</tr>' +
  '\t</tbody>' +   
  '</table></div>';
}

You don't need the r += on each line; just add it all together in one statement. Also,you don't need the r at all; just return the value instead of creating an extra variable.

score 1 · Accepted Answer · answered Jan 22 '16 at 14:49

People suggest using <script src="..."> and <link rel="stylesheet" href="..." /> for a reason: separation of HTML, JavaScript and CSS.

I would suggest not dumping large amounts of HTML into your JavaScript file for much the same reason.

Instead, consider having the HTML defined in your HTML. One technique might be:

<script type="text/html" id="template-details">
    <div><table><whatever>
        <th>Adres</th>
        <td>{{locatie_adres}}</td>
    </whatever></table></div>
</script>

Then in your JavaScript, you can do this:

var r = document.getElementById('template-details').innerHTML;
r = r.replace(/\{\{([a-z0-9_]+)\}\}/g,function(_,key) {
    return d.werkbon[key];
});
return r;

This way you have a template saved in your HTML, which will be much easier to manage, and the JavaScript will just take that and put in the data before outputting it.

Personally though, I think a more sensible option would be to send an AJAX request to the server to get the data, and the server can send that data in all its HTML glory.

score 0 · Answer 3 · answered Jan 22 '16 at 14:51

A solution could be store in a html file your template than make an ajax call to retrieve the html and use jquery to change the dynamic content through id or class attribute. The code could be something like this

$.ajax({
 async:false,
 url: "fileURL",
 contentType: "text/plain",
 type: "GET" ,
 dataType:"text",
 success: function(result) {
    $(result).find(".text-center").text("enter the text with your variable");
    return $(result).html();
 },
 error: function(error){
    alert (error);
 }
});

Please double check the syntax. I didn't tried it

Howto return formated HTML-code with a javascript function

3 Answers3