Phonegap+Ember+jQuery+Bootstrap accessing button through jQuery?

1
votes

I've built an Ember.JS app using the latest Bootstrap.css/js for styling. In one of my templates, I have a button that triggers an action that disables the button and sets it's text to "loading" via the Bootstrap function described here. I access the button using jQuery from within my action as follows:

$('.find').button('loading'); //Starts "Please Wait" message

This worked great when running the ember app a server on my desktop. However, I'm presently trying to package the app into a Phonegapp app, initially in iOS. Whenever the action fires in the simulator, I get the following error:

enter image description here

I'm beginning to suspect this may be due to my action-firing button not being accessible through the class with jQuery like on desktop? But I'm not terribly sure as this is my first Phonegap app. Many thanks if someone can clear this up.

1
javascriptjquerytwitter-bootstrapcordovaember.js

1 Answers

1
votes

Got it! It was solved by an answer on this question.

I don't think that JQuery is being loaded into the page.

You have referenced it as:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

which says use whatever protocol the current page is being server from. On a mobile device you are being served from file:// so the actual request the browser makes to fetch the script is:

file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

You need to specify the scheme you want to use or else include it in the PG project itself.

With me, it wasn't my jQuery not being loaded, but rather my Bootstrap.js! When you follow the CDN instructions on the bootstrap website, the URLs are similarly formatted starting with "//" (known as a "protocol-relative URL" or also "network-path reference") instead of the explicit "http://". Making the changed fixed the issue!