programming

Struggles with WordPress, jQuery, and more

A couple of years ago, I randomly stumbled upon a tweet about a template to create a searchable, interactive mobile maps. It was a wonderful find for a relatively new programmer, because there was enough that was set up to be a simple, fill-in-the-blanks program. There was enough that I could try to customize as a learning experience. I learned a lot about Javascript from working with this template. I used it to create the Toynbee Tile Map.

Then, in August 2015, it suddenly broke. Clicking back and forth between different sections of the map site made the map stop loading. I turned back to the owners of the original repo on github, but that repo hadn’t been active in a long time. So I decided to try to fix it myself. I spent a long time looking at all the Javascript and JQuery functions, and what each was doing. I used my favorite debugging method — sticking “console.log” statements after every event. Not at all the best method, and a reminder to myself that I need to learn more about my browser’s debugging tools. It got me no where. It then occurred to me to go straight to the source… it wasn’t my code; it was the libraries it was depending on. I updated the jQuery libraries, and everything worked! Lesson: Begin at the source.

Now that it was working, my husband wanted to integrate it into his website (built on WordPress) documenting everything else about Toynbee Tiles. Great – so I ftp’ed everything onto his site. Within the map site, everything worked great. But clicking to return to the main site made the page hang. I spent an hour researching this, and finally found that the beloved & hated $ character isn’t recognized as such by WordPress. What to do? Pass it to your function by explicitly calling jQuery.

So if your old function looked like this:

$(function() {
  $("#mybutton").click(
    //do something
    )
});

Your new function should look like this:

jQuery(function($) {
  $("#mybutton").click(
    //do something
  )
});

Really. That’s it. And your jQuery site will play nice with your WordPress site. A few other pitfalls we ran into as we developed this site… the .htaccess file contained some redirect settings. These need to go at the beginning of the file – otherwise you’ll be stuck in an infinite loop. Also, if this map template links back to a WordPress site, consistency of the www. at the beginning of the url is crucial between code in the map, WordPress settings, and your domain/host’s settings. Otherwise you’ll get a 'Access-Control-Allow-Origin' error and won’t be able to link from the map template to the wordpress site.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s