In case of form_for i don't want to pass the unchecked checkbox to controller. How to do that?
<%= f.checkbox :question_id %>
The above code will send both checked and unchecked.
Look into check_box_tag. It builds a much simpler checkbox. checkbox uses a hidden field to ensure that a neutral value comes back when the box is unchecked. This is so that when you are updating model attributes, you explicitly set booleans to false instead of not changing them. Checkout this guide on using FormHelper effectively.
and the documentation for FormHelper.
Related
I have a form that contains a select box and a text field.
The text field is displayed dynamically based on the selectbox selection. If the value of selectbox is "Yes", then the text field will be displayed and vice versa.
I am running an rspec test and filled the select box value with "Yes"
select 'Yes', from: 'property[have_water_bills]'
Now i want to fill a value on the text field
fill_in 'property[irrigation_cycle_count]', with: 5
But i am getting the following error.
Capybara::ElementNotFound:
Unable to find field "property[irrigation_cycle_count]"
That is, capybara cannot find the dynamic element. Does anyone know how to fix this?
Poltergeist doesn't gemerate a click event when choosing an item from a select. It generates a focus on the option, change on the select, blur on the option. It is more like if a user selected the option with keyboard instead of using a mouse. You probably should be doing the logic to display your text field on the change event anyway so that it works if people use a mouse or a keyboard to navigate around your page. It also makes more sense to run your show/hide logic on the change event because that's what you actually care about, not clicks.
Finally got this to work using the following piece of code
page.execute_script("$('#have_water_bills').val('true').trigger('click')")
i would like to make a widget that lets the user select a value from a drop-down list and then add new drop-down lists with values filtered based on the previous selections. I don't know where to start from....
If the amount of drop-downs is finite and determinable by the time you develop the software (e.g. selecting country->city->street) I would suggest to:
add all the extra dropdowns (without data yet) to your form, make sure they are hidden
use jqueryui to un-hide and populate the dropdowns as needed using ajax
Don't forget to disable/hide the whole form by default and only show it if JS is enabled in browser.
Also, you will of course need another view, with which only ajax speaks.
Here for you to catch the idea how the stuff should work. Sorry don't know if they have anything more similar. But: user selects something -> jquery requests data for the next dropdown -> jquery displays next populated dropdown.
I have the following structure of fields in a form within an Ember app:
<div class="box">
<label>Name</label>
{{text-input value=model.name}}
</div>
<div class="box">
<label>Gender</label>
{{chosen-select value=model.gender content=selectOptions.genders}}
</div>
The text-input tag refers to a component that inherits from Ember.TextField. The chosen-select tag refers to another component that inherits from Ember.Select. One of the behaviors provided by chosen-select is that it converts the <select> element into a chosen select for better user interaction.
After doing that, I wanted to give the focus to any input field (textfield or select) whenever the user clicked anywhere in the field's surrounding box, not just on the field or its label. I was able to do it successfully with the text input fields, using the code below (pure jquery, no ember was needed here):
$(document).on 'click', '.box', ->
$(this).find('input').focus()
By attaching the click event handler to the document, I'm able to catch clicks on .box elements that do not exist at the time this event handler is declared. The result is that whenever a .box element is clicked, the text input field inside it (if any), gets the focus.
Achieving it for selects too
I wanted to achieve the equivalent behavior for .box elements containing a chosen select, which is to have the dropdown from the select being open programmatically when the surrounding .box is clicked.
According to chosen's options documentation, if we want to programmatically instruct a chosen control to open its dropdown, we must sent it the chosen:open event, so this is what tried, adding it to the code above:
$(document).on 'click', '.box', ->
$(this).find('input').focus()
$(this).find('select').trigger('chosen:open')
And it does not work. It does not give any errors either. I then noticed that if I issued that last line from the browser's js console it works (substituting this with a reference to a .box element, of course). When issued from the console, the corresponding select inside that box opens its dropdown. But when issued from the click event handler above it does not work.
So I figured I needed to issue this command not directly in that context, but using some of Ember's Ember.run functions, like Ember.run.next and some others. But I've had no luck, and I've tried all sorts of things, even triggering the event after a small delay.
I was hoping that someone here with some Ember.js expertise could shed some light on this problem. I assume the problem is when ember, because if I get an equivalent html with no ember (from the front-end designer that gave me the html I'm working with) the thing works flawlessly from the click event too.
New to ember but trying to figure out how to allow selections on click. Once selected, I want to have the ability to select 'Remove' from the actions dropdown to remove the images from the store. Is this possible or do I have to revert to a checkbox somewhere?
Gist Here
JSBin Here
Try this out: http://jsbin.com/pezikuji/2/
What I've basically done in this update was bind a property called "isSelected" from your model to your view.
I'm then using that property in ImagesController to create a computed property called canDelete. This is used by the template in an if statement to show/hide a menu item.
Hope that helps!
I am having a problem with a hasMany property, but only under certain circumstances. I have a User model and a Group model. The user has a property:
groups: hasMany('group', { async: true })
In my template, I show the groups:
{{#each groups}}<span class="label">{{this.name}}</span>{{/each}}
When I go to /users/1, I see the groups. Then I can go to /users/1/edit. There, I show a Ember.Select view with multiple=true. The select view shows 'groups' as the selection and 'allGroups' as the full list. This works as expected. 'allGroups' is a computed property on UserEditController:
allGroups: function() {
return this.store.find('group');
}.property()
So far, so good. I can update the selected groups if I want, then save. After the save, I transition back to the /users/1 route. When the user is displayed there (after updating), the selected groups show nothing. No error in the console.
I can refresh the page and the selected groups are shown, showing the new choices I made when updating the user.
This one has me baffled, but I suspect it has something to do with the 'allGroups' function.
What version of Ember-Data are you using? This sounds like known bug that should be fixed in 1.0.0-beta-3:
https://github.com/emberjs/data/commit/4d717bff53f8c93bedbe74e7965a4f439882e259
https://github.com/emberjs/data/issues/1228
http://discuss.emberjs.com/t/hasmany-relationships-and-waiting-for-all-child-models-to-be-loaded/2461/3
The second link contains a workaround that should work if you have to use an earlier version of ember-data.
I ran into this issue before, but in this case you don't need to manually handle the synchronicity. Ember will render the data when it receives it...
Please provide more code and I will take a look, I think this could be related to the way you proceed for saving.
Also, although I am note sure about that, when you proceed to an update your backend, I think, should return the "inserted" or "updated" data. This would help to ensure synchronization with the backend.