How to reset react-form-hook with dynamic checkboxes - javascript

I'm using react-form-hook with Material-UI library and I'm trying to generate random checkboxes for each object that I get from the server.
I tried to use "reset" function from react-form-hook and that didn't worked.
Codesandbox for example:
https://codesandbox.io/s/busy-http-ijj8d?file=/src/App.js
(I faked the data from the server into variable over there only for example)
Thank you!

Related

How to Update Multi Select Data in React

I am using multiSelect in a form, I need to do CRUD. I have no problems creating the data, my difficulty is in updating the data, because I can not set a default value in multiselect ... Can anyone help me?
I try several times.
see the image below

updating values to server in AG-grid

Here I'm Using .net Core in Server Side and plain vanilla JavaScript for UI
AG grid is getting data from the SQL view thru ASP.net Core application.
in the Grid all the cells are editable. now i want to have one button on top of the Grid. if the user clicks that button only changed data needs to save in DB. is there any option to get oly dirt values or pls advice me how to achieve the above use-case.
Thanks in Advance.
I think there isn't such a complex solution implemented in ag-grid out of a box. But you can do it yourself with help of the events cellValueChange and/or rowValueChange (only if you are using editType = 'fullRow').
I suggest to use the scenario editType = 'fullRow'. So whenever the rowValueChange fires, store the new data of that row in some data array (of course, if a user edits the same row the second time, you need to overwrite the previous stored row value). And when the button is pressed, you pushed to the server only data of that changed rows you've collected.

VueJs Understanding v-model and v-on:click

I'm currently trying to learn VueJS coming from a jQuery background and I've run into something that I either don't understand or trying to do wrongly. I'm using VueJS and Laravel. I add VueJS to my blade templates.
I have table set up with a few rows of data. In those rows I have a text input field. Each row also contains two icons that allow me to move the row up or down.
When I click on the icon I want to send a axios request telling my database to update the order field. When it returns a success message I want to reload the table with the new order.
After clicking the v-onclick icon and reloading the table into my div with an axios get the v-onclick stops working. Also the v-model binding that I've set up also stops working. When I update a value in a text input it no longer updates the value in the data property.
I've added a jsFiddle to give an idea of what I'm trying to accomplish.
I use axios to get a route that returns the products table view.
```reload : function(){
url = '/products;
axios.get(url).then(response => {
document.getElementById('products').innerHTML = response.data;
});
},```
https://jsfiddle.net/k8Lj4asb/1/
This is not the proper way to update a table in VueJS. By manipulating the DOM directly, you perform changes to the site that Vue doesn't track (and hence doesn't know about), which breaks reactivity.
The proper way to do this would be to store your list in a Vuex-Store and perform the update in there. I recommend reading up on the topic using the excellent documentation provided here: https://vuex.vuejs.org/
I would pass the object of products to javascript, Laravel has a package for this https://github.com/laracasts/PHP-Vars-To-Js-Transformer by Jeffrey Way.
Edit: oh cancel that, it looked from your broken fiddle you were trying to do something different.
In your axios response handler just update a data property for products with the response data. Then loop that property in VUE, no PHP side loop required.
<td v-for="product in products">
<input v-model="product.id" type="text" :name="product.name">
</td>

how handle forms Reactjs

Which is the best way to handle a form in react?
I'm starting with react, and when I search how handle forms the options that I found are by refs or with states, and events to update state and it is fine but when there are more than 10 fields? I need to get the value of each input to build a JSON because I'm working with an API.
Then which is the best way to handle a form in react? JavaScript? jQuery?
and even if a need to hide and show elements and other things.
You might want to consider using some library to handle your form e.g https://github.com/jaredpalmer/formik

Learning jQuery - triggerHandler issue

I'm having a lot of success in developing a bookmarklet to fill in a complex form with default values. All of the text/textarea fields are now saving correctly with the following jQuery code:
$("#frm_PatientGoals").val("To get stronger.").triggerHandler('focus');
Unfortunately, if the field in question is a checkbox or radio button adding the .triggerHandler doesn't get the job done. Here is an example of one of those elements:
$('#frm_hsResWeak').prop('checked', true);
This page will correctly store the .val data provided thanks to the .triggerHandler but the same is not true for the .prop for the checkboxes of which there are numerous that I would like to set.
Thanks in advance for any feedback. I'm definitely a JS and jQuery noob, but would like to learn more.

Categories

Resources