Conditionals not working in Javascript block

#1 / Aug 22, 2011 10:30am

fcb66

11 posts

Hi,

(Sorry this is in General Discussion, I’ve yet to get my account cleared for technical support.)

EE 2.2.1

I am using data from a channel to show pins and their info windows on a Google map. So in the head section of the page I have a script block to create everything. Part of which puts data into the info window like this…

{exp:channel:entries channel="my-channel"} 
        var text = "<div id='map_popup'><h3>{title}</h3><p>"<br />
                    {if address_line_1}+"{address_line_1}"{/if}<br />
                    {if address_line_2}+"{address_line_2}"{/if}<br />
                    {if town_city}+"{town_city}"{/if}<br />
                    {if county}+"{county}"{/if}<br />
                    {if post_code}+"{post_code}"{/if}<br />
                        {if phone}+"Telephone: {phone}"{/if}<br />
                        {if website}+"Web: <a href="http://{website}" title='Find Us on the Web'>{website}</a>"{/if}<br />
                        +"</div>";<br />
        <br />
        var latlng = new google.maps.LatLng({lat}, {long});<br />
        createPin(latlng,text);<br />
{/exp:channel:entries}

All seemed to be working great until I tested it with incomplete data and noticed it’s outputting the empty lines anyway. I’ve even tried changing one of the conditionals to {if 1==2} and that line was also output anyway.

Does anyone have any thoughts on why this might be happening or something I have missed?

Thanks

#2 / Aug 22, 2011 8:09pm

the3mus1can

426 posts

I do not like to concatenate strings to build HTML is JS - causes to many problems. I prefer to use something like http://www.handlebarsjs.com/.

<script src="path/to/handlebars.js" />

<script type="text/javascript">

var source   = $("#map-pop-template").html(),
     template = Handlebars.compile(source);
    
{exp:channel:entries channel="my-channel"} 

    var entry =  {
        title: "{title}",
        address_line_1: "{address_line_1}",
        address_line_2: "{address_line_2}",
        town_city: "{town_city}",
        county: "{county}",
        post_code: "{post_code}",
        phone: "{phone}",
        website: "{website}"
    };
    
    var latlng = new google.maps.LatLng({lat}, {long});
    
    createPin(latlng, template(entry));
    
{/exp:channel:entries}
    
</script>

<script id="map-pop-template" type="text/x-handlebars-template">
    <div id='map_popup'>
        <h3>{{title}}</h3>
<p>        {{#if address_line_1}}{{address_line_1}}{{/if}}<br />
        {{#if address_line_2}}{{address_line_2}}{{/if}}<br />
        {{#if town_city}}{{town_city}}{{/if}}<br />
        {{#if county}}{{county}}{{/if}}<br />
        {{#if post_code}}{{post_code}}{{/if}}<br />
        {{#if phone}}Telephone: {{phone}}{{/if}}<br />
        {{#if website}}Web: <a href="http://{{website}}" title='Find Us on the Web'>{{website}}</a>{{/if}}<br />
   </div><br />
</script>

#3 / Aug 31, 2011 10:03am

fcb66
11 posts

Sorry for the delayed response, priorities were shifted for a little bit.

Your comment about concatenation causing problems is interesting as I’ve never had a issue in the past. Perhaps I’ve just never pushed it hard enough!

Anyway, I’ve not used the template library you suggested, (although I’m sure I can put it to good use elsewhere so thanks for the link), but it has sent me off on a different train of thought. So I’ve now written my own mini template function and calling that seems to work fine.

Thanks again for your help.

Thread

fcb66

the3mus1can

fcb66

Username

Password

Thread