I am using Material-ui and React-final-form. Some form elements get prefilled from the browser cache, such as a login form. The problem is that this does not trigger an onChange event in React-final-form, which leaves the form field state in the "empty" state, which is visually problematic. As soon as a render cycle is triggered, React-final-form picks up the change and the ui is good. I'm wondering how to trigger this programmatically.
Wow. Good question! If you had a ref to the input itself, perhaps you could check it’s DOM value onMount and call the onChange function manually if props.input.value was !==. Just hypothesizing here....?
Related
react-native
react-final-form
rect-navigation
I need to split up my form into subforms. The subforms will be rendered on separate screens in React-Native, but I need them to be part of the same form handling object. From each sub form I need access to the complete form state (for all fields), but each subform will only render some fields.
Is there a way to pass the form object to another screen/component and continue to use the state handling/validation from the main form?
Example:
MainForm
FieldX
FieldY
Button to open subform A
SubFormA
FieldA1
FieldA2
FieldX <- reused from main form, might be readonly in subform A
Button to go back to main form
Button to open subform B
SubFormB
FieldB1
Button to go back to main form
The actual submit of the form can only be preformed from the MainForm. I have this setup with an older form library, but I'm using Modals to show the subforms, which are inlined in the main form. But I'd like to stop using modals and instead push a separate screen (using react-navigation) with subform capabilities by somehow passing the form object.
You can use React Redux to have a Store to be able to share all the information.
Create your store and dispatch your actions, then you can get all the variables (fields) for the form from there.
I fiddled around some more and found a way. Thought I'd answer this for others to find.
The render property of the Form component actually gets the form instance as an argument.
The Form component also takes a form instance as a prop
These two features makes it possible to simply pass the form instance to another Form component. I tried this within the same screen and it works like a charm. I hope I won't get into trouble with the main Form getting unmounted when I push the next screen with react-navigation.
edit: It works perfectly between screens as well. I send the form instance to the subform via react-navigations params object.
There are lots of similar questions to this on SO but none of them have really provided an answer to my particular case. Or at least I can't figure it out!
I have a form with an autocomplete field which is used to populate other fields if a record exists.
I have found that some users type in a value and click to the next cell using the mouse and therefore do not make a selection from the autocomplete list. It's possible that they have typed a value with a matching record in the input field and in that case I want the form to be populated with the appropriate data. Or if it doesn't, then clear the form.
The only way I can think of to check the value exists in the database is to use the change event to make an ajax call to retrieve the data but that doesn't seem like a very elegant solution and I'd be very surprised if there isn't a better way to do this since it seems to me that this would be a very common scenario...
Is there a way to retain the autocomplete array and check it against the input value in the change event? Or how else can I do it?
What you can do is stash away a copy of the data returned in the ajax call's success callback.
You can then add a blur event handler to the autocomplete input, so it'll be called whenever the user clicks away to the next field. In the event handler, check the stashed ajax data, and if there was only a single possible match, use that to populate the input.
I have a requirement to ask a question when a certain scenario happens on my MVC 4 view.
When that scenario is true, I simply want to have a jQuery UI dialog pop up modally. That dialog will simply have two radio buttons for "WidgetType" (Purple or Blue).
The viewModel has a property for SelectedWidgetType (that has a default value).
I simple am looking for the best way to handle updating the underlying model with the selection a user picks in the dialog.
Thanks in advance for any replies.
NOTE: I am using this overly simple example as the basis for other dialogs that will have more fields on them that also update the underlying model.
Creating the dialog isn't the hard part, but I am struggling with getting the values.
User jQuery's AJAX post method.
Create a view model JavaScript object on the front end that maps to the parameters of your data model. This view model object can be triggered to get updated each time the user changes his selected options by calling an update method via the change event handles of each form element.
Pass it back to the server controller by packing it into a JSON object using json2.js
If you want a full framework/elegant solution look at using knockout.js which simulates most of this for you... !
I have a jquery mobile app that has a page. This page has three DIVs, I programmatically choose one of these DIVs based on a variety of variables. Regardless, the one DIV contains a select element. This element has 20 items in it. Because of the shear quantity, the select box opens in its own dialog. I'm fine with that, however, after a user makes a choice, the pagebeforeshow event of my hosting page is fired again. My problem is, I can't seem to figure out how to detect that this event was fired as a result of the user choosing an option or closing the select dialog.
Is there a way to detect in the pagebeforeshow event how we got here?
jQuery mobile passes meta-data to the callback functions of most events. From the docs on pagebeforehow:
Triggered on the "toPage" we are transitioning to, before the actual transition animation is kicked off. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:
prevPage (object) - A jQuery collection object that contains the page DOM element that we are transitioning away from. Note that this collection is empty when the first page is transitioned in during application startup.
You should be able to use this in your callback function to branch to your advantage, i.e. detect if prevPage is the current page. This might look like:
$('#yourPage').live('pagebeforeshow', function(event, data) {
var from = data.prevPage;
// do some inspection of `from` and branch accordingly
// might require some experimental console.logging first
});
I also didn't verify the question raised in above comment, but data.prevPage has a copy of the entire previous page's HTML, accessed via data.prevPage[0].innerHTML. I'm sure you could do something like binding to the click event on the select dialog and tell it to add a class or whatever to the DOM where the user selected whatever entry, and scrape that back out of the HTML? Just throwing an idea out there.
I am currently binding an IEnumerable collection to a ListBoxFor, which works as expected, sending the currently selected values on POST. However, I need to send all the values instead (essentially any value in a given ListBoxFor I consider to be required, whether selected or not). How would I go about doing this?
(I can probably rig something up in jQuery where, on-submit, it manually selects all the elements in a box, but was wondering if there was a better way.)
If you want to continue using normal browser form serialization on submit, write a javascript function to fire right before the submission (hook into an onclick event or something) which iterates through the list box control and concatenates the desired values (perhaps comma-delimited) and places it in a hidden field. The value of that hidden field will be submitted normally and you can parse the individual values from it on the server side. It's still some manual work, but you avoid messing with GUI state (i.e. selecting all desired list box items) which I agree is something you don't want to do.