I intend to make certain fields editable via a "popup" portal, where the popup itself is managed by a form. When you "submit" the nested form, the field updates. - https://github.com/final-form/react-final-form/issues/276
The issue I'm getting into is that the onSubmitCustom (inner form) triggers for both the onSubmit for the inner form and the onSubmit for the outer form.
How can I get nested forms to work in react-final-form?
As a workaround, if I had a way to capture the form id that actually submitted the form, I could return false on the outer form's onSubmit when the onSubmitCustom (inner form) is triggered. But I have yet to figure out how to do that.
Related
I am using an MVC 3 Ajax.BeginForm call for form submission with client side validation. One of the input fields is a postcode (postalcode) and as well as validating the format I also want to check to see if it exists in a database table of approximatley 2 million entries.
The solution I chose was to use the an BeginForm OnBegin call to perform a lookup before submission and if the postcode does not exist offer the user the options of accepting it or re-entering. I am performing the postcode lookup using another Ajax call
The problem is that I need to wait for the the inner Ajax call to return and process the response before returning to the outer call but as this is an asynchronous call the function is continusing before the inner Ajax has completed.
I can see several non-preferred solutions, e.g. making the inner Ajax call synchronous or catching the submit button click event but does anyone have suggestions for a clean unobtrusive solution.
Thank you.
You could use the [Remote] attribute to perform remote validation. You simply decorate the corresponding property on your view model with this attribute and then specify the controller action that will perform the actual validation.
Obviously no matter which solution you choose you absolutely must perform the same check once the form is submitted on the server because by the time you initially checked with AJAX and the time the form is actually submitted your database data could change and what was valid initially be no longer valid.
This is kind of a unique issue, and I'm still fairly new to MVC, so I'll do the best I can to explain it. I have a page with a third party grid, where each row is a "Company" object. My model for the view is a CompanyManager object, with the search parameters as fields and the list to populate the grid. Users are able to select a row for editing, which brings up a popup. A button outside the grid also opens the same popup for creating a new record.
The content of the popup is in a partial view, AddEdit, and the model for it is the "Company" object. Along with other fields, there is also another third party grid with "Contacts" as records. From the third party grid of "Contacts", I can serialize the records and pass them along on submit.
My problem lies with submitting on the modal popup, which should close when successful and stay open when the Company model (or any Contacts in the grid) fails validation. What's the best way of going about the submit? Currently, I have a button that calls a JavaScript function. In this function, I've tried jquery $.submit, but since the form posts to Index, that would close the popup regardless. I've also tried $.post to post to an Ajax call, but I have a JSON result being returned in the controller for this, which didn't work as I expected- it just outputs the JSON as HTML.
If you do your ajax call with JQUERY like this:
$.ajax({
type: 'POST',
dataType: 'json',
url: '/url/', //url your posting to
data: $('#form-addedit').serialize(), //serialize the data in your form
success: function (result) {
//hide modal
}
});
You should get the JSON Result in 'result'. Notice the dataType says 'json' if it was 'html' it would expect html to be returned. The result will be put into the variable result in the success function call and you can do what you want with the variable then, and determine if you need to close the modal or not.
Also, make sure in your controller, that you are indeed receiving an ajax call - Request.IsAjaxRequest()
You can do this by having a regular button to submit the form, like you would on any in-page form. Set the id of the button, let's say to 'Submit'.
Then validate the form with jQuery and the .click function. Something along the lines of
$("#Submit").click(function () {
var value = $("#your_field").val();
if (/*check for invalid condition*/) {
$("#Error_message").show();
return false;
return true;
});
This should check the value of each field you need to validate. If the validation fails, show the user and error message and return false. This prevents the click event (form submit) from executing. If the validation checks pass, return true to allow the click event which will submit the form and close the window.
I am using a Jquery UI modal form to post data back to my action and it works fine. However when I put client side validation on and the user closes the modal without submitting the form retains the validation messages and styles.
It there away to clear the validation messages on the client? What element is the message wrapped in?
You could use the .resetForm() function:
var validator = $("#myform").validate({
...
...
});
And later when you close the modal dialog:
validator.resetForm();
I have an MVC view that contains a JQuery UI dialog that can be opened and populated with data.
<div id="dialog">
.... Table of phone numbers
</div>
<div id="personData">
... Person model data
</div>
I am attempting to pass the data from the JQuery UI dialog along with the rest of the MVC View data to a controller action.
public ActionResult Save(Person person, List<PhoneNumber> phoneNumbers)
{
}
In this example the Person type is not part of the dialog and is posted fine. The phone numbers is in the div of the JQuery UI dialog and does not post.
The elements in the dialog are defined in the View and can be seen in the DOM but for some reason something is preventing the data to post along with the rest of the View data. If I remove the .dialog() declaration from the the "dialog" div (now the div is visible on the form), the data (phoneNumbers) will post.
So my question is how do you post the JQuery UI dialog data along with the View data from the form to a controller action? (I know how to post the UI dialog data using a button within the dialog, but I need to post it alongside my main View because of the state issues around this data).
Chances are the dialog box moves the div outside of the form so the fields aren't submitted. You might just link the fields to hidden ones outside of the div or increase the span of the form.
Just as stimms said, you will need to put the data into some fields inside the form you'll be submitting to the action.
Do something like this inside the dialog click function (using jQuery .val())
$("#formFieldName").val() = $("#dialogFieldName").val();
Repeat this for each field.
After that, the fields (probably hidden fields) inside your form will contain the data when you submit the form.
I am using javascript to append user selections to a list. When user is done , which is the best way to go:
1: create index for the list and submit as model in a form to the controller?
2: create hidden element and use javascript to append values and submit as actionlink? (not sure how to tell actionlink the value here)
3: wrap form block around the hidden element only and submit string as model?
other?
I think the easiest way is to put some form of your list to the hidden field (type=hidden) and it will be automatically submitted with form and accessible on server under the name you gave it. So main reasoning here is the way you going to process these data on the server side.
First of all, Scott Hanselman has a good post about model binding to arrays, collections, etc.
In my opinion you shouldn't use second way because this will be a vulnerability ( description of CSRF).
In order to use collections binding you'll need to wrap a form around a list and submit it (note, this form will submit only selected values in this list but you may select them all before submit) or to create a map of values and submit it via javascript (for jQuery - $.post(url, data, callback)) or to add all pairs of name&value to some hidden element of a form and submit it.