I have an submit_tag or input button, however you wanna call it, but I can't get the Text + Font-Awesome icon to work together.
I tryied like this
%input{type: "submit", name: "A", "data-theme" => "b"}
%i.icon-time
= "Finish"
But the icon and the text are outside the input tag( ... )
I tryied to use
= content_tag :input, type: "submit", name: "A", "data-theme" => "b" do
%i.icon-time
= "Finish"
but the same problem, the %i was left outside.
with button_tag it looks good, but the content is not submitted to the controller. ( maybe because the html tag is button and not input )
How can I get this working?
Check your console for any errors. I feel like you may just have a css problem. If the button tag works for you, you could easily add a jquery fix.
$('button').click(function() {
$('form').submit();
});
From what I can see that is the only fix for nesting content inside of a form submit.
P.S. You don't have to write = "Finish", you could just write Finish!, HAML will insert it as plain text wither way.
In the application.html.haml I have the following
= javascript_include_tag "application"
= javascript_include_tag "disable_ajax"
In the application.js
//= require jquery.mobile-1.3.0
In the disable_ajax.js
$( document ).bind( 'mobileinit', function(){
$.mobile.ajaxEnabled = false; // Here is where I fix the problem
});
The key is to include the jquery mobile first
Related
I have a form with this collection_select
<%= collection_select :bmp, :bmpsublist_id,
Bmpsublist.where(:bmplist_id => #bmp.bmp_id), :id,
:name,{ :required => false,
:selected => #bmp.bmpsublist_id, } %>
I would like to be able to get the value of this collection_select so that lower down in the same form, I can check to see which list I should use when displaying another collection_select
Something like this partial pseudocode here:
if earlier result == 2 then
use this list: Irrigation.where(:id != 8)
else
use this other list: Irrigation.all
and they would be updating the collection_select:
<%= collection_select :bmp, :irrigation_id, the_chosen_list_from_above, :id, :name,
{:prompt => 'Select Irrigation Type'}, {:required => true} %>
How can I do that?
Based on what you've asked, there are two ways to query and apply the value of the collection: static and dynamic.
Static occurs at the time that the ERB view is rendered, and this will apply the logic at the time that the page is initially rendered and loaded. Dynamic occurs after the page is loaded, and as the user interacts with the elements on the page. Which approach you choose to go with depends entirely on your application's design and intended level of interaction with the user.
Static Detection
You're already specifying the selected item in the initial collection_select, so you can reuse that in your later code. Try this, based on your pseudocode example:
<% if #bmp.bmpsublist_id == 2 %>
<% irrigation_list = ["Sprinkle", "Furrow/Flood", "Drip", "Furrow Diking"] %>
<% else %>
<% irrigation_list = ["Sprinkle", "Furrow/Flood", "Drip", "Furrow Diking", "Pads and Pipes - Tailwater Irrigation"] %>
<% end %>
<%= select :bmp, :irrigation_id, options_for_select(irrigation_list),
{ :prompt => 'Select Irrigation Type'}, { :required => true } %>
Why will this work? The :selected option for the initial collection_select is where you provide which option will be initially chosen. Since this value is typically taken from the model value, it's supplied in a separate param from the actual collection values. So, it's queued up and ready for you, simply by virtue of sticking to the Rails conventions.
The subsequent select builds the HTML <select> element and uses the options_for_select to turn the array of options into HTML <option> elements. This way, you can use the variable list of options to select from, based on which element from the original collection_select was chosen.
Best thing of all: with the static approach, you don't have to drop into Javascript (or jQuery) to do this; it gets rendered directly by the ERB template (or the HAML template, if that's your bag).
Dynamic Detection
If you actually wanted dynamic behavior, you can drop into Javascript / jQuery and get it done. You can create your "Irrigation Types" select just like with the static approach (above), except that you initialize it with all of the options, like this:
<%= select :bmp, :irrigation_id,
options_for_select(["Sprinkle", "Furrow/Flood", "Drip", "Furrow Diking", "Pads and Pipes - Tailwater Irrigation"]),
{ :prompt => 'Select Irrigation Type'}, { :required => true } %>
Then, edit the Javascript source associated with your view (let's call it Product). Open the app/assets/javascripts/product.js (if you use CoffeeScript, it's the product.coffee file in the same directory).
Edit that Javascript file to include this code:
function OnProductEditForm() {
// Edit the selectors to match the actual generated "id" for the collections
var bmp_collection = $("#product_bmp");
var drip_collection = $("#product_irrigation_type");
var drip_option = drip_collection.find("option")[2];
function select_available_drip_options() {
var value = bmp_collection.val();
if (value == 2) {
drip_option.attr("disabled", "disabled");
} else {
drip_option.removeAttr("disabled");
}
}
bmp_collection.change(function() {
select_available_drip_options();
});
select_available_drip_options();
}
This identifies the HTML element of the collection and installs a change event handler. You'll need to verify the collection element's id, as per the code comment, and the rest happens from there. When the collection is changed (a new value is chosen), the event handler will hide or show the third select <option> (specified as find("option")[2]), as appropriate for the #product_bmp selection.
Next, in the app/views/products/_form.html.erb, include this at the end of the file:
<script>
jQuery(document).ready(OnProductEditForm);
// Uncomment the next 2 lines for TurboLinks page refreshing
//jQuery(document).on('page:load', OnProductEditForm);
//jQuery(document).on('page:restore', OnProductEditForm);
</script>
This will automatically load the OnProductEditForm method when the page loads, and will result in the afore-mentioned event handler getting installed. Note that the last 2 lines are necessary if you have TurboLinks enabled, as TurboLinks initiates events for page loading independently of the standard $(document).ready.
And that's all there is to it. Adding dynamic behavior is just that easy!
You're gonna have to use some javascript (jquery and ajax, I would suggest). When the value of the first select change (jquery), it requests (ajax) the collection (passing the current value selected) to a controller action that returns the collection that should be used. With the collection returned, you populate the options (jquery) for the second select. It's not quite simple, but if you ever did something like that, you shouldn't have problems. If never did, do some research about it... it's quite useful and improve user experience a lot!
I am using tinymce-rails gem for Tinymce and I want to add custom menu option. Right now I am doing what is suggested in the readme of gem like:
<%= f.input :content , :label => false , :placeholder => 'Content', input_html: {class: "tinymce"} %>
<%= tinymce %>
I am using simple-form.
I want to add a drop-down in the editor with a bunch of options (I have an array of names) and when user clicks on an option then the selected name should be inserted in the view of editor. And those names will be dynamic.
I tried to pass many options to the initialiser tinymce but unable to get the result.
Rather than using the default initiator from the gem you could initiate tinymce manually and create the menu item at the same time:
http://www.tinymce.com/tryit/menuitem.php
Something like this:
<script type="text/javascript">
tinymce.init({
selector: '.my-class textarea',
toolbar: "styleselect | bold italic | mybutton",
setup: function(editor) {
<% #my_items.each_with_index do |name, index| %>
editor.addMenuItem('<%= name %>', {
text: '<%= name %>',
context: 'tools',
onclick: function() {
editor.insertContent('<%= name %>');
}
<%= index == (#my_items.count - 1) ? '});' : '}),' %>
< % end %>
});
</script>
We use a ternary operator to choose the correct closing tag based on the index of the names.
Theoretically you can also do this in the config/tinymce.yml file, but due to the dynamic nature it's not really plausible.
Something else you may want to look into is passing the menu to the activeEditor like:
tinyMCE.activeEditor.controlManager.get('my_menu')
In rails 3.2.9, i am using bootstrap's wysihtml5 editor to one textarea field but in IE9 i am not getting that field's(textarea) value. I am loading a form via ajax to preview this text field's details before saving it. In IE-10 it is working fine.
In application.js
//= require bootstrap-wysihtml5
In application.css
*= require bootstrap-wysihtml5
While serializing the form i am not getting text field's value
form_data = jQuery("#form_id").serialize();
jQuery.ajax({type :'POST', url : '/user/preview.js?', data : form_data});
In views,
<%= f.input :description, :as=>:text, :label =>false, :required => false, :placeholder=>"Description", :input_html=>{:rows=>"10", :class=>"texteditor", :style=>"width: 520px;"} %>
In script,
function loadTextEditor(){
$('.texteditor').wysihtml5();
}
window.onload = loadTextEditor();
How do i get texteditor's value before saving it via ajax. Please help me to solve this issue.
Did you try to look the error on inspect element > console?
Always use the editor object to get the value of the textarea:
$('.texteditor').data("wysihtml5").editor.getValue();
I'm using Bootstrap-sass and formtastic in my Rails application, and I'm not sure why the bootstrap-typeahead feature isn't working.
Form partial:
<%= f.input :tag, :input_html => { :'data-provide' => "typeahead", :'data-source' => '["hello", "hellow", "heaven", "helo", "herr"]' } %>
application.js manifest:
//= require bootstrap-typeahead //typeahead is correctly loaded, checked with firebug
result HTML source code:
<input :data-minLength="2" data-provide="typeahead" data-source="["hello", "hellow", "heaven", "helo", "herr"]"
In the end, I will need to customize typeahead to get the performance I want, but even this simple javascript isn't working for some reason. I cant find anything wrong with the code. Could anyone help me?
UPDATE:
I tried it in the javascript way as follows:
<script> //call typeahead
$(function() {
$('input#type_ahead').typeahead({
'source' : ["hello", "heaven", "heythere"]
});
})
</script>
<%= f.input :tag_list, :input_html => { :id => "type_ahead" }, %> //input tag
And still it seems like typeahead fails to work. i.e) typing in "he" does not get me a dropdown of those three items in the above array. Does anyone have an idea?
I think you need to set html_safe for:
{ :'data-source' => '["hello", "hellow", "heaven", "helo", "herr"]'.html_safe }
Have you called the typeahead() method when your page loads? You need to do something like this;
$(function() {
$('input').typeahead();
})
You'll need to assign a class or id to your input to bind the typeahead to it specifically (Rails probably has assigned an id to it automatically, I'm presuming you've omitted it specifically)
$(function() {
$('input#my-tag-field-with-a-cool-typeahead').typeahead();
})
edit:
The following worked for me. It'll take a bit of modification to the rails part to fit your situation, but this definitely works.
<script>
$(function() {
$('input#type_ahead').typeahead()
}
</script>
<%= text_field_tag :test_type, '', data: {provide: 'typeahead', source: "['hello','heythere','heaven']"} %>
I want to open a pop-up window on click of 'link', then show some data there and close it.
I am using 'link_to' to create 'link'.
The part of code looks as:
<%= link_to 'Display Links', :controller=>'aaa', :action=> 'xyz_links', ....... %>
Previously, in rails2.3.x you could just do:
link_to "foo", foo_path(foo), :popup => true
But now in Rails3, this option has been deprecated
Another option is to use the Rails 3 unobtrusive way of event
delegating those links:
First add an attribute "data-popup" to your link_to if you want it to open
in a new window
Then if you are using the jquery adapter, add to application.js inside the document
ready handler:
$('a[data-popup]').live('click', function(e) {
window.open($(this).attr('href'));
e.preventDefault();
});
Or with the prototype adapter, use this code inside the document ready
handler:
document.on("click", "a[data-popup]", function(event, element) {
if (event.stopped) return;
window.open($(element).href);
event.stop();
});
You can find the same discussion here:
http://groups.google.com/group/rubyonrails-talk/browse_thread/thread/e1f02d9e0977071b/814d69e4d56cea65?show_docid=814d69e4d56cea65&utm_medium=twitter&pli=1
I haven't tried this but have this in ruby docs:
<%= link_to name, url, :popup => ['dialog name','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes'] %>
pls check at
http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to#29-Window-open-a-dialog-of-no-menu-no-status-have-scroll