All is in the title
I've tried:
config.serve_static_assets = true
I updated the gem and then: rails generate gmaps4rails:install
The map is perfectly showing in local mode but doesnt appear un production!
the is totaly empty...
Here is the content of my head:
<head>
<link href="/images/favicon.ico" rel="SHORTCUT ICON">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/gmaps4rails.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/reset.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/default.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/buttons.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/colorbox.css?1314057878">
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script type="text/javascript" src="/javascripts/application.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery.1.4.4.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery-ui.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery.colorbox-min.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery-ujs-1.4.4.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/application.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/active_scaffold/default/active_scaffold.js?1314057900"></script>
<script type="text/javascript" src="/javascripts/active_scaffold/default/jquery.editinplace.js?1314057900"></script>
<script type="text/javascript" src="/javascripts/active_scaffold/default/date_picker_bridge.js?1314057900"></script>
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/active_scaffold/default/stylesheet.css?1314057900">
<!--[if IE]><link href="/stylesheets/active_scaffold/default/stylesheet-ie.css?1314057900" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
<meta content="authenticity_token" name="csrf-param">
<meta content="/MYbif2q6UmcrXyAS7WyYtOViwkr8pyXjXQTTNYtQsc=" name="csrf-token">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="http://maps.gstatic.com/cat_js/intl/fr_ALL/mapfiles/api-3/6/0a/%7Bmain,places%7D.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://maps.gstatic.com/cat_js/intl/fr_ALL/mapfiles/api-3/6/0a/%7Bcommon,util%7D.js"></script></head>
Any idea?
I had the same problem with the pre 1.x, although it was fixed by calling each file individually in the manifest file after manually loading them into the vendor asset dir.
However, the latest gem worked as it said in the readme. From an older version update it via bundler, remove any of it's js files copied into the assets dir (like I had previously), run the install script again, and in the manifest file (I'm using vendor/assets/javascript/external.js) use the namespaced require statement for the files you need.
//= require gmaps4rails/googlemaps.js
Related
I'm trying to use JQuery UI slider in on of my carousel's items.
I attached JQuery UI files (css and js) and it's not showing up.
$("#slider").slider();
<div id="slider"></div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
the link and script are at the bottom of my body tag. tried to move them to head and still not working.
The console shows:
jquery-3.3.1.slim.min.js:2 jQuery.Deferred exception: $(...).slider is not a function TypeError: $(...).slider is not a function
head tag:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.js"></script>-->
<script src="bootstrap/js/bootstrap.js"></script>
<script src="jScripts/JavaScript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<!--<link href="Style/reset.css" rel="stylesheet" type="text/css" />-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link href="bootstrap/css/bootstrap-reboot.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<link rel="shortcut icon" href="#">
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.css" />-->
<link href="styles/myStyle.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Assistant" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
You must define jquery-UI first.
When you calling $("#slider").slider();
'.slider()' function is not exist yet
Try to include jquery-UI library first.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="slider"></div>
$("#slider").slider();
I don't understand how are all the CSS and JS injected.
I find asset tags in main.gsp, but only for application.css and application.js
Nothing in the GSPs generated for the domain-classes.
But in the sources of the served pages I find them all:
<link rel="stylesheet" href="/assets/bootstrap.css?compile=false" />
<link rel="stylesheet" href="/assets/grails.css?compile=false" />
<link rel="stylesheet" href="/assets/main.css?compile=false" />
<link rel="stylesheet" href="/assets/mobile.css?compile=false" />
<link rel="stylesheet" href="/assets/application.css?compile=false" />
and
<script type="text/javascript" src="/assets/jquery-2.2.0.min.js?compile=false" ></script>
<script type="text/javascript" src="/assets/bootstrap.js?compile=false" ></script>
<script type="text/javascript" src="/assets/application.js?compile=false" ></script>
I red, that I can control them globally with includes and excludes.
Can I control them in main.gsp?
And where I'd decide them on a per page basis?
Thanks, Rawi
Using this plugin (http://plugins.krajee.com/file-input) for some basic file upload but it's causing me a headache design wise. Don't know what's wrong. Seem to have all required js and css files.
<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/themes/base/accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/all.css" rel="stylesheet"/>
<link href="/Content/themes/base/autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/base.css" rel="stylesheet"/>
<link href="/Content/themes/base/button.css" rel="stylesheet"/>
<link href="/Content/themes/base/core.css" rel="stylesheet"/>
<link href="/Content/themes/base/datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/draggable.css" rel="stylesheet"/>
<link href="/Content/themes/base/menu.css" rel="stylesheet"/>
<link href="/Content/themes/base/progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/selectmenu.css" rel="stylesheet"/>
<link href="/Content/themes/base/slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/sortable.css" rel="stylesheet"/>
<link href="/Content/themes/base/spinner.css" rel="stylesheet"/>
<link href="/Content/themes/base/tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/theme.css" rel="stylesheet"/>
<link href="/Content/themes/base/tooltip.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/cldr.js"></script>
<script src="/Scripts/cldr/event.js"></script>
<script src="/Scripts/cldr/supplemental.js"></script>
<script src="/Scripts/cldr/unresolved.js"></script>
<script src="/Scripts/globalize.js"></script>
<script src="/Scripts/globalize/message.js"></script>
<script src="/Scripts/globalize/number.js"></script>
<script src="/Scripts/globalize/plural.js"></script>
<script src="/Scripts/globalize/date.js"></script>
<script src="/Scripts/globalize/currency.js"></script>
<script src="/Scripts/globalize/relative-time.js"></script>
<script src="/Scripts/globalize/unit.js"></script>
<script src="/Scripts/bootbox.js"></script>
<script src="/Content/bootstrap-fileinput/css/fileinput.min.css"></script>
<script src="/Content/bootstrap-fileinput/themes/gly/theme.js"></script>
<script src="/Scripts/plugins/canvas-to-blob.min.js"></script>
<script src="/Scripts/plugins/purify.min.js"></script>
<script src="/Scripts/fileinput.min.js"></script>
<script src="/Scripts/plugins/sortable.min.js"></script>
After deploying my rails app to heroku, there are no dropdown menus!
When running locally, my source looks like this :
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.core.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.accordion.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.menu.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.autocomplete.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.button.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.resizable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.dialog.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.progressbar.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.selectable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.slider.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.spinner.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tabs.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tooltip.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.base.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.all.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/admins.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/associates.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/dasharea.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/database.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/members.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/sessions.css?body=1" media="screen" rel="stylesheet" />
<script src="/assets/vendor/custom.modernizr.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="anbyACcBlOI2Zpa9E2TImosNiBYN5KFTC8heYI1TE+I=" name="csrf-token" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery.ui.core.js?body=1"></script>
<script src="/assets/jquery.ui.widget.js?body=1"></script>
<script src="/assets/jquery.ui.accordion.js?body=1"></script>
<script src="/assets/jquery.ui.position.js?body=1"></script>
<script src="/assets/jquery.ui.menu.js?body=1"></script>
<script src="/assets/jquery.ui.autocomplete.js?body=1"></script>
<script src="/assets/jquery.ui.button.js?body=1"></script>
<script src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script src="/assets/jquery.ui.mouse.js?body=1"></script>
<script src="/assets/jquery.ui.draggable.js?body=1"></script>
<script src="/assets/jquery.ui.resizable.js?body=1"></script>
<script src="/assets/jquery.ui.dialog.js?body=1"></script>
<script src="/assets/jquery.ui.droppable.js?body=1"></script>
<script src="/assets/jquery.ui.effect.js?body=1"></script>
<script src="/assets/jquery.ui.effect-blind.js?body=1"></script>
<script src="/assets/jquery.ui.effect-bounce.js?body=1"></script>
<script src="/assets/jquery.ui.effect-clip.js?body=1"></script>
<script src="/assets/jquery.ui.effect-drop.js?body=1"></script>
<script src="/assets/jquery.ui.effect-explode.js?body=1"></script>
<script src="/assets/jquery.ui.effect-fade.js?body=1"></script>
<script src="/assets/jquery.ui.effect-fold.js?body=1"></script>
<script src="/assets/jquery.ui.effect-highlight.js?body=1"></script>
<script src="/assets/jquery.ui.effect-pulsate.js?body=1"></script>
<script src="/assets/jquery.ui.effect-scale.js?body=1"></script>
<script src="/assets/jquery.ui.effect-shake.js?body=1"></script>
<script src="/assets/jquery.ui.effect-slide.js?body=1"></script>
<script src="/assets/jquery.ui.effect-transfer.js?body=1"></script>
<script src="/assets/jquery.ui.progressbar.js?body=1"></script>
<script src="/assets/jquery.ui.selectable.js?body=1"></script>
<script src="/assets/jquery.ui.slider.js?body=1"></script>
<script src="/assets/jquery.ui.sortable.js?body=1"></script>
<script src="/assets/jquery.ui.spinner.js?body=1"></script>
<script src="/assets/jquery.ui.tabs.js?body=1"></script>
<script src="/assets/jquery.ui.tooltip.js?body=1"></script>
<script src="/assets/jquery.ui.all.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
In Heroku, it look like this :
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jquery.ui.all.js"></script>
<script src="/javascripts/jquery_ujs.js"></script>
But the links in Heroku return not found!
For a special reason, I included the jquery in my head manually like this :
<%= javascript_include_tag 'jquery' %>
<%= javascript_include_tag 'jquery.ui.all' %>
<%= javascript_include_tag 'jquery_ujs' %>
Is this the reason things are failing? How to fix it without removing these from the head?
In (most) production setups, only the files in public/assets are available for use directly in link or script tags.
When you push to Heroku, it precompiles app/assets/javascripts/application.js by merging and compressing all javascript files required in application.js into a single file at public/assets/application-xxxxxx.js. Individual files, such as jquery.js, are not available. Therefore, it's recommended to use
<!-- HTML -->
javascript_include_tag 'application'
// inside app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
However, if you insist on including jquery manually without requiring it in application.js, you can add it to config.assets.precompile.
# config/environments/production.rb
config.assets.precompile += ['jquery.js', 'jquery_ujs.js']
(Note: A friend told me that Heroku doesn't read production.rb during precompilation. If that's the case, try adding the above to config/application.rb instead.)
When you push to Heroku and precompile your assets, you should see
$ rake assets:precompile
I, [] INFO -- : Writing public/assets/jquery-36fecc5eda81b43bdf4f92ce2d874df2.js
I, [] INFO -- : Writing public/assets/jquery_ujs-02181b3e64cd9e4e8548cad033516231.js
On Heroku, the script tags should now look like
<script src="/assets/jquery-36fecc5eda81b43bdf4f92ce2d874df2.js"></script>
can you guys tell me why my slider is not working
i have included all the resources in the js fiddle then also its not working
providing fiddle link below
http://jsfiddle.net/YakV7/2/
actual demo
http://tympanus.net/Development/ParallaxContentSlider/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider();
});
</script>
What do you mean by these lines?
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
Change it to the actual path.
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/demo.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/style.css">
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/jquery.cslider.js"></script>
Or add:
<base href="http://tympanus.net/Development/ParallaxContentSlider/" />
Same working fiddle: http://jsfiddle.net/YakV7/7/