I am trying to use jquery-addresspicker with rails 3.1 but I am not able to make it run.
Here is the link https://github.com/sgruhier/jquery-addresspicker and the documentation does not mention much.
Can anyone suggest how should I use it in my rails app?
did you include google maps
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
and jquery-ui ?
place the script code in the html, or in separate js file
<script>
$(function() {
var addresspicker = $( "#addresspicker" ).addresspicker();
var addresspickerMap = $( "#addresspicker_map" ).addresspicker({
regionBias: "fr",
elements: {
map: "#map",
lat: "#lat",
lng: "#lng",
locality: '#locality',
country: '#country'
}
});
var gmarker = addresspickerMap.addresspicker( "marker");
gmarker.setVisible(true);
addresspickerMap.addresspicker( "updatePosition");
});
</script>
<div>
<div class='input'>
<%= f.label :address %><br />
<%= f.text_field :address, :id => "addresspicker_map" %>
<%= f.label :locality %><br />
<%= f.text_field :locality, :id => "locality", :disabled => "true" %>
<%= f.label :country %><br />
<%= f.text_field :country, :id => "country", :disabled => "true" %>
...
</div>
<div id="map"></div>
<div id="legend">You can drag and drop the marker to the correct location</div>
</div>
this is a piece of tutorial I made. I haven't tried it, but this is a start for you.
you'll have to style it with css from here:
https://github.com/sgruhier/jquery-addresspicker/blob/master/demos/demo.css
include the js file in the app from here:
https://github.com/sgruhier/jquery-addresspicker/tree/master/src
and images:
https://github.com/sgruhier/jquery-addresspicker/tree/master/demos/images
This has been ported to rails here at this repo https://github.com/ddidier/address_picker-rails
Related
There is probably a simple solution for this, however, I couldn't find it.
I have a simple form where I have state select box & site text_field:
_form.html.erb
<div class="field">
<%= f.label :state, 'State' %><br>
<%= f.select :state, [['NSW'], ['VIC'], ['SA'], ['WA'], ['QLD']] %>
</div>
<div class="form-group">
<%= f.label :site, 'Site'%><br>
<%= f.text_field :site %>
</div>
I would really like to be able to select "VIC" (a state in Australia) and then due to the fact that "VIC" was selected, the :site text_field is automatically populated with another value such as a site name.
For example: "VIC" state is selected -> "Melbourne" site is populated in the text_field on the form (in :site)
I have played around a bit with some example javascript that I have found on the web which seems to update some text on the screen when a certain value is chosen in a select box, however, I cannot seem to form an "if" argument that states: if "VIC" selected, then populate text_field of :site with "Melbourne".
Thanks in advance.
code for javascript that changes to the value selected:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<div id="text_to_be_changed"><%= #day_of_week %></div>
<%= select_tag :days, options_for_select(["Monday", "Tuesday"]), :id => "select_days" %>
<script>
$(document).ready(function(){
$('#select_days').change(function() {
$('#text_to_be_changed').html($(this).val());
});
});
</script>
You can try this:
<script>
$(document).ready(function(){
$('#select_days').change(function() {
$('#text_to_be_changed').html($(this).val());
});
// adding pre-populate data
$("#configfile_state").change(function(){
var selected = $(this).val();
if(selected == "VIC") {
$("#configfile_site").val("Melbourne");
}
});
});
</script>
I hope this help you.
You will need the javascript to "know" the relationship between "VIC" and "Melbourne", or more generally between states and their capital cities. This can be stored in a variety of ways, eg as an array or map in your js code. eg
html:
<div class="field">
<%= f.label :state, 'State' %><br>
<%= f.select :state, [['NSW'], ['VIC'], ['SA'], ['WA'], ['QLD']], :id => "state-select" %>
</div>
<div class="form-group">
<%= f.label :site, 'Site'%><br>
<%= f.text_field :site, :id => "city-select" %>
</div>
js:
$(document).ready(function(){
var stateDefaultCities = {
"VIC": "Melbourne",
"NSW": "Sydney",
"WA": "Perth"
//etc
}
$('#state-select').change(function() {
$('#city-select').val(stateDefaultCities[$(this).val]);
});
});
EDIT: this solution is a bit fragile since the states are repeated in the markup and html: eg if you were to add an option to the select you'd need to add a corresponding line to the stateDefaultCities object. But it's just an example.
I'm stacked. I'm using select2 and acts_as_taggable to tag my order model. Here is a code
<div class="field">
<%= f.label :tag_list, "TAGS" %><br>
<%= f.select :tag_list, options_for_select([['Human', 'Hs'], ['Mouse', 'Mm'], ['Yeast', 'Sc']]),{},:multiple => true, :class =>"category" %>
</div>
And also script:
<script>
$(document).ready(function() {$(".category").select2(); });
</script>
All works fine without connecting script ( with select2) but if with, it looks like working good but it sends empty strings and after submitting you didn't get any tags here.
Can anyone help?
I have a form builded using simple_form_for helper in rails that won't submit, when I add these two fields:
<%=f.input :startDate, :as => :datetime_picker%>
<%=f.input :endDate, :as => :datetime_picker%>
And this javascript:
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker({
language: 'en'
});
$('#actioncustom_timezone').set_timezone({format: 'city'});
$("#actioncustom_timezone").select2({ width: "300px" });
});
</script>
When I have these two fields in my form an click submit, the view does not render with failures. When I remove these two fields the form submits perfectly and even shows error.
What is so special about the date field that they break my form when I add them?
EDIT: All the form code:
<h1>New Custom Action</h1>
<div class="row">
<div class="span6 offset3">
<%= simple_form_for(#actionCustom) do |f|%>
<%= render 'shared/error_messages' %>
<%=f.label :action_name%>
<%=f.text_field :action_name%></br>
<%=f.label :contentURL, "Content URL"%>
<%=f.text_field :contentURL%></br>
<%=f.label :callBackURL, "Callback URL"%>
<%=f.text_field :callBackURL%></br>
<%=f.label :customcallbackURL, "Callback URL with custom conent URL"%>
<%=f.text_field :customcallbackURL%></br>
<%=f.label :previewImageURL, "Preview image URL"%>
<%=f.text_field :previewImageURL%></br>
<%=f.date_ :startDate, :as => :datetime_picker%>
<%=f.input :endDate, :as => :datetime_picker%>
<%=f.label :timezone, "Timezone"%>
<%=f.time_zone_select :timezone%>
<%=f.label :message%>
<%=f.text_area :message%></br>
<%=f.label :maxSend, "Max number of all sendings"%>
<%=f.number_field :maxSend, options = {:min=>0,:value=>0}%></br>
<%=f.label :maxSendToday, "Max number of sendings per day"%>
<%=f.number_field :maxSendToday, options = {:min=>0,:value=>0}%></br>
<%=f.label :maxSendDevice, "Max number of sendings per device"%>
<%=f.number_field :maxSendDevice, options = {:min=>0,:value=>0}%></br>
<%=f.label :maxSendDeviceToday,"Max number of sendings per device per day"%>
<%=f.number_field :maxSendDeviceToday, options = {:min=>0,:value=>0}%></br>
<%=f.hidden_field :clientID, :value => current_client.id%>
<%= f.submit "Create Action", class: "btn btn-large btn-primary" %>
<%end%>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker({
language: 'en'
});
$('#actioncustom_timezone').set_timezone({format: 'city'});
$("#actioncustom_timezone").select2({ width: "300px" });
});
</script>
Are you using this gem https://github.com/zpaulovics/datetimepicker-rails ?
If you are on rails4 you can use the new date_field which is using new HTML5 pickers.
With this solution you don't need to use jQuery datetimepicker.
If you are not using rails4 you can just set the input type as date or datetime like
<input id="user_born_on" name="user[born_on]" type="datetime" />
and you will get a picker on HTML5 browsers.
I have created an example code for you here: http://jsfiddle.net/2NAL5/
More on this here: http://blog.remarkablelabs.com/2012/12/new-html5-form-input-helpers-rails-4-countdown-to-2013
So I solved my problem. I found out that in the HTML code the date time input was set as required. So when the field was empty I could not submit the form. But after modifying the date time line to this:
<%=f.input :startDate,:as => :datetime_picker,:required => false%>
It Works!!!!!
I'm a newbie full of hope and amazed with Ruby on Rails 4.
In my application, I need the user to input a range of dates. For this, I found the bootstrap-datepicker-rails gem very sexy. It basically works fine for indivdual dates, but I can't manage to get what I want talking about a date range :
The start date default is today
The end date default is today + 1 year, and has to be greater than the start date.
The date format is dd/mm/yyyy
I started with this piece of code which works well :
<div class="field">
<%= f.label :active_from %><br>
<%= f.text_field :active_from, 'data-behaviour' => 'datepicker', 'data-date-format' => 'dd/mm/yyyy'%>
<script type="text/javascript">
$('[data-behaviour~=datepicker]').datepicker();
</script>
</div>
<div class="field">
<%= f.label :active_to %><br>
<%= f.text_field :active_to, 'data-behaviour' => 'datepicker', 'data-date-format' => 'dd/mm/yyyy'%>
<script type="text/javascript">
$('[data-behaviour~=datepicker]').datepicker();
</script>
</div>
But trying to implement in rails the date range input examples of code found on the original documentation #github, I mess up : no interaction between star and end dates.
<div class="input-daterange">
<%= f.text_field :active_from, 'data-behaviour' => 'datepicker', 'data-date-format' => 'dd/mm/yyyy', 'value' => DateTime.now.strftime("%d/%m/%Y") %>
<span class="add-on">to</span>
<%= f.text_field :active_to, 'data-behaviour' => 'datepicker', 'data-date-format' => 'dd/mm/yyyy', 'value' => (DateTime.now + 1.years).strftime("%d/%m/%Y") %>
<script type="text/javascript">
$('[data-behaviour~=datepicker]').datepicker();
</script>
</div>
Can you please help me convert my 2 dates selection into a range selection ?
Thanks a lot !
Best regards,
Fred
Try this:
in app/assets/javascripts/main.js
// This initializes all elements that have data-behaviour=datepicker as a datepicker.
// There is no need to repeat this statement anywhere else.
$(document).ready(function(){
$('[data-behaviour~=datepicker]').datepicker();
})
Add this in app/assets/javascripts/application.js
//= require main
In your view:
<div class="input-daterange" data-behaviour='datepicker' id="datepicker">
<input type="text" class="input-small" name="start" />
<span class="add-on">to</span>
<input type="text" class="input-small" name="end" />
</div>
Docs:
http://eternicode.github.io/bootstrap-datepicker/?markup=range&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&keyboardNavigation=on&forceParse=on#sandbox
Thanks to the explanations from Nerian and eternicode, I was able to build the right syntax for implementing the date picker in a Ruby on Rails 4 form.
Following example allows the user to setup a date range for some record validity:
The date range is formatted as dd/mm/yyyy
The data-behaviour applies to the whole DIV
<div class="input-daterange" data-behaviour="datepicker" id="datepicker" data-date-format="dd/mm/yyyy">
<%= f.text_field :active_from, :class => "input-small" %>
<span class="add-on">to</span>
<%= f.text_field :active_to, :class => "input-small" %>
</div>
<script type="text/javascript">
$('[data-behaviour~=datepicker]').datepicker();
</script>
Thanks a lot guys !
Best regards,
Fred
I decided on using bootstrap-wysihtml5-rails, which is a packaged wysiwyg editor with Twitter bootstrap built in. My question is about how to "activate" the editor inside the form which I created with the form_for helper.
I have the following form which I would like to use the wysiwyg editor in:
<%= form_for(#question) do |f| %>
<%= f.label :title, "Title" %>
<%= f.text_field :title %>
<%= f.label :content, "Content" %>
<%= f.text_area :content %> <!-- make this into wysiwyg editor -->
<%= f.submit "Create question", class: "btn btn-large btn-primary" %>
<% end %>
The instructions noted to simply add the following:
<textarea id="some-textarea" class='wysihtml5' placeholder="Enter text ..."></textarea>
<script type="text/javascript">
$('.wysihtml5').each(function(i, elem) {
$(elem).wysihtml5();
});
</script>
However, I am a bit lost about how I could toggle just my text_area section to make it into a wysiwyg. I looked into the Rails guide for form_for, but didn't see how I could insert javascript or even apply a css class to a particular field. Thanks for your help.
Add html class 'wysihtml5' to any text_area you want to implement the editor on.
<%= f.text_area :content, class: 'wysihtml5' %>
You can either paste the script inline as suggested, or put a global initializer at app/assets/javascipts/application.js:
$(function() {
$('.wysihtml5').each(function(i, elem) {
$(elem).wysihtml5();
});
})