With AppPresser, jQuery needs to be the version that WordPress ships. Do not remove it! You’ve been warned.
I am one of those airplane travelers who likes to sit by the window and strain my neck as I spend every airborne minute staring across the skies to the ground below. While some people quake with dread at take-offs and landings, I squeal with excitement.
You can imaging my grief on a recent flight when not only did I not get a window seat but I spent most of that flight hunting down a particularly stubborn bug on an AppPresser app I was wrapping up for a client.
Why AppPresser?
AppPresser turns your WordPress site into a phone app. It is a suite of themes and premium plugins that connect with Adobe PhoneGap to make a working app for your favorite handheld device. It includes ecommerce, geolocation, push notifications and other native phone features.
AppPresser is now well into its 2.0 launch and it appears to have a maturing codebase and a growing community, despite its maddening decision to close the support forums and replace them with FAQ pages.
Some app purists will complain that, no, AppPresser is not app-y because it is just a wrapper around phone code. No, they say, you must write in Swift or Objective-C or C++, something that harnesses a device’s quirks and talents.
While they may have a point, I am happy with my early production release (link coming soon) because I believe that the traffic and usage we are projecting will fit into our client’s business needs.
So, about that bug
When I first configured my WordPress site, I decided to do the same as other developers – remove the version of jQuery that natively ships with WordPress and install a fresher version.
This is a good idea in many cases. You may want to reduce your page’s load time by grabbing jQuery from a Content Delivery Network (CDN) or else you may just want to use newer jQuery methods not available on the older version shipped with WordPress.
The blogger Paulund describes eloquently how and why to replace jQuery:
Using the Google CDN to load jQuery means that you don’t need to host this on your website, so when jQuery gets updated you will automatically get the updates and you won’t have to change anything on your website.
I’m stuck on login
With AppPresser however, removing native jQuery is a fantastically bad idea. Once I got my entire app working – full graphics, branding, storyboard, navigation – I found out that I couldn’t get past the login screen.
I tried every user and I created new ones. No luck. I read every file of the AppPresser theme and main plugin. I pulled cookies and manually created and erased cookies using Google Chrome’s inspector.
When I logged in, there was no change on the screen. Javascript stopped functioning on the page and I got an “object missing” error. I could open a new tab and it would pull up my logged-in site. A good clue, however by this time I was more than halfway through my flight, out of coffee, and grumpy.
Your friend you never knew, the Localized Script
In version 1.x of AppPresser, the page loads a JavaScript file “appp.js” which is the main core of the plugin. However, AppPresser 2.x does not load that file but rather attaches it as “localized script”.
In WordPress, localized scripts were first created for translations and localizing text to the country or language where the site is accessed. This is helpful when a site has JavaScript on the page that cannot access WordPress’s Localization API in PHP without expensive ajax calls that will make your head hurt.
Localized scripts have evolved; the WordPress Codex itself says that “it can be used to make any data available to your script”. In other words, you could send any dynamic data, variables, anything at all onto your page. The function wp_localize_script() essentially turns that data into a regular JavaScript object which is available for any script to use on the page.
AppPresser decided in their version 2.0 to take their core file appp.js and not enqueue it but rather add it as a localized script. This means that appp.js gets turned into one big giant JavaScript object. And in order for it to be loaded, that object needed to be attached to something. It got attached to … wait for it … jQuery.
What did I do? I deregistered jQuery – and wiped out the entire AppPresser core – in order to grab a newer version of jQuery from some far-off CDN.
Back in my functions.php file, I removed one single line – the culprit that took out native jQuery. After that, it worked like a charm and my plane landed on time.
October 4, 2016
Excellent post. I was searching for a reason as to why AppPresser functions were broken for weeks. Thanks!