Using JavaScript in a jQuery template

Question

I can't get it to work. How do I add JavaScript to a jQuery template?

I tried it in the following way without success:

<script id="geoShapeTooltip" type="text/x-jquery-tmpl">
    ${ alert ("TEXT"); }
    <table id="tooltipTable" >
        <tr><th class="tooltipHeading" colspan="2">
                ${item.fieldValues.NAME}, ${item.fieldValues.REGION}</th></tr>
        <tr>
            <td>Population:</td>
            <td>${item.fieldValues.POP2005}</td>
        </tr>
    </table>
</script>

Here is my problem on fiddle.

edit: I found a different solution. In Infragistics templates you can execute javascript in if statements. {{if YOUR_JAVASCRIPT_GOES_HERE}}Some Text}}{{/if}} And if you want, you can add values to the parameter, to display them later. A little bit hacky, but works.

You need to find the JavaScript callback function for the tooltip hover/click event (if there is one). Start by looking at the igMap documentation. — adaam
– adaam, Commented Jul 7, 2014 at 9:47
It's an asp.net control, but the part i posted is jQuery. And as you see, i tried it like in the article, which doesn't work. It just shows ${ alert ("TEXT"); } as text. — Nicolas
– Nicolas, Commented Jul 7, 2014 at 9:56

adaam · Accepted Answer · 2014-07-07 10:11:52Z

1

I tried inserting a nested normal JavaScript tag inside of the jQuery templating script area and it seemed to work fine:

<script id="geoShapeTooltip" type="text/x-jquery-tmpl">
        <table id="tooltipTable" >
            <tr><th class="tooltipHeading" colspan="2">
                    ${item.fieldValues.NAME}, ${item.fieldValues.REGION}</th></tr>
            <tr>
                <td>Population:</td>
                <td>${item.fieldValues.POP2005}</td>
            </tr>
        </table>
        <script type="text/javascript">
            alert('${item.fieldValues.NAME}');
    </script>
</script>

Obviously this has the disadvantage that you are effectively adding a new <script type="text/javascript">..</script> tag to the DOM each time a country is hovered over. The alternative and proper way to do it is to find out what event is triggered in the igMap documentation when a country/area is hovered over and write an event handler in your document.ready handler to listen for that event. If you do it this way, you need to use jQuery's on delegated event handler to listen for any events related to a particular class (i.e. geoShapeTooltip) as and when they are added dynamically to the page.

http://jsfiddle.net/W5ys9/6/

edited Jul 7, 2014 at 10:11

answered Jul 7, 2014 at 9:59

adaam

3,7268 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nicolas Over a year ago

Good suggestion with the inline script tag. After a while i found an other way. seriesMouseLeftButtonUp works on the igMap. Even if it is not documented anywhere -.-

Collectives™ on Stack Overflow

Using JavaScript in a jQuery template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related