<%= f.radio_button :newCustomer, "Male",:value=>'NewCustomer',:checked=>true%>
`<%= f.radio_button :customer, "Female",:value=>'Customer'%>`
<div id="first"></div>
<div id="second"></div>
I am new in rails.I have two radiobuttons and two div.When i click NewCustomer i want to hide first div and when i click on the Customer show the hidden div.I want to do this in only Ruby code.Is there any radiobutton click event like in .net
You can achieve it by Javascript / JQuery / Ajax in rails:
Example:
HTML
<input type="radio" name='thing' value='valuable' data-id="female" />
<input type="radio" name='thing' value='valuable' data-id="male" />
<hr />
<div id="female" class="none">Div for Male</div>
<div id="male" class="none">Div for Female</div>
CSS:
.none {display:none;}
JQuery
$(':radio').change(function (event) {
var id = $(this).data('id');
$('#' + id).addClass('none').siblings().removeClass('none');
});
Working Fiddle
Pipeline
To further Gagan's answer, you'll want to include your Javascript in the asset_pipeline:
#app/assets/javascripts/application.js
$(document).on("change", ".radio", function(){
// gagan's code here
});
--
Turbolinks
Something to note is the importance of the javascript "delegation" - when you use Rails applications with Turbolinks.
Because of the way in which Turbolinks will just update the <body> tag of your page, many JS event bindings will actually become invalid, preventing your application from loading correctly.
To fix this, you need to be able to either delegate your DOM events from a "container" element (typically document), or by encapsulating your code in Turbolinks events like so:
#app/assets/javascripts/application.js
var change = function() {
$(".radio").on("change", function(){
//Stuff here
});
};
$(document).on("page:load ready", change);
Related
I'm using SimpleForm to collect a new object and I'd like to use values that the user has entered into the form to populate values in a nested form. Is there a way to do this?
So far I've been perusing the SimpleForm docs and poking around with pry when the form is active – without much luck… My next guess would be to try to get at the values with jQuery, but that is entirely new ground for me. Any suggestions would be most welcome.
<form id="get_value">
<input type="text" name="FirstName" ><br>
<input type="text" name="Email"><br>
</form>
<button>Get Value</button>
<div id="value"></div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#value").text($("#get_value").serialize());
});
});
</script>
Try this. In your view:
<p id="output"></p>
<%= text_field_tag :foo, params[:foo], id: 'bar' %>
This will set your custom ID.
And then in your .js file:
$("#bar").keyup(function() {
var value = $(this).val();
$("#output").text(value);
}).keyup();
This will return a value of the input.
Source: http://api.jquery.com/val/
<div class="sortable-sections">
<fieldset class="section draggable" id="flSectionType">
<div class="btn-drag section-handle hidden-view">
</div>
<div class="section-header">
<span class="section-label">Job Requirements</span> <a class="section-info" href="#more-info"
title="Minimum Education, Minimum Work Experience, Required Licenses/Certifications, Required Skills, Knowledge, and Abilities needed to perform the job.">
?</a>
</div>
<div class="sortable-items">
</div>
<a class="section-add-item hidden-view" id="addJR" href="#add-item" data-item='{"id":"addJR","template":"requirement","item_type":"Job Requirement"}'>
Add a new Job Requirement</a>
</fieldset>
<fieldset class="section draggable">
</fieldset>
<fieldset class="section draggable">
</fieldset>
<div>
The above code will generate a list of sections which can be dragged with in the sortable-sectons.
I am using the following script to remove sections manually and adding it back to sortable-sections, but it is not registering the jquery events.
var $section = $('.sortable-sections').find($('#flSectionType');
$('.sortable-sections').find($('#flSectionType').remove();
......
.......
$('.sortable-sections').append($section.val());
After appending the section, the event which are registered for the section-add-item css classes are not triggering.
Note:
instead of "on" used the "live" method. but it is not holding all attributes.
Edit:
Event code:
$('.section-add-item').on('click', function (e) {
that.addSection(this);
e.preventDefault();
});
instead of drag and drop, manually i am ordering the section on initial load.
.section-add-item must already exist when adding the event and the usage of on is wrong
$('body').on('click', '.section-add-item', function (e) {
});
instead of the body you can add another parent of .section-add-item that already exists before .section-add-item is created.
I am developing an app having UI which is used for mapping fields (Source => Destination).
These fields would appear in UL -> LI -> DIV
The lists are going to be created dynamically by PHP.
Source fields are draggable with revert:true, where as Destination fields (droppable) would accept source field. I know the accept : "#divsource"
I am able to make many div's draggable, but my problem is how to define many LI->Div as droppable.
At then end the drop event would call ajax and that I can handle as well.
I am new to jQuery and whatever I have learned till now is with this task is all I know. But, my quick learning ability is not a problem.
Please help with some example.
thanks
Wikki
Below code is something I have been playing with. I know it's bit far off from what eventually it should look like:
<script type="text/javascript">
$(document).ready(function(){
$('.srcfield').draggable({
revert: true,
helper: "clone"
});
$('#destinationfeilds').droppable({
accept : ".srcfield",
over: function(){
$(this).removeClass('out').addClass('over');
},
out: function(){
$(this).removeClass('over').addClass('out');
},
drop: function(ev, ui){
//var answer = confirm('Delete this item?');
var theTitle = $(ui.draggable).attr("title");
$(this).html("<u>"+theTitle+"</u><br/> is mapped!");
//$(this).removeClass('over').addClass('out');
//alert(theTitle);
}
});
});
</script>
</head>
<body>
<div id="destinationfeilds" class="out">
<span>Destination</span>
</div>
<div id="destinationfeilds" class="out">
<span>Destination</span>
</div>
<div id="sourcefields">
<div class="srcfield" title="First Name"><span>First Name</span></div>
<div class="srcfield" title="Last Name"><span>Last Name</span></div>
<div class="srcfield" title="Age"><span>Age</span></div>
</div>
</body>
On a jQuery Mobile site I have elements of a <ul> being populated by jQuery Templates, filling out <li> items so something like this:
<ul>
</ul>
<button>Fill</button>
<script type="text/x-jquery-tmpl" id="tmpl-items">
<li><input type="checkbox" name="guys" /> ${FirstName} ${LastName}</li>
</script>
<script type="text/javascipt">
$('this-page-id').live('pageinit', function() {
$('button').click(function() {
$('#tmpl-items').tmpl(MyApp.Model)
.appendTo('ul')
});
})
</script>
Everything works, except the checkbox renders as a normal checkbox, not a cool jquery-mobilized checkbox. I know that the trick is to call "refresh" on the widget but I have no idea what widget I should be using - there is no data-role here. Does anybody know?
Can you triggering a create on the ul,like this $('ul').trigger('create');
I am trying to do the following:
The object I give to the Viewpage has a list, I do a foreach in the HTML and I create a number of components. Now, I want the IDs of those components to somehow be linked to the object from the List.
(The reason I am trying to do this is because I want to show a button, when they press that button the shown content will change and they should see something else, I will use javascript to achieve this)
Therefor I am trying to make the id of those components dynamic, by for example stating
id="button <%= item.id%>" however this does not seem to work. I have searched alot on google but I haven't found a solution yet which is why I turn to you guys.
I'll link my code as well, I deleted some of the parts that were unnecessary (but added the javascript):
<script type="text/javascript">
function AlterPanel(thePanel) {
var panel = document.getElementById("region"+thePanel);
panel.style.display = 'block';
var button = document.getElementById("button"+thePanel);
button.style.display = 'none';}
</script>
<%foreach (TeamDTO team in Model.List.Teams)
{ %>
<a id="button<%= team.Number %>" onclick="AlterPanel(<% team.Number%>)">
Add member</a>
<div Visible="false" id='region<%= team.Number %>' runat="server">
Please select one:
<%: Html.DropDownListFor(V => V.memberID, new SelectList(Model.members, "ID","Name")) %>
</div>
<% } %>
I eagerly await a reply and thank you in advance.
I guess your Queastion is:
-you have some "button DropDownList" pair, button is visiable, DropDownList is invisible, now if user click the button then DropDownList will showup.
OK, now your View maybe :
<%foreach (TeamDTO team in Model.List.Teams)
{ %>
<a onclick="AlterPanel(<% team.Number%>)">
Add member</a>
<div id="region<%= team.Number %>" style="display:none">
Please select one:
<%: Html.DropDownListFor(V => V.memberID, new SelectList(Model.members, "ID","Name")) %>
</div>
<% } %>
I use JQuery in javascript part like this:
<script type="text/javascript">
function AlterPanel(thePanel) {
$("#region" + thePanel.toString()).css("display", "block");
}
</script>
Don't forget include the following file in View():
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>"></script>
if the answer is not what you want, let mt know and I can help you~ :)