I have an issue with heroku. My map not appear in production but works in development.
My map in JS:
var ready;
ready = function() {
L.mapbox.accessToken = 'pk.eyJ1IjoiYmxhY2t5IiwiYSI6IjA4NWJjZDNiNDQ0MTg3YjVmZTNkM2NkMWQ3MmM4ZjU4In0.SDQh56AZPCbIL2rVs4eAkQ';
$('.map').each(function() {
var map = L.mapbox.map($(this).attr('id'), 'mapbox.streets').setView([48.855, 2.4], 8);
var geocoder = L.mapbox.geocoder('mapbox.places');
var adress = document.getElementById($(this).attr('id'));
geocoder.query(adress.getAttribute("data-adress-map"), showMap);
function showMap(err, data) {
// The geocoder can return an area, like a city, or a
// point, like an address. Here we handle both cases,
// by fitting the map bounds to an area or zooming to a point.
if (data.lbounds) {
map.fitBounds(data.lbounds);
} else if (data.latlng) {
map.setView([data.latlng[0], data.latlng[1]], 13);
}
var marker = L.marker([data.latlng[0], data.latlng[1]]).addTo(map);
marker.bindPopup(adress.getAttribute("data-title-map") +"<br>"+ adress.getAttribute("data-adress-map"));
}
})
};
$(document).ready(ready);
$(document).on('page:load', ready);
My view index.erb :
<div id="map-<%= page.position %>" class="map" data-title-map="<%= page.title_map %>" data-adress-map="<%= page.adress_map %>"></div>
app/views/layouts/application.html.erb :
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<%= stylesheet_link_tag 'https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/ga' %>
An idea ?
Thanks.
Well, I found.
I added this line in config/environments/production.rb :
config.serve_static_assets = true
Then :
RAILS_ENV=production bundle exec rake assets:precompile
And :
heroku run rake assets:precompile
Thanks.
Turn config.assets.compress to true in config/environments/production.rb,
config.assets.compress = true
Related
I having an issue with the Redux store in getting react_on_rails where I want to switch the page and it doesn't work correctly for me. I am losing the redux store if I change the page or reload it.
Also, I am sorry for a pile of code I put, but I really don't know anything else or ways to fix it, the official docs for react_on_rails and redux did not help me and it more likely confuse me how it should work. if anyone has a clue how to make it work, in advance, thank you
rootStore.js
import { combineReducers, applyMiddleware, createStore } from 'redux';
import middleware from 'redux-thunk';
import reducers from '../reducers';
export default (props, railsContext) => {
// eslint-disable-next-line no-param-reassign
delete props.prerender;
const combinedReducer = combineReducers(reducers);
const newProps = { ...props, railsContext };
return applyMiddleware(middleware)(createStore)(combinedReducer, newProps);
};
reducers/index.js
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import cartReducer from './cartReducer';
const rootReducer = combineReducers({
routing: routerReducer,
cart: cartReducer,
});
export default rootReducer;
the component that I am trying to do magic with
// #flow
import * as React from 'react';
import { connect } from 'react-redux';
import { addToCart} from '../actions/setCart';
import styles from './AddToCart.module.scss';
type Props = {
productId: number,
}
type State = {}
class AddToCart extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
}
onClick = () => {
console.log(this.props.productId);
this.props.addToCart(this.props.productId);
};
render() {
console.log('this.props.cart', this.props.cart);
return <button
onClick={this.onClick}
className={styles.button}
>Add To Cart</button>;
}
}
const AddToCartRedux = connect(
state => ({
cart: state.cart,
}),
dispatch => ({
addToCart: id => {
dispatch(addToCart(id));
},
}),
)(AddToCart);
export default AddToCartRedux;
my entry point
import ReactOnRails from 'react-on-rails';
import ProductDetailPage from '../pages/ProductDetailPage';
import rootStore from '../store/rootStore';
ReactOnRails.setOptions({
traceTurbolinks: true,
});
ReactOnRails.register({ProductDetailPage});
ReactOnRails.registerStore({rootStore});
my layout application
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= notice %>
<%= alert %>
<%= redux_store('rootStore', props: {}) %>
<%= react_component('ProductDetailPage', props: {product: #product.id}) %>
<%= yield %>
<%= redux_store_hydration_data %>
</body>
</html>
Since the Redux store is initialized when you load a page, navigating to a new page or reloading the page will cause all your JS assets to reload and re-initialize, causing your store to reset.
If you want to change the browser's location without a page reload, you would need to use something like react-router to handle navigation between React components instead of going through a full request/response cycle with the Rails server.
In app/controllers/fw_exports_controller.rb, I have:
def import_spreadsheet
#followeds = Followed.all.order(:screen_name)
#import_spreadsheet = FwExport.new
render partial: 'fw_exports/import_spreadsheet'
end
In app/views/layouts/application.html.slim, I have:
doctype html
html
head
meta content=("text/html; charset=UTF-8") http-equiv="Content-Type" /
meta content="width=device-width, initial-scale=1.0" name="viewport" /
title= content_for?(:title) ? yield(:title) : t('project_name')
meta content=("#{content_for?(:description) ? yield(:description) : t('project_name')}") name="description" /
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
body
header
= render 'layouts/navigation'
main role="main"
= render 'layouts/messages'
= yield
= render "layouts/footer"
In app/views/layouts/_navigation.html.slim, I have:
nav.navbar.navbar-default role="navigation"
.container
.navbar-header
a.navbar-brand href="#"
= t('parnassus_tools_home')
.navbar-left
ul.nav.navbar-nav
li
a
= link_to t('menus.upload_file'), import_spreadsheet_path
In app/views/fw_exports/_import_spreadsheet.html.slim, I have:
.container
h1
= t('fw_exports.choose_file_to_upload')
= form_tag process_imported_spreadsheet_path, html: { multipart: true }
.form-group
= file_field_tag :import_file
- if !#followeds[0].nil?
.form-group
= select_tag "followed_id", options_from_collection_for_select(#followeds, "id", "screen_name", "1")
.form_group
.sr-only
= label_tag t('fw_exports.screen_name_to_add')
= text_field_tag :screen_name_addition, placeholder: t('fw_exports.screen_name_to_add')
= button_tag(type: 'submit', class: "btn btn-primary") do
i.icon-ok.icon-white
= t('fw_exports.import')
In app/views/landings/index.html.slim, I have (this is the home page):
h1 Home Page
p test text
Here's what I see when I am on the home page:
But when I click on the Upload File menu item, from the home page, here's what I see:
Why isn't the application layout applied to the form?
You will need to render as a template and not as a partial. First, create a view template:
app/views/fw_spreadsheet/import_spreadsheet.html.slim
= render 'fw_exports/import_spreadsheet_form'
Next, rename your partial by changing the name of app/views/fw_spreadsheet/_import_spreadsheet.html.slim to app/views/fw_spreadsheet/_import_spreadsheet_form.html.slim
Finally, modify your controller as follows:
app/controllers/fw_exports_controller.rb
def import_spreadsheet
#followeds = Followed.all.order(:screen_name)
#import_spreadsheet = FwExport.new
render 'fw_exports/import_spreadsheet'
end
I tried to import Material UI into my React On Rails Project.
Everything is okay, but just only Module RaisedButton can't use,
Every time I try to import RaisedButton, I will get the error message like the picture.
My code is below:
import ReactOnRails from 'react-on-rails';
import PropTypes from 'prop-types';
import React from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';
const App = () => (
<MuiThemeProvider>
<RaisedButton label="hi"/>
</MuiThemeProvider>
)
ReactOnRails.register({
App,
});
UPDATE
hello_world/index.html.erb:
<h1>Hello World</h1>
<%= react_component("App", props: #hello_world_props, prerender: false) %>
layouts/hello_world.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>ReactOnRailsWithWebpacker</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'webpack-bundle' %>
</head>
<body>
<%= yield %>
</body>
</html>
How can I fix it ? Or It's just the bug in React On Rails Gem?
I think I find the problem,
I see the node_module/material-ui/RaisedButton/RaisedButton.js file
return _react2.default.createElement(
_Paper2.default,
{
className: className,
style: (0, _simpleAssign2.default)(styles.root, style),
zDepth: this.state.zDepth
},
_react2.default.createElement(
_EnhancedButton2.default,
(0, _extends3.default)({}, other, buttonEventHandlers, {
ref: 'container',
disabled: disabled,
style: (0, _simpleAssign2.default)(styles.button, buttonStyle),
focusRippleColor: mergedRippleStyles.color,
touchRippleColor: mergedRippleStyles.color,
focusRippleOpacity: mergedRippleStyles.opacity,
touchRippleOpacity: mergedRippleStyles.opacity
}),
_react2.default.createElement(
'div',
{
ref: 'overlay',
style: prepareStyles((0, _simpleAssign2.default)(styles.overlay, overlayStyle))
},
enhancedButtonChildren
)
)
);
In this code, there is the Obj key ref, I delete the ref, and the error would not appears.
I am trying to render the google map api on my web page but I keep getting this error:
edit:1076 Uncaught ReferenceError: $ is not defined
Here is the process. The call that leads to the rendering of the api map begins in an edit.html.haml file.
edit.html.haml
........html.....
........html.....
........html.....
.col-md-5.col-md-push-1
.form-group
%label.control-label!= t('.city_and_country')
.controls
%p.enabled
%input.form-control#location_scratch{ type: :text, autocomplete: :off, value: #account.location }
%a{ href: 'javascript:EditMap.clearLocation();' }= t('clear')
%p.error#not_found{ style: 'display:none' }
= t('.location_error_message')
#map
#-----THIS IS WHERE IT STARTS-------------
!= map_init('map,' #account.latitude ? 7 : 0)
#-------------------------------------------
= f.hidden_field :location
= f.hidden_field :country_code
= f.hidden_field :latitude
= f.hidden_field :longitude
From map_init in the edit.html.haml file we then travel to the map_helper.rb file
map_helper.rb
module MapHelper
def map_init(id, zoom = 2)
map_script_load + map_js_initialization(id, zoom)
end
private
def map_script_load
key = Rails.application.config.google_maps_api_key
uri = "#{request.ssl? ? 'https' : 'http'}://maps.googleapis.com/maps/api/js?v=3&key=#{key}"
"<script async defer src='#{uri}' type='text/javascript'></script>"
end
def map_js_initialization(id, zoom)
javascript_tag <<-JSCRIPT
$(document).on('page:change', function() {
Map.load('#{id}', 25, 12, 2);
Map.moveTo(25, 12, #{zoom});
});
JSCRIPT
end
and then from there it goes to a Map.js file that calls the load and moveTo methods.
The problem though is in the map_js_initialization method. The JSCRIPT javascript code fails for $(document).on('page:change') Why is it failing for the jQuery object? I saw that an error like this occurs because the google maps api loads before the jquery source code. However, I've also placed an async defer on the maps and still no change in result.
I have require jquery in my application.js file and then in my application.html.haml file I have
!!!5
%html
%head
- page_title = content_for?(:html_title) ? "#{yield(:html_title)}" : t('.openhub')
%title= page_title
%meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0' }
%meta{ name: 'description', content: page_context[:description] }
%meta{ name: 'keywords', content: page_context[:keywords] }
%meta{ name: 'digits-consumer-key', content: ENV['DIGITS_CONSUMER_KEY'] }
%meta{ name: 'google-site-verification', content: 'jKkWeVQ0tB1bffJYg7xXAtcIM-nrjjVxhP3ohb8UH2A' }
= yield :custom_head
= stylesheet_link_tag 'application', media: 'all'
= csrf_meta_tags
%body{ zoom: 1 }
= yield :session_projects_banner
.container#page
%header= render partial: 'layouts/partials/header'
= render partial: 'layouts/partials/page'
.clear
%footer= render partial: 'layouts/partials/footer'
= yield(:javascript) if content_for?(:javascript)
= javascript_include_tag 'application',
'https://www.google.com/recaptcha/api.js',
'https://cdn.digits.com/1/sdk.js',
'//cdn.optimizely.com/js/3568250046.js',
cache: 'cached_js_files',
async: true
- if Rails.env.production?
<script type="text/javascript">
(function() {
var hm = document.createElement('script'); hm.type ='text/javascript'; hm.async = true;
hm.src = ('++u-heatmap-it+log-js').replace(/[+]/g,'/').replace(/-/g,'.');
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(hm, s);
})();
</script>
So in conclusion. I should be able to render the maps because I have at the top of my <head> tag application.js which has jquery and then the call to the api comes afterwards. Am I missing something here?
I found a nifty property to solve the problem that I was having. While the problem that jquery was not loading in the correct order, the map still was not rendering for some reason. This little snippet of code solved my problem.
document.onreadystatechange = function () {
if (document.readyState == "complete") {
Map.load('#{id}', 25, 12, 2);
Map.moveTo(25, 12, #{zoom});
}
};
I have created a pdf using pdfkit.Pdf is created. But the image is not displaying on my pdf and the print_media_type is also not working. I am using rails 4.0.2 and ruby 2.0.0. can anyone please help me to solve this problem? I am attaching details here. Thank you.
gem file:
gem 'pdfkit','0.5.2'
gem 'wkhtmltopdf-binary','0.9.9.1'
gem 'wkhtmltopdf-heroku','1.0.0'
application.css :
#media print {
body {
text-align: justify;
font-size:566px;
background-color: red;
}
}
application.rb:
require "pdfkit"
config.middleware.use PDFKit::Middleware, :print_media_type => true
config/initializers/pdfkit.rb :
PDFKit.configure do |config|
config.wkhtmltopdf = 'C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe'
config.default_options = {
:page_size => 'A4',
:page_height => '2478',
:footer_right => "Page [page] of [toPage]",
:margin_top=>"0.5in",
:margin_right=>"1in",
:margin_bottom=>"0.5in",
:margin_left=>"1in",
:zoom => '1.5',
:disable_smart_shrinking=> false,
:print_media_type => true
}
config.root_url = "//localhost"
end
application.html.erb:
<%= stylesheet_link_tag "application", :media => "all", "data-turbolinks-track" => true %>`
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>`
<body>
<%= image_tag "rails.png", size: "725x150" %>
</body>
use
<img src="<%=root_url%>/rails.png" height="725" width="150" >
or
<img src="<%=root_url%>/assets/rails.png" height="725" width="150" >