I am building a webapp with rails and JQM. The map shows up fine on my laptop and on my phone. The problem is when I am trying to launch it as a fullscreen app from a saved icon on my smartphone:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
the map doesn't show up, just a white canvas.
It works when I disable ajax (data-ajax = false) but then the page is opened in my browser and leaves the webapp.
I followed the instructions in:
gmaps4rails on jQueryMobile don't work.
(I couldn't call gmaps4rails(#json, false, false) since gmaps4rails only accepts one parameter...)
Here is some of my code:
application.js:
//= require jquery
//= require jquery_ujs
//= require gmaps4rails/gmaps4rails.base
//= require gmaps4rails/gmaps4rails.googlemaps
//= require_tree .
$('#gmaps').live('pageshow',function(event){
Gmaps.loadMaps();
});
layout:
<%= javascript_include_tag "http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" %>
<%= javascript_include_tag "application" %>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.1/src/markerclusterer.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>
<%= stylesheet_link_tag "https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.css", :media => "all" %>
<%= stylesheet_link_tag "application", :media => "all" %>
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable=no>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
view:
<%= gmaps4rails(#markers_json) %>
<%= yield :scripts %>
Thanks for your help, this is driving me crazy!!
Related
New developper on RoR, I’m using Select2 to display some companies or departments.
Select2 was working fine for some weeks, and now, display is broken on every select2 input.
I used github history to detect why it’s failing now, but no indications of modifications which can explain that.
It's displaying a very small square or nothing. However, selecty2 is working when I click on the small square for exemple.
small square display,
Select2 working but display is broken
I used Github History pomber and inspect all files concerned. Nothing to explain why the display is broken now. Is the a way to detect the cause of the issue ?
I'm using Bootstrap 4 with rails 5.2.1
app/javascript/components/select2.js :
import $ from 'jquery';
import 'select2';
import 'select2/src/scss/core.scss';
import 'select2-bootstrap4-theme/dist/select2-bootstrap4.css';
$('.select2-form').select2({
theme: "bootstrap4"
});
// Requiring CSS! Path is relative to ./node_modules
app/javascript/packs/application.js
import '../components/select2';
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= stylesheet_pack_tag 'application', media: 'all' %>
<%= stylesheet_pack_tag 'application' %>
<!-- bootstrap animation carousel -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- bootstrap animation carousel -->
<!-- Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<!-- Select2 -->
</head>
<body>
<%= render 'shared/navbar' %>
<%= render 'shared/flashes' %>
<%= yield %>
<%= render 'shared/footer' %>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
<%#= javascript_pack_tag "map" %>
</body>
</html>
I expect the input should be display correctly.
If it used to work, and now it doesn't, you can git bisect to determine which commit introduced the regression. When that is done, you should be able to pinpoint the guilty piece of code, again by adding the changes in this commit one by one and see when the regression pops up. Then you might be able to understand the reason for the regression.
In my production environment, I noticed Turbolinks was not caching assets between pages. When I come on the first page of my application, my javascript bundle gets loaded, so as my CSS. When I then get to another page with a link, I can see in the chrome devtools, network tab, that they are reloaded (HTTP code 200).
application.html.erb
<html>
<head>
<title>My title</title>
<meta name="description" content="My description">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
</head>
<body class="<%= body_user_class %> <%= controller.controller_name %>">
// Stuff
</body>
</html>
application.js
//= require turbolinks
//= require jquery
//= require jquery.slick
//= require jquery-ui/sortable
//= require rails-ujs
//= require_tree ./components
The fingerprint of the assets remains the same between the first and the second page, so I don't think the issue comes from there.
I can understand why my bootstrap asset is reloaded, as it is referenced as a classical resource without using rails. But why are my application's js and css reloaded?
In your application JavaScript bundle, you have the following:
document.addEventListener("turbolinks:before-visit", function(e) {
e.preventDefault(),
window.location = e.data.url
})
This cancels the default Turbolinks behaviour. If you remove this event listener, it should work as expected.
I'm using Rails 5.1.4, I'm new on the platform and I have problems with turboblinks, I have a file containing jquery code that has to run once the page loads, but Whenever the page loads the file runs several times but when I disable the turboblinks there it works as I want it. So I would like to know if there is one less to fix it without turning off the turboblinks. Thank you in advance..
So there is my layout file.// app/views/layouts/application.html.erb
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Rails web app</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-
track' => true %>
<%= csrf_meta_tags %>
</head>
<body class="<%= controller_name %> <%= action_name %>">
<%= render 'layouts/header' %>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<div class="container">
<%= yield %>
</div>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true
%>
</body>
</html>
About my js file as you will see i try to load automatically a bootstrap modal with an animation when the page loaded, actually the problem happens when i clik to any link on this page which takes me to another page and i try to come back to the initial page where the js file is loaded, then the problem happens. i see the page refresh many times and the js file as well.
So there is my js file with jquery code. //app/assets/javascripts/file.js
$(document).ready(function(){
$('#myModal').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog animated rollOut');
});
$('#myModal').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeIn
animated');
});
$('#myModal').modal('toggle');
});
Turbolinks replaces the body so put this line in your head tag :
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
Like this :
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Rails web app</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= csrf_meta_tags %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
</head>
<body class="<%= controller_name %> <%= action_name %>">
<%= render 'layouts/header' %>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<div class="container">
<%= yield %>
</div>
</body>
</html>
or add data-turbolinks-eval=false to the script tag that includes turbolinks.
Also you need use the turbolinks:load event :
$(document).on('turbolinks:load', function() {
$('#myModal').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog animated rollOut');
});
$('#myModal').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeIn
animated');
});
$('#myModal').modal('toggle');
});
I came on this weird Rails issue: I added a root route to my route.rb file
root :to => 'pages#home'
however, when I enter:
http://localhost:3000
in the browser, the css styles for my home page do not show.
The odd thing is, that when I go to:
http://localhost:3000/home
the css does get rendered.
I'm using Rails 4.1.0
does anyone know what could be the problem?
ps:
my application.html.erb code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Mysite</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render "layouts/header" %>
<%= yield %>
<%= render "layouts/footer" %>
</body>
</html>
The header of my rendered page:
http://localhost:3000
looks like this:
<head>
<meta charset="utf-8">
<title>Anthony Candaele</title>
<link rel="stylesheet" href="css/style.css" />
</head>
However, when I go to:
http://localhost:3000/home
the header source of the rendered page looks like this:
<head>
<title>Mysite</title>
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="UAWpX6x35EzVFSFyNPsaPPdE/0kEWqBQStCs9qWtOGc=" name="csrf-token" />
</head>
I'm attempting to keep the application layout in my Rails 3 app for the stylesheets and javascript files I use most frequently (application.js, jquery, style, etc.). However there are plugins I'm using on certain pages and want to include those stylesheets/javascripts properly. For example, I'm looking to use slides only on my homepage. If my application layout is like the one below, what's the best way to include page-specific files?
<!doctype html>
<head>
<title>Title</title>
<link rel="stylesheet" href="http://localhost:3000/stylesheets/style.css" media="screen and (min-width:481px)">
<!--[if IE]>
<link rel="stylesheet" href="http://localhost:3000/stylesheets/style.css" media="all"><![endif]-->
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=no,width=device-width">
</head>
<body>
<%= render 'layouts/header' %>
<%= yield %>
<%= render 'layouts/footer' %>
</body>
</html>