Timmy Von Heiss Timmy Von Heiss - 11 days ago 5
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:

https://api.jquerymobile.com/swipeleft/

https://api.jquerymobile.com/swiperight/

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
show.html.erb
view.

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.

application.html.erb

<!DOCTYPE html>
<html>
<head>
<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' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container-fluid">
</div>
</body>
</html>

application.js

//= 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

application.css

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

Answer

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.