When purchasing a course, the user can enter 1 or more students to register for the course. By default there is only one entry but the user can use a dropdown to select more and then the form will update to show more.
I am accomplishing this by triggering an event when the user changes the dropdown value that uses ajax to call an action which returns a partial with the appropriate number of entries and then I just replace the existing div with the new one.
My question is whether there is a way to implement this so that it's kind of like "refreshing" the page where the form remembers and automatically refills in he values the user already entered just like if you were to refresh the entire webpage. Is there a way to do this, or will I need to pass in the existing values into the action in my ajax call and have the partial set them?
A secondary question I just thought of (and perhaps this should be in another post but I will go ahead and put it here for now) is whether I should be concerned about any weird behavior with validation when doing it this way? (I'm using stock, built in validation with annotations).
Related
I have an add contact Modal and an add company Modal. When the user wants to add a contact they click the corresponding button which opens said Modal. Typically, they would fill out the information needed on this form. One of them being a Company they belong to. If the company does not exist in the system, they then have an add company button which when pressed opens another Modal on top of the contact one.
Again, the user enters the information for the company and once done, would tap save. This would then trigger a fetch which POSTS the information to my Spring Boot backend which in turn sends back a JSON object version of the company which has come from the database.
I then check it and if it comes back valid, it sets out an alert telling the user it was successful and closes the company Modal.
At this point, the user should be able to type the company name into the contact company autocomplete and find the company they've added.
However, at this point, that is not happening. The re-fetch is not triggered at all despite me thinking that when the Contact Modal is re-rendered it would trigger the re-fetch.
I've tried clearing the contactList within the return() function but this causes a Too many re-renders error.
My question is, how would I trigger a re-fetch from within the contact list once it has returned from the company modal?
My initial thought would be to not have more than one modal open at the same time. Feel free to disagree but that doesn't seem like that's how modals are intended to work. As an alternative, you could have an "Other" option and have a set of text fields conditionally appear. Upon completing the form, have a boolean variable (or however you want to do it) be passed into your backend that kicks of the business logic that creates a new company before adding the contact. Or add all that logic to your add contact SQL procedure to avoid making (a risky) two db calls for one action.
Refetch Problem
Without looking at your code, it's possible that if you're using the useEffect hook, you aren't passing any dependencies to "listen" for certain variables that have been changed. After the data comes back from that POST call, you should add code that updates the array populating the select company dropdown field (eg .then() callback)--assuming it is a dropdown and an array. This change in state should re-render the component but, for a better user experience, you may want to do it in a way that it doesn't blank out the rest of your fields.
You are probably using useEffect which makes the loop.
Try to connect refetch with an event - click or submit, within try/catch - via 2 way binding eventHandler prop that calls praticular function.
Also you can change the state, and refectch the results after the new loading of the page. Hope it helps, even as a hint!
We currently have a form to sign up for our services on our page. It doesn't actually submit; we prevent the default event and then run through a series of checks, make an AJAX request, and redirect to a thank you page (or display an error message/try again).
We then decided to add the form two more times (once at the bottom of the page and one more time popping up in a modal). Is this inappropriate?
In our current state, we have the error of multiple elements using the same ID. Knowing this is bad, I've found a workaround: Possible to associate label with checkbox without using "for=id"?. The problem is even without the ID error, I'm not entirely sure having three of the exact same forms on the page is appropriate still.
How should I handle duplicate CTA's on the same page?
I have a form where a user can select a number ranging from 2 to 10. Based on the selected number I'd like to redirect to '/mypage?number=[2..10]' like the way Laravel's redirect() function does. Thus, flashing the old input values to fill the form accordingly. Based on the $_GET['number'] parameter a for-loop is executed printing 2 to 10 input fields.
How can this be done in the most efficient (and meant to be) way? Or do I have to set up a new route like Route::post('mypage/{number}', 'myController#redirectMethod')?
You are probably over-thinking this. If this is in a form, just have the form action be /mypage and set the name of the select to number and the form's method to get. When the form is submitted, it will bring the user to the page. If you'd like it to auto-submit when the user modifies the dropdown, you can submit the form programatically via js/jquery $('#myForm').submit().
There should be no need for additional routes just to handle the number parameter. Use \Input::get('number') to grab the value on the server side.
How will the javascript get {number}
all you need to do in the javascript
location.href
1) Either redirect should take place on the server - when you send params on sever and it brings you the right page or redirects you to the right page.
2) Or you need to generate javascript in laravel_blade and set this logic in the Javascript. Say, generate input fields with extra data- attribute and make javascript to handle this attribute.
3) Or maybe, avoid redirects at all and make javascript generate variable amount of input fields on the same page judging on data-attributes of the button that was pressed.
Currently, if I populate a form and leave the page, the form entries will still be present when I return to the form. Is it possible to prevent these entries from being saved?
The items' default values are populated using PS/SQL, but the content can be adjusted.
I tried creating a dynamic action to clear the items on 'Page Unload', but this didn't do anything. Is this the correct browser event, or did I simply get the implementation wrong?
Update: To provide a bit of context...
Pages:
Home
Form
DML Form (insert) - I want any modifications to not be stored
Page 3 can be accessed via Page 1 or Page 2.
If the user accesses the form via Page 2 (a different form), they will have selected a specific value and this is used to populate default values on Page 3 (via item and PL/SQL Function Body).
If the user accesses the form via Page 1, the same PL/SQL will run - this may result in Page 3 form items being empty (NULL default values).
HOWEVER, when the user edits Page 3 items (changing from default values), these values will persist when the user next accesses the form. How can I prevent this state from being captured?
You will need to clear the cache of the page. This will clear the session state of the items on the page and thus result in items being empty once again.
You may need to add this clear on several locations. If you have used column links to access the page, buttons with redirects, branches, etc. The apex URL has a part which states which pages have to be cleared, and you can generally define this clearing of a page cache declaratively.
You can also create processes where you can define which page (or pages) has to be cleared. For example, if you always want the cache to be cleared when entering the page, no matter where you came from, you could add a process on the page doing just that.
Session state is ultimately what is causing this behavior: go to the page, change some things, page gets submitted for whatever reason and causes session state to be saved.
Usually, on DML forms generated through the wizard, the cache would only be cleared when using the "create" button coming from another location (usually the overlying report).
Here is the (apex 5.0) documentation on session state and managing it.
You can do it with something like this, but first you need to add jQuery to your page. I recommend using a content delivery network (CDN). You can edit the code to clear the value in your type of forms. I hope this could help you!
jQuery CDN example
$(document).ready(function() {
$("body")
.find("input").val("")
.end()
.find("select").val("-")
.end()
.find("textarea").val("");
};
});
I have a page where I need to filter certain values provided by an embedded widget based on user input in a text field.
I can do this by appending certain parameters to the widget code embedded on the page and refresh the page
How do I take the user input , replace the widget code and refresh the page?
this is the code I might need to append to the widget code that already exist on my page.
%22filter%22:%7B%22keyword%22:%22userprovidedvalue%22%7D,
I am using jsp
You should be able to handle it by putting an onchange on the input field, and sending it to a function that reads the value off of the input field. Alternately, you can have the submit button call a function, that first reads the value off the input field, then performs whatever logic you need, then submits the form.
Jquery is often useful for making things like this easier and more intuitive, though it does have a bit of a learning curve to ramp up.