I'm working on a site where the user can navigate by using a menu system. I have my save function firing on the componentWillUnmount. One page in particular allows a user to set a field where they can define a number. The next page generates a bunch of text fields corresponding to that number. The problem is, the second page loads before the first page has finished saving. So if page 1 initially has a value of 1 and I change it to 2, the second page will display 1 text field initially, forcing me to refresh the page to see the correct data.
Any ideas or help would be appreciated!
Related
I'm building a react js website that has three pages of inputs
the last page should have all the data entered in the previous pages
it will be a summary of the data
for the first three pages i have been using use state and handle submit in order to show the data in the console log
now I want to gather all the data on one page and it should be displayed on the last page
not in the console log
what technique should I be using?
option 1 :
in each page, save your data to localstorage and in the last page get your data from local storage (then delete it from local storage).
option 2:
pass your data as props; pass data from first page to second page then pass data of the first page and second page to third page....
I am making a web app in which I have a section which has an input field. Anything that is submitted through the input field gets posted to an API. So when you land on that screen you see all the previous inputs made. What I am not able to figure out is and the thing I want to achieve is that when someone submits a new input it doesn't reflect in UI until and unless you go back and come back to the screen. I want that as soon as you send an input the input string should be reflected in the UI. How can this be done using AngularJS?
You have two options, at a very basic level they are:
1) The first is to re-query all the list when the item is saved:
api.save(newPost).then(() => getAllPosts());
2) You can return the recently saved post and add it to the list:
api.save(newPost).then((saved) => $scope.posts.push(saved));
You'll need to handle all the unwrapping (etc) based on how you're making the calls.
We have a web app composed of several pages containing links of data retrieved from database. Upon clicking one link[data], the user should be directed to another page. For navigation between pages, we have used breadcrumb. The breadcrumb is stored in redux store. Currently, when the user tries to ctrl+click or open link in new tab, we managed to use single store across multiple tabs. Hence, if the user opens 3 separate links [data] in new tabs, the updates made on the breadcrumb affect previously opened tabs when these tabs/pages are refreshed. For example:
In homepage, I have these links:
Data_1
Data_2
Data_3
Current breadcrumb in the homepage is like this:
HomePage/
Once the user opens Data_1 in new tab, the expected breadcrumb in the new tab is:
HomePage/Data_1/
Similarly, if the user tries to open Data_2 and Data_3, in new tabs, the breadcrumbs should appear as follows for tab 1 and tab 2, respectively:
HomePage/Data_2/
HomePage/Data_3/
In the current implementation, I managed to update the state of breadcrumb whenever new links are opened such that breadcrumb[0] would be equivalent to HomePage while breadcrumb[1] was initially Data_1, then became Data_2, and lastly Data_3. Hence, the last value of breadcrumb[1] is Data_3 since that's the last opened link. My problem is that whenever the user refreshes previously opened tabs/pages corresponding to Data_1 and Data_2, since they are all using a single store and breadcrumb[1] has been changed to Data_3, the breadcrumbs in Data_1 and Data_2 pages also become Data_3.
In this case, I can just think of using multiple stores since I perceive that it could be the only solution given my use case. Meanwhile, I can't find any sufficient documentation online regarding using multiple stores in redux. Maybe I can pass the store to the next page in params...? something like that
Can someone please help. Thanks in advance.
To emulate per-tab same site persistency, I would, right before the page is about to be refreshed (window.beforeunload or similar)
1 - Write to localStorage about my breadcrumb
2 - Refresh
3 - Read from localStorage about my breadcrumb to initialize myself properly (so the data here SHOULD be mine because i just wrote it)
4 - remove breadcrumb information from localStorage (to prevent other tabs from reading it)
Now, you still have the case where the user just closes the tab, so you would have stale data about the breadcrumb in your localStorage. You can add a little expiration mechanism (you might consider that data in the localStorage older than 10 seconds is stale and just pretend it isn't here and delete it at step 3.) Cookies would work pretty much the same, with a built-in expiration mechanism.
In my form if i enter numbers rather than text and it will give an error then after clicking on next button it should not be redirected to next page.
how to prevent this.
The clicking on the next button will execute a validation function, and based on the result, you will decide whether to navigate to the other page or display an error and stay on the same page.
Even better (and assuming that you have multiple fields in the form): check the value of every field when the user leaves the field (onBlur) and notify the user about the error immediately then. This is not instead of running validation on 'Next' or on 'Submit', since the user may click on the button without visiting that field.
Long time ago (as a test for me, during my study of react), I created a small project that implements a form. It is far from perfect, but you might find it useful: https://github.com/rahamin1/reactstrap-form
I have a main page (main.jsff) where the header, footer and the menu is the same for all pages. which changes every navigation is the region.
The other pages I have (.jsff) correspond to fields of research and a table of detail. In search fields (inputText) added a autosugestbehavior. However when I am in one of the pages, eg bookingSearch.jsff and test to see if the autosuggest works it changes the page after you enter a letter.
Always go to the main page.
I checked the code (bookingSearch.java) and not have anything to point to another page. I think the problem is in the tasks flows.
Does anyone know?