I want to create a sortable list using Jquery in grails. This list has to be populated by a dropdown. Here is the flow:
(1) User selects item1 from dropdown
, item1 shows up in sortable list
(2) User selects item3 from dropdown
, item 3 shows up in sortable list
(3) User selects item5 from dropdown
, item5 shows up in sortable list
Then the user can rearrange the sortable list in what ever way he wants and save it in a list. It has to be a list because the sequence is important to maintain. Currently, there is a multi select to select multiple items but there is no way to keep them in order.
I have Jquery plugin installed in my project. I am not sure how to get the selected item from the dropdown. There is a many-many relation ship between these classes.
<div class="fieldcontain ${hasErrors(bean: CarInstance, field: 'parts', 'error')} ">
<label for="parts">
<g:message code="label" default="Car Parts" />
</label>
<g:select name="parts"
from="${Parts.list()}"
multiple="multiple"
optionKey="id"
size="5"
optionValue="partName"
class="many-to-many"/>
Any advise would be helpful.
Thanks..
Generally, I suggest you to separate HTML markup from client side logic and write all the logic in a separate javascript file. For instance, your javascript code might look like this:
(function ($) {
$('select').on('change', function () {
var value = $(this).val();
var text = $(this).find('option:selected').text();
$('<div class="item" data-value="' + value + '">' + text + '</div>')
.appendTo('#sortable');
});
})(jQuery);
Have a look at a sample jsFiddle: http://jsfiddle.net/rsPW7/1/
Related
I am developping an asp.net mvc app and I have a cshtml view with a knockout directive :
<select data-bind="options: choices"></select>
When I received a filled array, everything is working well I got a dropdown list where I can select one element.
The problem is that when I received an empty array, the dropdown list is still displayed but without anything to choose, so it's kind
of ugly. I would like to know if it's possible in the knockout direct in my cshtml, to add a condition to said :
If my choices contains no element, display a label (with a message) instead of an empty dropdown list.
I think the following is pretty self-explanatory:
<!-- ko if:choices().length > 0 -->
<select data-bind="options: choices"></select>
<!-- /ko -->
<!-- ko if:choices().length == 0 -->
I love tea
<!-- /ko -->
So within my grails application I have a form consisting of multiple fields. One of these fields is being named 'mandatory'. Currently it's a text field that allows one character to be inputted but I'd like the field to be a drop down with the option of blank, Y or N to be select-able.
This is how my text field for mandatory looks now:
<g:textField name="mandatory" maxlength="1" value="${templateInputInstance?.mandatory}"/>
This is what I have come up with for the dropdown:
<select name="mandatory" maxlength="1" value="${templateInputInstance?.mandatory">
<option>Y</option>
<option>N</option>
</select>
This allows me to select Y or N however when I hit submit at the bottom of the form the value for 'mandatory' isn't saved and shown in the show.gsp page.
Can someone tell me why that is?
If I understand You correctly, You want to set textField value depending on the select value?
If so,
You should use javascript, for example:
js:
...
$('#mandatory').change(function()
{
$('#textFieldMandatory').val($(this).val());
});
...
Yours html:
<g:textField name="textFieldMandatory" maxlength="1" value="${templateInputInstance?.mandatory}"/>
<select name="mandatory" maxlength="1" value="${templateInputInstance?.mandatory">
<option>Y</option>
<option>N</option>
</select>
Or if You want to set this value after submitting a form, You should use Ajax.
Edit
As Jamie write:
<g:select name="mandatory" from=" YN" maxlength="1" value="${templateInputInstance?.mandatory}"/>
solve the problem.
Here is the answer from another question: jQuery find $.find('selector') versus $('selector') difference
The reason this does not work is because find() lets you filter on a set of elements based on a selection you've already made.For example if you wanted to select all of the inputs within a particular form, you could write:
$('#aParticularForm').find('input')
It cannot be called on its own.
How can I expand this statement to find specific inputs on a page? (Specifically listviews)
Working example: http://jsfiddle.net/Gajotres/93VFG/
Wanted element must have a unique identification, like id or class.
HTML :
<form id="aParticularForm">
<input type="text" value="One" id="input1"/>
<input type="text" value="Two" id="input2"/>
</form>
Javascript :
var input = $('#aParticularForm').find('#input1');
alert(input.val());
You can even go further, because you are working with a jQuery Mobile you can have several pages loaded into the DOM and they can all have identical input fields, so to find elements only in a current active page you would use:
$.mobile.activePage.find('#input1');
I am trying to use Knockout Validation in combination with Bootstrap Combobox Plugin.
I have a select control that is bound to my observable property which has the required attribute (for KO Validation).
<select data-bind="attr: { options: TypeAheadSource, value: XYZ, validationOptions: {errorElementClass: 'input-validation-error'}, typeaheadCombobox: {}"></select>
I have a custom binding associated with the select control in which I basically just call the Bootstrap Combobox Plugin. That creates a Div with an input control over the select control and hides the select control.
The knockout validation fires up when I dont select a value in the comobox and shows the error message next to the control BUT the field is not highlighted. Here is how it looks like
As you can see, the error message shows up but the input field is not highlighted.
Here is the final html that is generated when the validation fires.
<div class="combobox-container">
<input style="position:static;" type="text" autocomplete="off" data-bind="{ value: Name, validationOptions: { errorElementClass: 'input-validation-error' }" class="input-large">
<span class="add-on btn dropdown-toggle" data-dropdown="dropdown"><span class="caret"></span>
<span class="combobox-clear"><i class="icon-remove"></i></span></span>
<select data-bind="validationOptions: { errorElementClass: 'input-validation-error' }, options: TypeAheadSource, value: Name, typeaheadSimpleCombobox: { }" class="combobox input-validation-error"></select>
</div>
As you can see, the select control (which was hidden by the plugin) gets the validation error class I defined ('input-validation-error') but the input control created by the plugin does not.
That is the main issue here.
So, I thought it could be becasue the input control is not directly bound to the property. So, I tried adding the same value binding as the select control to the input control created by the plugin inside the custom binding. I also added the validationOptions binding. These changes didnt work either.
Strange thing is I also have a typeahead textbox bound to another property which uses a similar design (custom binding to create the typeahead plugin over an input control) and the validation + highlighting works perfectly on that. Here is the final html from that.
<input type="text" data-bind="value: xyz, validationOptions: { errorElementClass: 'input-validation-error' }, typeaheadTextBox: { source: $data.TypeAheadSource }" class="typeaheadValue input-mini" data-provide="customtypeahead" autocomplete="off">
Could someone tell me if I am missing any additional steps. I am sure you might need more details.
Please leave a comment and I will try to add more details.
Thanks.
I figured the issue. In case someone has the same issue, here is what I did.
Even though I setting up the value bindings on the input control created by the plugin, the bindings were applied before the control is created and so, I had to reapply the bindings specifically on the input control created by the plugin. That did the trick for me.
I have made a sortable list.
Based on the order of the sortable list i want to insert text into a textarea #notes.
is there anyway I can have text sorted based on the list so even if i change the order. the text in the textarea should change accordingly
eg
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
entry 1 = "this is line 1"
entry 2 = "this is line 2"
I am not sure if i have to use Ajax or something to have this done. since i want each list item to have predefinded text.
I am trying to learn Jquery and would really apprieciate any help.
any hints on how i can have this done.
Question
Where and how do i store these predefined values ?
How to get the text in the text area sorted ?
can someone please point me in the right directions
Maybe write a javascript function to refreshTextarea() that you will use initially to fill the textarea and every time the sorting changes it will "refresh" it by emptying and refilling depending on the sort order of the list.
ok, to associate values with your list items, give your ul an id and your li unique ids
<ul id="the-list">
<li id="item-1">entry 1</li>
...
</ul>
then for each list item, create a hidden input with an id that corresponds in some way
<input type="hidden" id="item-1-data" value="this is where you put info for the list item entry 1" />
Then with jquery you programmatically associate them by looping through your list items and refreshing your textarea after any sort is made.
$('#the-list li').each(function() {
//get the id of the list's data field
var li-data-id = $(this).attr("id") + '-data';
// get the actual data associated with this list item
var li-data = $(li-data-id).val();
// append next list's data in the textarea
$('#id-of-textarea').val($('#id-of-textarea').val() + "\n" + li-data)
}
A textarea is just a blob of text. You'd have to have some way of determining what constitutes a "sortable" line in there. Or regenerate the entire contents anytime the list is changed.