Variable Variables in jQuery

So recently, working on a site with multiple locations, we ran across a need to dynamically display a map for the location that was being selected by the user. At first, this sounded like a really simple process. Truth be known, it should have been. However, thanks to a goofy acting response from the Google Maps API, the dynamic maps’ iframe was not displaying properly. Changing the source worked great but without a lot of reworking of the data collection side and then the rest of the site references fetching the locations, this became problematic.

What to do…

Firstly, this site is being built with ExpressionEngine, a great CMS. To fetch the location data across the site quickly, we used Stash which is an excellent add on developed by Mark Croxton. If you haven’t used it yet, it’s definitely worth looking into. The location selection was being triggered from a click event in javascript (using jQuery). This is simple enough to do with jQuery with something like:

 $(".location_list li a").click(function(e) {
    var location = $(this).attr('name');
    $(".contentbox.active").removeClass('active').hide();
    $(".contentbox." + location).addClass('active').show();
});

We needed to know what all locations were available. Since there were an unknown amount available, hard coding locations for the variables to feed the src attribute of the iframe for the map was not an option. Now, there may be several ways of doing this, but this is the way we solved our issue with this project.

How to get the list from the database

In order to get the list of possible locations that were entered by the site owner, we set an object variable in jQuery and then looped through our Stash list we created to use site wide. That looked something like this in our case:

var obj = {};
{exp:stash:get_list name='locations'
    parse_conditionals='yes'
    prefix='local'
}
    obj.location_{local:count} = "  https://www.google.com/maps/embed/v1/place ?key=(API KEY HERE)&q={local:street},{local:city}%20{local:state}%20{local:postal_code}&attribution_source=(COMPANY NAME HERE)&attribution_web_url={current_url}";
{/exp:stash:get_list}

This created a src string instance for each location entered by the site owner. With the object created, we just needed to dynamically call the selected instance.

Call the selection dynamically

Going back to the original, we just need to make a modification that also changes the src attribute of the iframe for the map. We create another variable to be used to select the correct instance. We call this ‘loc’.

$(".location_list li a").click(function(e) {
    var location = $(this).attr('name');

(We split the location to get the instance number of the clicked location)

    var loc = 'location_' + $(this).attr('name').split('-')[1];

 

    $(".contentbox.active").removeClass('active').hide();

(Before we show the map, we change the src attribute to the selected instance)

    $(".contentbox." + location + " iframe").attr('src',<b><i>obj[loc]</i></b>);
    $(".contentbox." + location).addClass('active').show();
});

obj[loc] is where we are selecting the instance from the object we created earlier in the Stash loop. The ‘loc’ variable we added gets the instance number and appends it to ‘location_’ so that we can reference that inside the object.

Hopefully this can help someone else that has a similar need. We have a lot of new ideas brewing now. Similar to PHP‘s variable variables, this creates the ability to offer more dynamic interactions with visitors.

Share this post

Comments

comments powered by Disqus