Using Tribe template tags inside Javascript

[Jenny]

Hi there! I’m trying to create a custom feature for the event calendar that generates an overall map of all venues. I’ve got most of it down, but the final–and most important–step is getting the address data out of the template tag and into the Javascript I’m using to create the map, and for whatever reason I can’t get it to work. The usual method of assigning a template tag (e.g. the_title(), the_permalink() etc) to a JS variable and then passing that variable into a function doesn’t work with Tribe template tags. It seems like the data isn’t being pulled out at all.

Here’s the relevant code I’m using, which seems like it should be pretty inoffensive: http://pastebin.com/wGZvVUVd

All of that is housed inside of a page template. As it stands, that code calls up empty alert boxes. If I add an “echo” to the php inside of the JS, no alerts come up at all.

Any idea what I’m doing wrong? Thanks in advance for your help!

(Note: I’m only using ‘alert’ to test that the data is actually showing up…it would be really annoying if visitors to the side had to click ‘ok’ for every venue that showed up. Also, I’m a relative JS n00b and am basically hacking at this with Google and the Codex…)

[Barry]

Hi Jenny – You would need to echo the output from tribe_get_full_address() otherwise it won’t be printed out inside the script element.

[Barry]

If I add an “echo” to the php inside of the JS, no alerts come up at all.

Can you share the actual generated output, so we can see what is being placed inside the double quotes?

[Jenny]

Oh, duh. With the actual address removed….

var address1 = “STREET ADDRESS, CITY, STATE, United States”;

[Jenny]

Sorry, code escaped. Here’s a pastebin: http://pastebin.com/H12J5Pr0

[Barry]

OK, so the template tag is returning a string that contains double quotes – so your address1 variable will contain

and the rest of that HTML will spill over and cause a syntax error.

So, what you need to do here if you want to capture and use all that HTML, is make sure that all of the double quotes are escaped. Or, in this particular scenario, you might just get away with using single quotes to define the string:

var address1 = '';

Potentially though the same problem could occur at some point in the future, so escaping the double quotes is possibly the more robust solution here.

[Barry]

… Good example of how badly we need proper code formatting here! Let me try posting that again.

[Barry]

OK, so the template tag is returning a string that contains double quotes – so your address1 variable will contain >div itemprop= and the rest of that HTML will spill over and cause a syntax error.

So, what you need to do here if you want to capture and use all that HTML, is make sure that all of the double quotes are escaped. Or, in this particular scenario, you might just get away with using single quotes to define the string:

var address1 = '< ?php tribe_get_full_address(get_the_ID()); ?>';

Potentially though the same problem could occur at some point in the future, so escaping the double quotes is possibly the more robust solution here.

[Barry]

Formatting is still a bit off in my last post, but hopefully you get the gist: escape quotes in your string!

[Jenny]

Okay, that makes sense. For the record / future users, I used a regex to strip out all the HTML tags so that I can pass the plain text string to the Google Maps functions: http://pastebin.com/iWGhht2b

(Now all I need to figure out is how to speed this up so it doesn’t take forever to load in…)

[Jenny]

Thanks for all your help + fantastic support/documentation!

[Barry]

Not at all: by the by, if you don’t need all that HTML then it may be better from a performance issue to do things differently (I wasn’t sure if you wanted the whole gamut of HTML markup or not).

Individual functions like tribe_get_address() and tribe_get_city() could be used to build up a plain text string. They are called in any case further down the line when you use tribe_get_full_address() (which loads the full-address.php template) so this would be the cleaner and more efficient way of doing things.

[Author]

Posts