Timmy Von Heiss Timmy Von Heiss - 10 months ago 46
jQuery Question

How do I add jquery-mobile to a rails 4 app

My goal is moving between previous and next photos in mobile browser with a finger swipe:



Since I am only going to be using it in a few areas of the website, I decided to place:

<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

at the top of my

However, it completely destroys/crashed the way that my web app looks and functions. For example, buttons that I had hidden were displayed. Elements were over and undersized, etc.

In this topic it is suggested that Turbolinks must be removed. I am not sure if that is the source of these problems.


<!DOCTYPE html>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= render 'layouts/shim' %>
<%= render 'layouts/header' %>
<div class="container-fluid">


//= require jquery2
//= require jquery_ujs
//= require jquery-ui/autocomplete
//= require autocomplete-rails
//= require dropzone
//= require select2-full
//= require bootstrap
//= require turbolinks
//= require_tree .
//= require selectize


*= require jquery-ui/autocomplete
*= require dropzone/dropzone
*= require select2
*= require select2-bootstrap
*= require selectize
*= require selectize.default
*= require_tree .
*= require_self

Answer Source

According to the post you referenced, Turbolinks and jQuery are not meant to be used together. On top of that, if you're just using the jQuery Mobile swipe functions, you don't need any styling, so remove the CSS file for jQueryMobile and try that.