I'm running a rails 4 app and have installed v1.6 of the jquery geocomplete plugin to provide a google places autocomplete function.
I followed the instructions on the geocomplete github page (http://ubilabs.github.io/geocomplete/)
The plugin works perfectly when running on my localhost, but when I upload my app to heroku, the autocomplete simple doesn't work - the google map does not show and typing in the autocomplete text field doesn't trigger any response. In addition, no other javascript works on the page.
These are the scripts I'm running in my view file:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
$("#geocomplete").geocomplete({
map: ".map_canvas",
details: "form",
types: ["geocode", "establishment"],
});
$("#find").click(function(){
$("#geocomplete").trigger("geocode");
});
});
</script>
These are the files I'm requiring in my application.js file
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require jquery.turbolinks
//= require jquery.geocomplete
//= require jquery.geocomplete.min
//= require underscore
//= require gmaps/google
//= require_tree .
This is the html from the top of the page in heroku:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link data-turbolinks-track="true" href="/assets/application-2b5264bcc7a1f63268dbbba57c51fade.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application-1a5a53ee82e1bcf8741700c933ffab84.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/javascripts/html5shiv.js"></script>
<script src="/javascripts/respond.min.js"></script>
<![endif]-->
</head>
<body data-no-turbolink="true">
And html from lower down in the document where the google map/autocomplete resides:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css" media="screen">
.map_canvas {
width: 600px;
height: 400px;
margin: 10px 20px 10px 0;
}
form { width: 1000px; float: left; }
</style>
<br />
<input id="geocomplete" type="text" placeholder="Type business name/address" size="70" />
<input id="find" type="button" value="Find" />
<div class="map_canvas"></div>
<div class="details">
<div><%= f.label :name %><br />
<%= f.text_field :name, { :geo => "name", class: "form-control"} %></div>
** other fields not shown here **
</div>
Really stuck in this one. Has any one had a similar problem?
Finally figured out what was wrong with this one.
There was nothing wrong with the code. I need to precompile assets before uploading to Heroku.
i.e. at the command line:
$ bundle exec rake assets:precompile RAILS_ENV=production
This solved the issue.
I'd recommend doing this whenever you've having javascript issues in Heroku.
Related
I'm integrating summernote-bs5 in my software. I include it from cdn:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.css" integrity="sha512-ngQ4IGzHQ3s/Hh8kMyG4FC74wzitukRMIcTOoKT3EyzFZCILOPF0twiXOQn75eDINUfKBYmzYn2AA8DkAk8veQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.js" integrity="sha512-6F1RVfnxCprKJmfulcxxym1Dar5FsT/V2jiEUvABiaEiFWoQ8yHvqRM/Slf0qJKiwin6IDQucjXuolCfCKnaJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I initialize summernote area using default. Html:
<div class="mt-2">
<label class="control-label" for="textarea">Descrizione breve:</label>
<textarea class="summernote" name="content_abstract"><?=$content->content_abstract?>.
</textarea>
</div>
js:
$('.summernote').summernote();
It doesn't work. I tried also with jsfiddle with bootstrap last version and it seems not work. jsfiddle
I just did this as a basic test and it worked for me. Are you adding everything in the correct order and are you waiting for the document to be loaded to initialise your summernote div?
$(document).ready(function() {
$('.summernote').summernote();
});
<!DOCTYPE html>
<html lang="en">
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
<div class="mt-2">
<label class="control-label" for="textarea">Descrizione breve:</label>
<textarea class="summernote" name="content_abstract"><?=$content->content_abstract?>.</textarea>
</div>
</html>
I need, from a view-blade, to search a database in order to fetch data and display them in another view-blade when a link is clicked.
I made the following:
In the view-blade who will acting on database:
#foreach($pending as $p)
<tr>
<td>
Click here
</td>
</tr>
#endforeach
the connected 'route' is
Route::get("/getMyForm/{ident}", ['as' => "openMyPage", 'uses' => "BusinessController#seeMyForm"]);
the method on BusinessController has
public function seeMyForm($ident){
$myResult=DB::select(...);
return view('MyViewBlade')->with('myResult', $myResult);
}
the master template (PrincipalView.blade.php) (as was included in the view-blade to display
<!DOCTYPE html>
<html>
<head>
<meta name="csrf_token" content="{{ csrf_token() }}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-datepicker.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="assets/js/jquery-ui/jquery-ui.css"> -->
<script src="assets/js/jquery.js"></script>
<!-- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> -->
<script src="assets/js/bootstrap-datepicker.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="assets/js/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<link rel="stylesheet" href="assets/js/jquery-ui-1.11.4.custom/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="assets/js/jquery-pessoal.js"></script>
<script src="assets/js/jquery-pessoal2.js"></script>
<link rel="stylesheet" href="assets/plugins/multiple-select-master/multiple-select.css"></script>
<script src="assets/plugins/multiple-select-master/multiple-select.js"></script>
<link href="assets/css/custom.css" rel="stylesheet">
</head>
...
<div class="container">
#yield("corpo")
</div>
...
the view-blade which will display (ToAproveView.blade.php)
#extends('PrincipalView')
#section('corpo')
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Cliente Principal: </label><br>
<input type="text" id="idTxtFaturamentoAprovacaoCliente"
name="namTxtFaturamentoAprovacaoCliente"
readonly value="{{$myResult[0]->clienteprincipal}}"/>
</div>
</div>
is not working. The last view-blade do not render its elements. The view opens itself not well formatted.
Other actions make all other views-blade ok.
I found out, the problem is connected with the line code
Click here
because it was created on the fly (I guess).
Looking at the console of Chrome, is there
GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/css/bootstrap-theme.min.css
29638_1472048778961_121:16 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/css/bootstrap-datepicker.min.css
29638_1472048778961_121:18 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/jquery.js
29638_1472048778961_121:13 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/css/bootstrap.min.css
29638_1472048778961_121:22 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/bootstrap-datepicker.js
29638_1472048778961_121:28 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/jquery-ui-1.11.4.custom/jquery-ui.js
net::ERR_CONNECTION_RESET
29638_1472048778961_121:29 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/jquery-ui-1.11.4.custom/jquery-ui.css
net::ERR_CONNECTION_RESET
29638_1472048778961_121:23 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/bootstrap.min.js
net::ERR_CONNECTION_RESET
The including css and js files do not work (the names in the path are different of that I was wrote abore because I made a translation to better comprehension)
I found out where the error is.
I changed the path to .js and css files in default template and the view rendered correctly:
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
Although there is not the correct answer, since this template serves several views-blade that work perfectly, for now it is ok to me.
I'm trying to put this autocomplete.js widget into my rails project: http://andymatthews.net/code/autocomplete/
It works fine when I use it as a standalone project without using rails- putting array.html, code.js and jqm.autoComplete-1.5.2.js in the same folder, and running array.html in my browser. I get the drop down, autocomplete menu in the widget. All works well.
But when I put it in a new rails project - a project made for the purpose of trying to get this widget to work, so there's definitely no code conflicts, it's styled correctly, but my drop down menu does not appear. Any ideas what I'm doing wrong?
In my application.html.erb file I have code from the header of array.html, plus the standard rails header material - stylesheet_link_tag, javascript_include_tag and csrf:
<head>
<title>AutocompleteTest</title>
<meta content="initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
In my assets/javascripts folder I've pasted code.js and jqm.autoComplete-1.5.2.js and in my application.js file I have:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require code
//= require jqm.autoComplete-1.5.2
My view code for the autocomplete js is:
<div data-role="content" class="ui-content" role="main">
<p>
In this example autoComplete uses a local array comprised of strings. This also shows an example of the matchFromStart property set to false.
</p>
<p>
<input type="text" id="searchField" placeholder="Categories" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset ui-focus">
</p><ul id="suggestions" data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"></ul>
<p></p>
</div>
In application.html.erb I yield to auto_complete.html.erb, which contains:
<div data-role="content">
<p>
In this example autoComplete uses a local array comprised of strings. This also shows an example of the matchFromStart property set to false.
</p>
<p>
<input type="text" id="searchField" placeholder="Categories">
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</p>
</div>
</div>
<script>
$("#mainPage").bind("pageshow", function(e) {
var data = ['C', 'Clojure', 'Jenny!', 'Java', 'Scala', 'Objective-C', 'C++', 'PHP', 'C#', '(Visual) Basic', 'Python', 'Perl', 'JavaScript', 'Ruby', 'Visual Basic .NET', 'Transact-SQL', 'Lisp', 'Pascal', 'Bash', 'PL/SQL', 'Delphi/Object Pascal', 'Ada', 'MATLAB'];
$("#searchField").autocomplete({
target: $('#suggestions'),
source: data,
link: 'target.html?term=',
minLength: 1,
matchFromStart: false
});
});
</script>
Any idea why it's not working or any ideas?
I am making a web app using rails 4 and I have choosen bootswatch.
I ran into trouble with dropdown from bootswatch (bootstrap 3).
It doesn't want to show up when I click.
Here is HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'>
<title>IKStudio</title>
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/exhibits.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/static.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/jquery.turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/exhibits.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.roundabout.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/static.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="DZN3XrjOOv0yfuqzEZ9b8M5r7gWkkQmY1Z+VtW5Z5VY=" name="csrf-token" />
</head>
<body>
<div class='navbar navbar-default navbar-fixed-top'>
<div class='container'>
<div class='navbar-header'>
<a class="navbar-brand" href="/">TEST</a>
</div>
<div class='navbar-collapse collapse' id='navbar-main'>
<ul class='nav navbar-nav navbar-right'>
<li>TEST</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
KOLEKCIJE
<b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>muski</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class='container' id='main'>
<div class='row'>
<div class='col-md-2'></div>
<div class='col-md-8'>
</div>
<div class='col-md-2'></div>
</div>
</div>
</body>
</html>
Can you please help..
You are loading your assets twice. You should only have application.js and application.css in your header and the tree directive in each will load all the other files in the assets path automatically. Here I am using bootstrap and jQuery from gems.
application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery.ui.all
//= require bootstrap
//= require_tree .
//= require turbolinks
application.css
*
*= require_self
*= require jquery.ui.all
*= require_tree .
*/
I have found the solution.
Since I copied bootswatch css code to bootstrap_and_overrides.css.scss i didn't removed require bootstrap, so I wouldn't have 2 bootstraps, but it seems that bootswatch code only revrites some things, and I need the main bootstrap included.
Sorry to bother you with this silly thing.
I am attempting integrate jQuery Mobile into an existing mobile page. I want to use the collapsible element, and form features.
When I include the js file, and load the page, the page is rendered blank. When it is not included it is rendered correctly. I have added data-role="page" and "content" as below:
Looking in Firebug I see the body element has the 'ui-mobile-viewport' class on it and it's visibility is set to hidden; its child elements have display = none.
I am getting this error in the console when debugging (line 5014) of jquery-mobile-1.0.1.js:
$el.prop is not a function
if ( $el.prop("disabled") ) {
Code below:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><%=PageTitle%></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<link rel="stylesheet" type="text/css" href="<%=CssPath%>/jquery.mobile-1.0.1.css" media="screen" />
<script type="text/javascript" src="<%=JsPathShared%>/jquery.js"></script>
<script type="text/javascript" src="<%=JsPath%>/page.js"></script>
<script type="text/javascript" src="<%=JsPath%>/jquery.mobile-1.0.1.js"></script>
</head>
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<div data-role="page" id="page-wrap" >
<header>
<%RenderBanner();%>
</header>
<div data-role="content" class="section-wrap">
<%Render();%>
<footer>
<nav>
<%RenderNavigation();%>
</nav>
<%RenderFooter();%>
</footer>
</div>
</div>
<%=GoogleAnalytics()%>
</body>
</html>
Consider checking out the jQuery Mobile Boilerplate project from Github. It contains a complete jQuery Mobile project along with code snippets you can use to compare your code to a working project.
https://github.com/commadelimited/jQuery-Mobile-Boilerplate