This is user profile settings page: Box
What I would like to do is have the input fields enabled and disable them once the Save button is pressed.
After this operation "edit" button becomes enable and pressing it also the input fields return enabled.
1)Profile Page --> Form readOnly=disabled and "Edit" button=disabled --> Fill in form --> Save --> Form readOnly=enabledand "Edit" button=enabled.
When a user save his info:
2)Form readOnly=enabled and "Edit" button=enabled --> Click "Edit" button ---> Form readOnly=disabled and "Save" button=enabled --> fill in form...
I reread the whole guide on reactjs.org but I can't solve the problem starting from the theory. Without practical examples I can't learn and I haven't found any by googling.
I've replicated your desired functionality in a code sandbox and added comments to help you understand what is going on.
Please take a look here: https://codesandbox.io/s/youthful-rain-7nqwq?file=/src/Form.js
Let me know if you have any questions.
How to have read-only vs editing state:
You just need to have state to determine if you're editing or not, say isEditing - then set the fields disabled based on it. (Or swap the fields out for plain text displays or whatever)
The edit button would set isEditing = true, and the save button would set it back to false.
Related
I'm developing about questions with step by step and I got bug on radio button with param "checked" in reactjs
Problem: the user can next question and back old question, the problem when I stored data on state that user checked radio button, I mean the question has 4 options and user choose option 2 and click next question but user want to back old question then I need to checked option that user choose on step 1, but when I want to choose another option then the old checked don't disappear, can you read my code below?
My code handled like this
Anyone had saw this problem before?
The example on below
when I choose 1 options and next
when I clicked previous button and choose another radio
I am currently using Clickfunnels to build a checkout page.
Here I have a bump offer (an upsell that you can add to your cart ticking a checkbox).
This checkbox is inside a section where I can change colors and stuff, but I would like to accomplish this:
When I click on any part of the section (text, background, etc) I want the checkbox to trigger (on/off).
So if a person clicks on the whole upsell section, it can work as a macro button.
Can somebody help me achieve this?
I'm using a LayeredLayout to overlay a TextArea with a small button in the upper right-hand corner of the TextArea (the button is used to insert a time-stamp to easily date the manual text entries).
I want the small button to receive the events when the user 'clicks' on it and at also allow the user to click in the TextArea below to edit the text manually. However, when I use LayeredLayout, only that last added component will receive the events. Meaning either only the textArea is active and the small button cannot be pushed, or the button can be pushed, but the user cannot click the TextArea to initiate the edit. Hope the description is clear enough to understand.
As far as I could see, none of the other existing Layouts lends themselves to this case. Is there a way to achieve this?
Thanks in advance for any ideas or suggestions.
Both receive events when clicked, we use this pattern often. I'm assuming you tried to push the button while you were editing which is problematic since editing delegates pointer events to the native OS editing code.
See:
Form current = new Form("TextAreaButton", BoxLayout.y());
TextArea ta = new TextArea("Text of Text Area");
ta.addActionListener(e -> Log.p("Text is: " + ta.getText()));
Button b = new Button("");
b.addActionListener(e -> ta.setText(""));
FontImage.setMaterialIcon(b, FontImage.MATERIAL_CLEAR);
current.add(
LayeredLayout.encloseIn(ta,
BorderLayout.east(b))
);
current.show();
In the iPhone ADF mobile app I have a textinput field and a "Save" commandbutton. In the properties for the commandbutton I have the disabled condition set (like if the textinput field is null). This works fine. In the beginning the save button is disabled and when I enter any text with a keyboard the button is automatically enabled and vice versa.
The only issue is my users can enter the text via voice too. If they use the voice to fill the text field - still the save button is not enabled. As soon as they change anything using key board it is enabled.
How do I set the command button properties to check this please?
In the InputText properties there is a property called Value Change Listener,
add a java method to it to check if the value is null or not then try one of the below:
Reset the InputText value as this will fire the propertyChangeListner and may activate your button.
Disable or Enable your button in code according to the value.
Hope this help.
I can expose a DataGridComboBoxColumn on a grid, but the user must click it twice to show its drop-down list (the first is to gain focus and enter in edit-mode).
How can I force programatically to show the drop-down list?
Not the exact answer to your actual question, but since the issue seems to be the need to click twice, this blog post might help. It includes a sample to enable Single-click Editing in a DataGrid.