CODEWITHSUNDEEP
jqueryruby-on-railsjquery-mobile
Danny Rosenfeld
Danny Rosenfeld

Reputation: 25

Jquery mobile doesn't work in rails 4 app

I've taken an example of jquery mobile data roles that renders in the browser fine outside of my app, but when I put the code into my Rails app none of the buttons render and jquery mobile seems to not be working at all?

Am I doing this improperly or would I need to install the jquery_mobile_rails gem as opposed to simply linking the CDN's in the head? I already have the jquery rails gem installed and other jquery plugins run just fine in my app. Hmmm...

<!DOCTYPE html>
<html class="no js">
  <head>
    <title>Tumblful</title>

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <%= 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.0"> 
    <meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" />
<!-- <link rel="stylesheet" type="text/css" href="css/demo.css" />
  <link rel="stylesheet" type="text/css" href="css/style1.css" /> -->
    <script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.1.0/readmore.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.0/theme-classic/theme-classic.css" />
    </head>

<%= yield :body || "<body>" %>



 <div data-role="page" data-theme="a">
 <div data-role="header" data-theme="a">
  <h1>My Title</h1>
  </div>
  <!-- /header -->
  <div data-role="content" data-theme="a">
    <a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" onclick="FunctionToDoTask1();">BTN1</a>
    <a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" onclick="FunctionToDoTask2();">BTN2</a>
    <a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" href="#popUp1" data-rel="popup">BTN3</a>
    <a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" href="#popUp2" data-rel="popup" onclick="FunctionToDoTask3();">BTN4</a>

        <a href="#" data-role="button">A simple Button</a>
  </div>
  <!-- /content -->
</div>
<!-- /page -->



  </body>
</html>

Upvotes: 0

Views: 288

Answers (1)

polskais1
polskais1

Reputation: 186

Rails 4 has TurboLinks which essentially turns your application into single page app. As a result, your scripts won't get run on page changes. Try adding <body data-no-turbolink="true"> to your body tag in application.html.erb and see if that solves your problem!

Upvotes: 1

Related Questions