Jquery mobile with phonegap is not styling properly for mobile app - ios

I'd like to say that I solved the problem but I wanted post this here as a reference if anyone else is having the same problem.
I've been following this tutorial: http://wiki.phonegap.com/w/page/41524872/JQuery%20Mobile%20Tutorial%20(iOS)
to incorporate jquery mobile into my application. I am using the latest jquery library which is 1.7.2.
I can't get the outcome shown in the tutorial. Styling, behaviour, nothing works properly.

I've been smashing my head off of my desk for 6 hours trying to get this stuff to work and finally resolved it with the following combinations;
used;
cordova-1.6.0.js (with the associated script declarations in the header)
jquery.mobile-1.1.0.css
jquery-1.6.4.min.js
jquery.mobile-1.1.0.js
it was a very frustrating morning. thanks for pushing me into the right direction.

Turns out jquery mobile doesn't support the newest jquery library.
As soon as starting to use jquery 1.6.1, everything started to look and behave as shown in the tutorial. Why it is not compatible with an older version is beyond me. I probably should've followed the tutorial step by step but honestly, I thought newer versions of jquery are supposed to be better and backwards compatible.

Related

Rails BestInPlace Does it work with mobile?

Dearest stackians, I've launched my app and best_in_place works great on my computer however it doesn't seem to load at all on my phone(iphone 6). Is it not compatible with safari? I couldn't find anything about mobile compatibility in the docs anywhere and am about to switch to X-editable to give that a shot instead since it will need to be used on mobile. If anyone happens to know I'd appreciate it!
I know the question is old, but I just had the same problem and I assume others will have it in future, too. A quick fix for me was adding the following code in application.js
$(document).ready(function() {
$(".best_in_place").on("click",function(){});
});
Seems weird but works!

Old version of recaptcha get displayed instead of the newer version using the rails gem "Recaptcha"

Thanks to the gem https://github.com/ambethia/recaptcha/ (version 0.3.6), I managed to integrate Google Recaptcha into my rails app. The problem is that only the old version (V1) is displayed, similar to below.
However, I would prefer to the newer version with the checkbox like below, which is much easier for the users. Any idea how to get there?
There is some discussion about this, see: https://github.com/ambethia/recaptcha/issues/112
You are free to implement the new API by yourself it's not that hard actually, and if you have the knowledge submit a pull request to the original repository with a working solution :-)
The instructions on how to implement reCaptcha can be found here: http://www.google.com/recaptcha/intro/index.html

Bootstrap 3.1.1 with iOS Emulator

In my site I used Bootstrap 3.0.2. All is working pretty great both on desktop and in my iOS emulator, where I test it for iPhone users.
However, when I tried to changed to Bootstrap 3.1.1, I can't seem to click on anything in my Web App (not links, not buttons, etc.). The site with 3.1.1 works pretty good on my desktop (with safari).
Any thoughts on why this happens?
Update:
Did a little debugging, and the problem seems to be with this line I use:
$('.modal-backdrop').remove();
This is a hack I use to clear a modal that .modal('hide') didn't take care of for some reason. Can anyone think of why this makes the iOS stop responding to clicks?
Thanks
As it turns out, iOS has a problem with "modal fade", so I just changed it to "modal".
This is probably not effecting bootstrap before 3.0.3, but when I changed it, the remove probably made the touch disabled somehow.
Works now.

Seer working in everything but latest IE browsers

I'm maintaining an old rails 2.x app that is slated for retirement after this summer.
It uses the Seer gem to create a simple barchart and has always worked like a champ in every browser.
Now, however, it won't work in the most recent versions of IE. The code itself hasn't changed in two years. It works in every other browser.
It WILL work in IE in compatibility mode. The javascript is sent to the browser but the browser won't render it.
Seer is an old gem and this is an old app....I understand this is a bit of a hail mary.
Anyone else run into this problem? I would post the code but I believe this is one of those questions that will either be instantly recognizable to someone if they've seen it before.
Thanks!
EDIT: the gist of the js is here: https://gist.github.com/crowell256aa/9200487
That gem uses the old and deprecated "barchart" package for drawing charts. Since that package predates the arrival of IE9, I suspect that it is trying to create VML code in IE 9+, which is probably the cause of the code not working. The fix for this is to use the modern "corechart" package instead.

Upgrading bootstrap-sass from v2.3.2.0 to v3.0.2.1 breaks sample_app CSS

Working through Hartl's sample_app tutorial...not an issue with the tutorial, but with my own tinkering. Wondering if someone smarter than me can help us all out... I know that often times updating gems can bork your app(s), so I was prepared for this (hooray for committing often!), but when I saw that the bootstrap-sass gem I was using was out-of-date, I had to update.
Before the update, I was using v2.3.2.0 - no ill side effects.
After the update, the gem version was 3.0.2.1 and certain sass variables had changed, which was an easy fix (namely cameCase to non-camel-case). This was easily identified and fixed by running the rspec tests written to this point in the tutorial.
What's throwing me through the loop is now the right top menu links (home, help, sign in) look stacked like a "normal" un-styled un-ordered list. Correspondingly, this is causing the top bar to triple in size, and thus cover some of the text seen in the main content area.
I'm not a talented enough front-end guy to know exactly what is going on, but have tried to describe it as best as I can here. I can point you to the git commit compare here, but even this is a lot to take in.
In the meantime, I've reverted to v2.3.2.0 and all is back to how it was. Lesson learned, sniff out changes and test-test-test before blindly updating gems.
Thanks in advance for any and all help!
P.S. I also have posted this in the /r/Learn_Rails subreddit here.
For a list of what is different between BS 2.x and 3.x see this link: http://getbootstrap.com/getting-started/#migration
If you want to use the latest BS version, you'll have to update the HTML to reflect the new class names etc.
This is happening because of the new functionality introduced in the newer version of Bootstrap(3.0) and tutorial is based on the bootstrap verison(2.3..).
So, If you are interested then see the changes made in the newer versions Click Here

Resources