Javascript using PHP/HTML file as template

Question

I'm creating a map appication using the Google Maps API v3, and one of the sections is the HTML layout of the rendered InfoWindow. At the moment, I have to create one long variable in the main map.js file, and it is messy and hard to edit without breaking the main application, and is a general nightmare for anyone who didn't write it.

This is what it looks like at the moment:

var html = "<div class=loc-one><div class=loc-name>" + name + "</div><hr class=loc-name-hr></div> <br/><div class=loc-two><div class=loc-two-l><div class=loc-add>" + address1 + "<br/>" + address2 + "<br/>" + address3 +"</div></div><div class=loc-two-r><div class=loc-type><strong>" + type + "</strong></div><div class=loc-price>Price Rating: " + price + "</div></div></div><hr class=loc-name-hr><div class=loc-three><div class=loc-three-times-head><img src=http://sandbox.tristanbacon.me/citymap/img/ui/ui_times.png /><span class=times-head-title>Opening Times</span></div><div class=loc-three-times>" + times + "</div></div><hr class=loc-name-hr><div class=loc-four><li><div class=loc-sec-img><a href=# onclick=TINY.box.show({image:'http://sandbox.tristanbacon.me/citymap/img/" + img_day + "',boxid:'frameless',animate:true,openjs:function(){openJS()}})><img src=http://sandbox.tristanbacon.me/citymap/img/ui/ui_img.png /><span class=loc-four-view>View Image</span></a></div></li></div>";

As you'll see, I can't even spread it out in the JS file, as it will break the code. Ideally, I'd like it to look like this:

<html>
<div class=loc-one>
<div class=loc-name>
"+ name +"
</div>
<hr class=loc-name-hr>
</div> 
<br/>
<div class=loc-two>
<div class=loc-two-l>
    <div class=loc-add>
    " + address1 + "
    <br/>
    " + address2 + "
    <br/>
    " + address3 + "
    </div>
</div>
<div class=loc-two-r>
    <div class=loc-type>
        <strong>" + type + "</strong>
    </div>
    <div class=loc-price>
        Price Rating: " + price + "
    </div>
</div>
</div>
<hr class=loc-name-hr>
<div class=loc-three>
<div class=loc-three-times-head>
    <img src=http://sandbox.tristanbacon.me/citymap/img/ui/ui_times.png />
    <span class=times-head-title>Opening Times</span>
</div>
<div class=loc-three-times>
    " + times + "
</div>
</div>
<hr class=loc-name-hr>
<div class=loc-four>
<li>
<div class=loc-sec-img>
    <a href=# onclick=TINY.box.show({image:'http://sandbox.tristanbacon.me/citymap/img/" + img_day + "',boxid:'frameless',animate:true,openjs:function(){openJS()}})><img src=http://sandbox.tristanbacon.me/citymap/img/ui/ui_img.png />
    <span class=loc-four-view>View Image</span>
    </a>
</div>
</li>
</div>
</html>

It would look a lot cleaner in the actual file, as I had to format it for the Stackoverflow coding layout. I'm sure you get the gist of it though.

I'd like to have a template.html (or .php?) file that looks like the above. Is it possible to pass variables through this HTML file, link to the HTML file from the map.js file (as in the first preview), and then have it display normally on the actual website?

I hope I've explained that properly!

Thanks

You shouldn't really be generating HTML like this in JS or you will run into the problems such as the one you have. Could you not render the view and JS using PHP? — AlexP, Oct 22 '12 at 20:43
There are many free PHP templating engines available. Building up ensure pages as strings is insane. — Diodeus - James MacFarlane, Oct 22 '12 at 20:49
This is why I want to change it! It's the default method for displaying, according to the API Documentation. A royal pain in the arse if you ask me, and I'm not even that much of a programmer! — tristanojbacon, Oct 22 '12 at 21:05

score 1 · Answer 1 · answered Oct 22 '12 at 20:58

1

I think you're better off using a proper (but simple) templating framework. Take a look at handlebars. Use that and you're up and running in under 20 minutes. The trick they use is to not define the template in a javascript variable, but in a script block with a special type attribute and have the templating mechanism parse the script block. Don't try to build templating stuff yourself, you'll paint yourself into a corner in no time. (At least I have :) )

answered Oct 22 '12 at 20:58

Koen Peters

12,798
6
36
59

Great. If it works for you make sure to mark the answer as the correct one so other people can benefit as well. Happy coding. – Koen Peters Oct 22 '12 at 21:06

score 0 · Answer 2 · edited May 23 '17 at 12:12

You can certainly 'spread out' a string in JS:

var html = "<html>" + 
"<div class=loc-one>" + 
"<div class=loc-name>" +
name +
"</div>" + 
"<hr class=loc-name-hr>" + 
... etc

You could alternatively try this approach, which isn't universally supported:

var html = "<html> \
<div class=loc-one>\
<div class=loc-name>\
"+ name +"
</div>\ 
<hr class=loc-name-hr>\
... etc

See this previous question: Creating multiline strings in JavaScript

Javascript using PHP/HTML file as template

2 Answers2