Trying to think of a good solution to this issue, I am trying to create a Form which would exist on multiple pages. At one point if you press an option on one of the buttons on page 1, it will bring you to page 2 where you select something, and then go back to page 1. The issue I am having is writing the code so that it will rember what was currently on page 1, and can pass the information from page 2 to page 1.
I am assuming I am going to have to use some sort of state management system to pull this off, but honestly have no clue. RIght now all I use is react native flux for navigation for page to page.. and thought about just passing everything as props.. but that seems clunky
Any help would be awesome!
Well, if your form is simple and you do need to have multiple screens, I see no reason not to use the props injected by react-native-router-flux. But if you are looking for something that can scale a bit better, why not try to put your form data in a temporal object inside your state manager. For the sake of the example, let's say redux. Create a reducer that stores an object with all the form data, and bind your different screens so that they can access it. Then, through actions, update the values when the user inputs something. There might be a few tricky edge cases, such as clearing all data when the form is submitted, what happens if the user cancels the action, etc... Sure, it looks a bit cumbersome to handle data in such a way, but I think it could be a nice solution.
Related
I'm trying to build a dynamic form where the data sent from the server will be rendered by the client. The form will have X amount of steps, decided by the data.
I have my component Form rendering X amount of components Steps.
My problem now is that since it's all the same component, Form, there's not possible for the user to click on the back button to go to the previous step in the Form. I somehow need to keep my URL in sync with my Form/Steps.
What would be the best solution to this problem? Using HashRouter and using Route with "/:id/:step"(how would this work)? Pushing the routes in automatically using useHistory-hook?
The most simplest case as I think is to create parent component with state step and change it when a user go or return to step. Based on step you should render the appropriate step.
A css solution would be to break the form into sections and show 1 section at a time, when some one clicks on the navigation buttons of the form a state update triggers another section to be shown while hidihng the current one. This can be done using CSS transitions, you can look into react-transition-groups to make css transitions with react easier
I'm having some difficulty envisioning a potential solution to a dilemma I'm facing, and I need some creative inspiration.
Essentially, I'm struggling to picture a good way to validate a form that can be thoughts of as having multiple nested forms. The challenge is that these nested forms are only rendered when a line item in the main form is clicked, causing a modal to open, at which time the rendering, model binding, etc. takes place, and the nested form can be validated.
The goal is to know whether or not there are validation errors down inside any of the main form's line items without having to open/render a modal for the item to find out. I'd also like to make sure that there's no duplication of validation logic, and that things are drawing from a single common set of validations rules that can be shared/accessed everywhere needed.
Ideally, I'd like to abstract out the validation logic such that it can be used by any ng-model bound element, but can also be used independent of rendering a form.
If anyone knows of any plug-ins that work well with AngularJs and sound well suited, please let me know.
Clarification
Though I'm open to checking out any plug-ins that might help, that's not really what I'm after. My main objective to is to find a way to validate my nested item data without opening/rendering the item's modal.
I would use something that ensures that the user fills in these forms in a predefined format in the first place.
I use something called inputmask in my angularJs applications.
You can use a regex to define the format you want the inputs to be in.
You can also make sure that all the fields in the modal are in the right format before letting the user close the modal(This validation logic can come from a shared or common component).
Another option would be to make the modals hidden and not removed from the DOM so that the bindings remain even when the modal is no longer visible. You can add a red asterisk or something against the line which opens the modal to indicate errors in that modal's form.
My goal is to create multi screens in one single page.Depending upon the action the user will be able to navigate from one screen to another screen.I have shared the images below
When the user clicks on any of the categories ,it will navigate to a second screen.
While clicking back it will again comeback to the first screen without change in URL.I have tried creating a full page modal and could not achieve this kind of functionality.I am not sure whether it should be done as a modal with multiple screens.
Please suggest me any method I can achieve this.
What you are likely referring to is creating an SPA or Single Page Application. This can be done through 'Vanilla' JavaScript at great effort or via one of many JavaScript Libraries or Frameworks.
Reactjs, Angular and Vuejs are probably the most common.
IF you were to use Reactjs then you could use what's called React Router. React Router would do what you want to do very easily. Doing it in Vanilla JavaScript would require a great deal of work or it would be very ugly.
However you did ask, so one way of doing would be to use JavaScript to load an iFrame or to make a top level parent element display: none and another to then display:...
Also if you are thinking of something less hacky, but not something as sophisticated as React or it's peers, then check this link out for a relevant article. Perhaps it's a path forward that you would prefer.
https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng
To help rookies like me, you can make a single page app or SPA, or a dynamic page that updates based on user actions with a single URL, in vanilla Javascript. You don't have to use a framework.
There are 3 concepts you need to understand:
The server doesn't see past the # in the URL
You need to tell your code what screen you want to display. Normally you would have URL.com/page-you-are-on and click a link to go to URL.com/page-you-want
However, in a single page app, you don't go to different URLs. So how does it work? You use a fragment identifier or a pound symbol. #
The # in the URL doesn't get recognized by the server. So URL.com/page#page1 and URL.com/page#page2 to the server is the exact same URL.com/page.
So you can use the URL to indicate to the server what page you want, in your single page app.
A Router can decide what to show based on the # URL fragment
So your page loads at URL.com/page#page-you-want. You need to inspect the URL and get the piece past the #. You inspect the URL, and split it on the #. That means you get page-you-want. Your code then uses that to decide what content to display. The function or file that does this is commonly called a router because it routes to the file or function you want displayed.
Once you know what to show, dynamically update the DOM
This is where the magic happens. Your website looks at the URL, gets everything past the #, sends it to function that decides what to display. You now need to display it.
The DOM has lots of functions and methods that help it update and create various things. It could be as simple as this:
function displayPageAbout() {
// the router calls this if the URL is URL.com/page#about
let pageSection = document.getElementById('pageSection') //this is where the page will be displayed
//create the div and give it content
let page = document.createElement('div');
page.textContent = 'This is the About Page'
//add the div to the spot on the page where the content should go
pageSection.appendChild(page);
}
That is basically it.
If found these two examples and tutorials useful in understanding what it is, and how it could work.
https://blog.jeremylikness.com/blog/build-a-spa-site-with-vanillajs/
https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng
Good luck!
I am working on an old legacy application which used document.forms[index] approach to access elements in the form and to submit the form. My task is to add a new top panel with few textboxes and buttons. I am using a form for this. This top panel is to be included in all the pages in the application. Now, all the pages stop working since form[index] needs to be updated in all the pages. I know using the form name is the best approach. I have around 1000 places to change. What is the best approach to avoid this problem? I still want to use form for my top panel since I am using spring forms to get the data. Any valuable advice will be appreciated. Thanks.
If you looked up the definition of "unmaintainable", that would be a good example.
One trick might be to leave one set of forms, hidden, with the legacy stuff in them, then make another set, lower in the HTML, that the user sees. Then use some JavaScript to map the data back into the original forms in order to continue to work with the expectations of the legacy code. This keeps everything in the same index-order.
I can almost always find an answer searching stack overflow, but after many hours, I have come up blank. I am sure that I am doing something that should be easy, but complicating it for myself.
I have an "orders" index view with an AJAX search, sort and pagination. It's all set up based on this screen cast. Works fine.
However, I would like my users to be able to click a link to another page, which will be set up to print the results of the search, without the navigation, pagination, etc.
It seems the best way to do this is to have the new view perform the same search as was already performed on the index page.
I have created another route, action and view called print_list that is basically the same as the index page, but without the pagination, etc. Not very DRY, but for the purposes of this mockup, it's acceptable.
The question is how do I pass the AJAX search parameters to the other view? Basically, I need to pass the params into the link_to helper.
So for example:
<%=link_to "Print List", print_list_orders_path(:cat =>"name ", :search => "er", :range => "Forever") %>
renders:
Print List
...and that works fine, and passes those parameters. What I need is a way to be dynamically updating those params as the AJAX calls are made, and the Index page is updated. I could write a jQuery bit using:
$('.myLink').attr('href','/orders/print_list?cat=name+&range=Forever&search=er">');
and call it everytime the AJAX updates.(of course I would have to add the CSS class for that, obviously) However, that does not seem like the best way to do this, what with the hard coded path and all. Is there a more Railsy way?
I was also thinking that later in my development process, I wouldn't mind being able to save searches, so a method that could also be used to save the search for reuse later gets extra points.
Thanks for reading!
In case anyone ever has this problem - the solution is to use the rails session method, and store the search in the session.