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.
Related
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).
I have about 20 forms, each with 15-20 textbox inputs each.
Once the user submits the form, all their values need to be confirmed, this is done by replacing each textbox with a label control that shows the entered value.
The user may click on a back button to edit the data, in which case the textboxes re-appear, or they can confirm their data submission.
What would be the best way to handle this in MVC?
Thanks
I would recommend having different views for editing and showing data. This could be useful if you would like to omit or add some extra of the fields, keeping your view logic simple. You could store the form data in the database with some flag indicating that it is not confirmed yet. After confirmation you would only change the flag of the record. Another option is to store form data in tempData or Session and save it after confirmation.
The quickest way would probably be to have both on the page and bound to the same Model properties but wrap them in some simple render logic. an example off the top of my head in razor could be something like
#if (is in edit state){
<field markup>
#}
else{#
<label markup>
#}
Its been a while since I've worked on an MVC app but that's how i would have done it back then i think.
Select boxes converted to Select2, do not automatically integrate with unobtrusive validation mechanism in ASP.NET MVC framework.
For example, on a form which contains a regular select box (marked as required in model definition), submitting the form while no options have been selected in the select box, will cause the border and background of the select box to take a reddish color, and by using #Html.ValidationMessageFor, error messages, if any, can be displayed beside the box. However if the select box is converted to a Select2 component, then none of the mentioned features work any more. Even the validation error message will not show up.
It seems that the reason for even the validation error message not showing, is because Select2 changes the display CSS property of the original select box to none (display:none), and I guess the unobtrusive validation script does not bother generating error messages for invisible fields.
Any ideas / solutions?
This issue isn't really specific to Select2, but rather to the jQuery unobtrusive validator.
You can turn on validation for hidden fields as highlighted in this answer.
$.validator.setDefaults({
ignore: ''
});
As the comments noted, it didn't work inside an anonymous callback function within $(document).ready(). I had to put it at the top level.
I've run into similar issues with the select2 plugin. I don't know exactly which features you're using specifically, but in my experience, when you set an element as a select2 in the document.ready event, the plugin will change some of the element's attributes on the fly (inspect one of the elements after your page has finished loading - oftentimes you'll see the id and class properties are different than what you're seeing when you view source).
It's difficult to offer more without actually seeing the code, but here's a few ideas to get you started:
First off, obviously make sure you have the a link to your select2.css stylesheet in the header.
Then, since you're talking about form submissions, I'd recommend you examine whether or not you're getting a full postback or submitting via AJAX (if you're using jQueryMobile, you're using AJAX unless you override it in the jquerymobile.js file or set a data-ajax="false" in your form attributes). You can just look at the value returned by Request.IsAjaxRequest() for this. Obviously if you're submitting via ajax, you won't hit the document.ready event and the select2 won't initialize properly and you'd need to figure out a way around that. Try refreshing the page after the submit and see if it renders the select2 component.
Then I'd suggest examining the elements and see if they're not behaving like you'd expect because you're actually trying to work with classes that the plugin has reassigned at runtime. You can either just adjust your logic, or you can dig into the select2 code itself and change the behavior - it's actually fairly well-documented what the code is doing, and if you hop on the Google group for select2, Igor is usually pretty quick to follow up with questions.
like this
$('select').on('select2:select', function (evt){
$(this).blur();
});
$('body').on('change', 'select.m-select2', function () {
$(this).blur();
})
I'm using ExpressionEngine and SafeCracker along with Ajax (plugin: jquery.form.js - http://jquery.malsup.com/form/).
Best I can tell, SafeCracker will only allow for updating a single entry at a time. However, the UI / UX necessitates that a list be displayed. I've proof of concept'ed an entry by entry on-demand form. That is, click a particular edit link next to each entry and a snippet of jquery creates a form along with displaying a submit button. Click submit and that single entry updates. The inputs don't exist until the Update link is clicked
What I would prefer to do, if possible, is to create the non-form and form versions of each entry as the page is renbered and use some sort of toggle to display one or the other. Again, doable. Then, when I click the Edit link I'd add the necessary attributes to the input so that entry's form elements will be read but the other (display: none) elements for the other entries will be ignored. I'm thinking (out loud) that if I add the attr("name", some-value) that would work. That is, an input with no name will be ignored.
Yes, I can test this and I will. However, even if it works I'm not sure if it's a best practice and/or there's a more ideal way of accomplishing my ends. I'm here looking for validation and/or additional expertise and input.
Thanks in advance.
Just set disabled property to inputs and they will excluded from Form submission, whatever input fields are hidden or visible. Different jQuery methods, like submit() and serialize() follow specification of HTML 4 and exclude all disabled controls of a forms. So one way is to set
$('your_input').prop('disabled', true);
or ,
$('your_input').attr('disabled', 'disabled');
Check following link:
http://www.w3.org/TR/html401/interact/forms.html#successful-controls
Also, you may use a general button instead of a submit, as result you can handle click event on it and within that event you can make exclusion, validation, manipulation on values and what ever you like.
You can put a disabled attribute on them server side or set the property via jQuery:
$(".hidden input").prop("disabled", true);
basically, im calling Html.TextAreaFor to display a form, which is great/not a problem...
people enter text in it, and it gets submitted, and if it is successful, i want to return an empty Html.TextAreaFor... but after it's submitted, in the action method i am clear to set the Comment that people are making in the TextArea to an empty string "", however, when it's loaded, it always has the text from the previous load.
i am loading everything in ajax by just updating a Div... and to make sure everything is normal, i have (as a text) a normal Html.TextArea where i specify the name and value. the Html.TextArea is right under the Html.TextAreaFor and acts exactly as it should, but the Html.TextAreaFor for some reason is not!
this is strange because i am reloading the entire DIV which the form is contained in, from a PartialView, at evey submission!!
im also making sure the div is loading with a typical system.datetime.now string returned with everything, and the mentioned Html.TextArea working as it should, it's driving me insane... am i missing something guys? are there any perculiar properties about ...For's that i should be aware of?
Try clearing the ModelState object, which is the HTML helpers read the value from.
Also see What am I misunderstanding about how Html.TextBoxFor works?.