I have a ruby on rails app and I want to detect user moving to different domain page
while in model creating wizard.
I stored model-data to DB at first-step of wizard and redirect_to second-step of wizard.
And I want to destroy it if user moving to different domain page while in second-step.
I already find a way to hook onbeforeload event to show warning to user.
But I want to warn it only if user moving to different domain page but not to third-step.
And if user want to moving different domain page then I want to destroy stored data.
What is a best solution to do this? Is there any way to detect where user want to go?
EDIT:
In second-step I want to create model from user upload file(ajax upload with jQuery File Uploader) and associate with first-step's model. So if I can get which id will assign to first-step's model then I can easily associate with it. This is why I want to store data in first-step.
And I don't want to expire unfineshed model until user explicitly leaving wizard.
Then can I detect whether user still opening wizard and just stopping very long time or
already leaving wizard page?
(I want to build app just like a desktop application so user can have unsaved file until explicity leaving wizard on multiple browser window)
That's is not possible. Once your page is unloaded you cannot do anything else. If the user is loading another domain page then that domain has control over the page, not you.
What you should do is store the data of the wizard pages not in db but on session state or even in a cookie, this is the good practice. Then, when user reach the final step of the wizard you read the data from cookie/session and write to db at once.
You cannot determine the user's intended destination within the onbeforeunload event, or any other. You also can't stop a user's request to load another page and instead redirect them to some destroy action before sending them off on their way.
If you are content with storing data into the database on each step as the user progresses through your wizard, you can look into setting up a cron job to run a rake task you create which can go through and delete incomplete wizards that are older than a certain age.
The cron (or equivalent) actually is something I'd consider doing even if you could detect a user leaving your site.
Related
I have a single webpage that uses an API to query backend for data, which is returned and plotted in a few figures. Backend is Node.js with Express.
The appearance of the figures is controlled through a set of JS functions that are loaded when the page initially loads.
After the user has been on the page for 30 seconds, I want to ask them to login or register by displaying a modal over the page.
If the login is successful, I'd like to close the modal and have new functionality available to the user, including changing the behavior of the original JS functions that were loaded when the user first arrived. But, I'd like to do this without reloading a new page with a separate set of JS functions.
I'm a relative newbie at this and have been having a hard time figuring out the right way to accomplish this.
I thought maybe there was a way to update the original JS function file by submitting an API get request and using the response to overwrite replace/overwrite the non-authenticated version. Then user would have access to new functionality without having reloaded the page.
But, I can't seem to find anything that would support this as the correct approach, or even whether this would be possible.
Really need help on which direction to go.
I've been building a web app using Google's Firebase as a backend (for those who don't know, it's a Realtime database; any changes in data are reflected instantly and updated), there's other people working on the Android app with it so there's no other option (plus it's kinda cool). I was surprised that I have yet to write a single line of php or any server-side code. Anyway, jQuery is working perfectly fine for login and stuff.
Now I'm going to be making an admin page (with a separate login from the main users login). It'll be accessed in a completely separate way (by opening something like /admin.html). So the login can't be put on a separate page so people don't 'accidentally' access the admin panel by writing /admin.html in the address bar.
So I want to stop the admin page from completely loading until I've received confirmation from Firebase that the credentials are correct. So how can I achieve this knowing that both the login and the whole admin page needs to be in the same file. I'm positive this can be achieved with simple jQuery + Bootstrap but I'm not really sure how. Can anyone please point me in the right direction. Thanks in advance!
I have googled it of course but maybe my wording is off? :P
If I'm understanding your question correctly, your problem is that you need to create two separate views in a single file, and redirect to one or to another depending on your user "session", however, as all your code is in client, you don't have a "session" system operative.
Ok, there are several options you can take. I like the idea of using LocalStorage to store the user session.
When /admin.html is requested, your code checks for a valid session object (keep in mind that you'll need to define that session object) in the LocalStorage. If there is a valid object, you render the admin area, if there isn't any, you render the login area.
When someone sends username/pass to the database and you receive a valid response, you create a session object, store it in the LocalStorage and reload the page.
Keep in mind that you'll need to create a mechanism to make sessions die and a log off view.
For the dying sessions, as an idea, you can store the creation time and a expiration time in the session object. Each time a "session protected" page is served, when you check that the session object exist, you update it's expiration date a fixed amount (20 minutes plus current time, for example).
So, when you check if exists a valid session, you also check that it's expiration date has not due, and if it's, you delete the object.
I have a situation where I have a page with tabs to hold multiple buttons for various functions. Each tab is for a different set of functionality (e.g. customers, orders and admin).
The way it was originally designed was I load all of the tabs and all of their buttons. The buttons shown is dependant on who is logged on.
Additionally, if a user clicks on a function it loads the code for that page, replacing the buttons in that tab as well as all of the code for the other tabs. I don't think this is very efficient and I would guess it would be better to load the content for the tabs using AJAX.
What would be the best way to accomplish this behaviour and make the code more responsive? My thought is that I would store the html that goes inside of the tab divs in the session variables, so I would only need to get the code once when the user logs on and then just serve it back to the user based on the currently selected tab.
To save on session you must have on your mine that:
The session data are saved all together, and read all together on the start reading of every page load, and write all together on the end of every page read. And the session lock all users, so if you add too much data and create a delay to read and write on the session, this can possible affect the users on your site. Imaging to create a big html page data that you save on session and its about 300k, and then you make the same 10 times, then the session data will be 3M that must reads and writes all the time.
So its like to add an extra data that follow the user session.
Its better if its possible to make your custom cache on a database, and save this just using the session key id, and load them only when the user enters that page, save it only when user change it.
From the other hand if you do not have many users, and you need to make it quick, or you do not have database connection, or is difficult to make a small custom cache, then use the session for one or two data of that.
Certain websites (notably Facebook games) have a step by step tutorial for new users, where JavaScript is used to create a pop-up which tells the user where to click next and what is happening.
How does one create such a system? What sort of architecture is required?
I suppose that a script is loaded if a flag is a tutorial flag is set, and that stored within the user's state there's a 'pointer' which indicate which step in the tutorial the user is at. That script would echo out the relevant JavaScript for pop-ups and highlight and whatever.
The question, I guess, is how does one detects when the user has performed the required action and that the tutorial is to proceed to the next step?
On Edit : The 'action required to proceed to the next step' could involve the user clicking on a link itself, or submitting a value through a form. So the state must be able to persists and the script must be able to detect interactions on different UI elements throughout the page.
I think solution will depend on which technologies you are using.
Simply - you can store user's tutorial progress in a cookie file, and on each his action (e.g. button click) call javaScript handler, which will update it's status.
You can prototype your tutorial as Finite State Machine. I think this tutorial data presentation will be very helpful.
Is there an accepted pattern for tracking that a page is being loaded by the same tab/window?
There are certain processes (like stepped submission processes), which can greatly benefit from a ability to verify that the same tab is asking for execution.
For example, there are places where (between steps) we store intermediate data in memcache, but this can cause a problem without the ability to scope that data to this process, as opposed to if the user opens another tab/window on the same process.
This holds true for many actions/processes.
Some brainstorming has not come up with anything dependable.
Ideas anyone?
You could maintaining the state of a multi-step process using query parameters (if you use GET requests) or hidden fields (if you use POST requests) or both (if you POST-then-redirect, to allow the user to refresh her browser).
If you maintain state on the server (e.g. in a DB or memcached) you could just keep a "transaction key" in a query parameter or hidden field.
Be wary, though - in my experience, it's possible to design such a stateful multi-stage process fairly cleanly, but it may be tricky to implement and to maintain a non-surprising user experience. For example, what happens when you move back and forth between the stages? You could allow this explicitly, or the user could use the back button, but the process should still make sense.
EDIT:
As a concrete example:
User clicks "Start multi-step process", which does a POST to the server
Server then
initializes state for a process
gives it unique key "A"
keeps it in a temporary store (e.g. memcached)
redirects the user to "/process/A/step/1"
The next step for the process would be "/process/A/step/2"
User, in a different tab, clicks "Start multi-step process" again
Server does the same but
uses a unique key "B"
redirects to "/process/B/step/1"
The next step for this second process would be "/process/B/step/2"
The two processes now have independent server-side state