Adding and selecting an option when using an Ajax data source and templateSelection - jquery-select2

I have the following problem to which I can't find a solution. I am using select2 with an ajax data source and templateSelection so I can populate more fields. This works fine.
I want to add a button which programmatically adds and selects a value, unfortunately this does not work. Only if I deactivate templateSelection, it works. Also the other values (firstname, lastname, email) are filled in after the second click of the button.
Here is my code: https://plnkr.co/edit/eVGTJwAr4FcYCw6a
For better display I removed the select2-hidden-accessible class so you can see the options menu.
I really appreciate your help
Update:
Somewhere on the internet I read that with templateSelection option.text must be returned, I changed that and now it works.
To the second problem: I had the idea to add a setTimeout, it works now, but I don't find it optimal. See second button. Code is updated.

Related

Conditional show/hide fields based on show/hide links

What I try to do is very simple.
I have some fields in a form that are optional to fill. To make the form look cleaner, I'd like to show simple links as Add field and display the optional fields below via js unobstructedly.
If the field is present, it will be saved into the database. The field would also have a delete link. When this delete link is clicked, the field will be removed and also its value from the database when saved.
Seems pretty simple, yet I haven't found a simple approach to this. The whole solution involves many aspects such as passing hidden data to the controller to see if the record was hidden in order to delete its data from the database.
I would prefer a gem already optimized for this purpose but I couldn't found any. What I found is intended for associated records but this is not the case. These are not associations, just optional attributes from the same model.
nested_form_fields gem its also not suitable since it needs a checkbox or radio button to be triggered and not Add field/Remove field links which I believe look cleaner.
Is there such thing as a gem to accomplish this simple thing?
Instead of trying to send hidden data etc. Why don't you just load all the form fields but display:none. When a user clicks the 'show' button you display the field. If the click the hide button, just set the field to null and hide it.
When your form reaches the controller it will save the null value to the db for the hidden fields (same as if you deleted the value).

How do I get Grails g:select with multiple-selection with all selections when returning from the controller

I have a page that is a report from a database and I'm working on modifying how the filtering works. The intention is to allow the user to select possible values form a list that will be used to filter the resulting report. There are too many values to do this with checkboxes. I'm defining a multiple selection list box with this:
<g:select name="country" from="${countryDataList.KOUNTRY}" value="${params.country}" multiple="true" />
countryDataList is a List<> of objects with a name and a value which I create in the controller. I'm able to get the selected counties and process them without an issue.
But when the page returns from the controller with the filtered report, only the first selection in the list is selected. It doesn't re-select all of the items that the user selected. I am passing the params.country object back from the controller as
country:params.country
I saw some posts about this not working, but they are all from several years ago. Am I missing a vital step?
Ahh sorry, I was reading it on the phone initially and missed the point.
So what you want is a way of sending a multiple select box to a confirmation page. If I understand correctly?
Anyways how many objects in the select are we talking massive or a dozen couple of dozen or so ?
What I did was use check boxes and did a confirmation which shows the selection ticked in check boxes.. So this is the confirmation page that loads in https://github.com/vahidhedayati/mailinglist/blob/master/grails-app/views/mailingListEmail/confirmcontact.gsp
this page which is where multiple attachments selected from the schedule re-appear...
https://github.com/vahidhedayati/mailinglist/blob/master/grails-app/views/mailingListAttachments/_mailerAttachmentsDisplay.gsp.
Please note advice below is all conceptual stuff and there may be easier ways than this
Other than that You could create a taglib call on the confirmation page https://github.com/vahidhedayati/ajaxdependancyselection/blob/master/grails-app/taglib/ajaxdependancyselection/AutoCompleteTagLib.groovy#L55 which takes in your arrayList you could probably convert it to JSON pass it into the javascript that you load in within the taglib (on mine further down it loads this page in)
https://github.com/vahidhedayati/ajaxdependancyselection/blob/master/grails-app/views/autoComplete/_selectJs1.gsp#L23
and look to reselect them using javascript... as I say I haven't tested the last bit, the first bit i.e. checkbox works it is/has been in use.
Years later from you I just had the same problem. What I figured out is: it happens when params.country is an array instead of a Collection (i.e. an ArrayList).
A workaround for this if you want to stick to the array type is at the value attribute of the tag doing this: params.country?.findAll().

jquery ui tabs multiple calls to tabs()

I have a page where I put my tab content into a div.
This work fine and I can see the tabs.
Later, an event occurs (like selecting a combo box value) and I want to change to another set of tab.
I basically did:
('#divId').empty();
someData.appendTo("#divId");
$("#divId").tabs();
Here is the problem, this 2nd call show me a list:
. tabName1
. tabName2
..... etc
Any idea what's going on, seems like the call to .tabs() work only once when I first load the page.
Thanks.
Check the value of someData, it might contain invalid html that cannot handled when you call the jquery tabs() method again.
One way to do it is:
console.log(someData);
Then if you're using chrome, hit F12 then click on "Console".
$("#detailUL").append("<li><a href='#tabs3-"+id+"'>Desc No "+m+"</a></li>"); // desc
$("#details").append("<div id='tabs3-"+id+"' class='it_detail'>"+copy+"</div>"); // detail
$("#detailPanel").tabs("refresh");

Creating ajax-enabled subform with "Edit" button

I am looking for the best way to create ajax enabled subforms from items in a list with MVC 3. A static list of values should be generated, but with an "edit" link/button next to every item, to toggle inline edits.
I did follow the tutorial at this link
http://blog.janjonas.net/2011-07-24/asp_net-mvc_3-ajax-form-jquery-validate-supporting-unobtrusive-client-side-validation-and-server-side-validation [1]
However it is based on the form edit fields always being visible
I'd like to show a static list with field values, but let the user activate an edit field by clicking "edit" (e.g. button)
I did modify the example at [1] by creating a default partial view with a form with submit button only. When posting the data by ajax the edit form will show. It looks like it is working, (I only need to hide validation errors on the first POST - which does not send real data).
Update:
An even better solution would probably be to leave out all forms in the static view, just have a single css class button/link next to each item, and let jquery fetch the relevant view for the clicked item. I am not sure how to do that with MVC 3+jQuery though.
Another update:
I discovered Ajax.Actionlink, which did exactly what I wanted!
I found out how to do it, and it turned out to be real simple!
I created two partial views.
One for rendering each static item. I used used Ajax.ActionLink with InsertionMode "replace", and set the parent of the item as the target
The second for rendering the form. Here I used Ajax.Beginform with similar options.
On successfully saved data, I returned the static view, on failure, I returned the partial view with the ajax form again.
I'm happy I found a MVC-centric way to do it (although it is fun creating custom stuff with jQuery)
It sounds like you need an inline editing plugin for jQuery. I would try jEditable. I have not used it myself but appears to have extensive docs.
this entry might help: code + video + explanation ;)
http://ricardocovo.wordpress.com/2011/04/03/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms/
-covo

How to blank out a field in an MVC app using TinyMCE

I've got an MVC app that gives the user textarea's to update some description fields. It's strongly-typed to a table object, and the fields are wrapped in a form with a Submit button.
Occaisionally they don't want any data in a field, but when they delete the text and try to save, the blanked-out field comes back with its original text (i.e. the table object passed to the Save action contains other edits, but attempts to blank out fields result in the original text staying in the field).
I'm assuming this is LINQ trying to determine which fields have been edited, but how do you tell it that it's blank on purpose?
UPDATE: It appears this may be a problem with the TinyMCE jQuery plugin. It adds rich-text functionality to textarea controls. If I turn it off, I can remove text with no problems.
UPDATE 2: It seems to be some kind of javascript bug or something. If I put another dummy field after the problem fields, they work. If I move them to another place in my code, they work. They just don't want to work where they are. Very peculiar.
I'm pretty sure that TinyMCE, by default, puts in <p></p> when the control is emptied.
So if you are checking for "" then you may be disapointed.
This initially caused me some issues but never with saving. I was checking if the field was "" and then doing something else. Once I realised that "" was never going to happen, I adapted my validation accordingly.
I just check that on a recent project using TinyMCE editor, but it indeed send "" for an empty input, and during the implementation we had no issues with that.
alt text http://diarioplus.com/files/pictures/tiny.PNG
The body property is the one with a tinyMCE editor on the client side.
I really think it will be something with the modelBinder or the way you set the values back to the model.

Resources