How to stop triggering introjs after first walkthrough? - javascript

I'm using introjs.
But when a user ends the intro, then refreshes the page, introjs starts up again.
Is there a way to only show a walkthrough once per user?
For example I have it where when a user first signs into my website - introjs will popup. I only want it to pop up for that initial welcome.
Potential Solutions
Maybe there is a way to trigger introjs via the create action like one would with a flash message?
I could replicate all my header, sidebar, and challenges section code into pages/tutorial.html.erb and make a route www.websitename.com/tutorial, but then that would be a lot of code to duplicate and then whenever I change something in the site I would have to change it in tutorial too.
Is there a way to adjust this javascript method in application.js to trigger only once per user $(function () {
introJs().start() })?
I just use data-intro="" for each step of the walkthrough.

You want your application/webpage to remember that the user has already gone through your tutorial.
There are a few ways you can do that. For a start, you can use cookies or localStorage
The gist is that after the user finishes, or otherwise exits your tutorial, you can store a descriptive value to the user's client, by using one of the above methods, and on page load you should first check if this value exists and act accordingly.
EDIT: As mentioned in comments, you will need a server side approach as well.

Related

When the users are on the same webpage, is it possible that one user has clicked on a button and that will notify all other users?

Just like the title says. I want to create a shared online timer for my friends and say when one of my friends clicked the "refresh timer" button, ideally that all my other friends' page should get automatically refreshed with the new timer, or a notification saying that the timer has refreshed and require them to refresh the page.
I think at least the latter one is possible since when you get a comment of your question on Stackoverflow, you will get notified somewhere in the page telling you there's a new comment.
How to achieve this functionality? In JS or? Thanks in advance!
Javascript setInterval
using Javascript setInterval when the page is loaded, if you're not using MySQL, check a notepad for the text update(or whatever you want) and when it's found, clear it and then run whatever code
When the user presses a button, have it write to the file update(the same thing as above)
There would be 2 ways to go about it:
Simpler one would be to use polling through setInterval and look for changes on the backend.
A more accurate way would be to use Websockets which relay information to the clients that the timer has been reset.
Your choice of tool would depend on how complex you're willing to let it be

Allowing user to rearrange entries in Django admin site and how to store that new custom order to survive page refresh?

I have HTML and JavaScript in place that allows a user to move Django database entries (displayed in a table) up and down. However, is there a way that I can store this new order that the user has customized so that it will show up any time the user navigates back to that specific page view? I think get_queryset is what is causing the page (after refreshing) to switch back to the basic filtering. But, I have no good ideas on how to override it or avoid it to accomplish this task. Any help would be much appreciated!
I would suggest using ready solutions: django-admin-sortable or django-admin-sortable2. As for me, I have successfully used second solution and it works. One important note about it is to run ./manage.py reorder my_app.models.MyModel after adding new order field as mentioned here.

Save the state of page. Cookie or session?

I have a little web app (which only has 1 page) that allows user to input and select some options. The input texts and selections will be displayed in another div in the form of table. You may want to refer to the example here: http://jsfiddle.net/xaKXM/5/
In this fiddle, you can type anything and after you clicked submit it will get the text input and append them to another table #configtableTable
$('#labels #labelTable tr:last').after(addmore);
$('#configtable #configtableTable tr:last').after(displaymore);
I'm using cherrypy as a mini web server (and thus major codes are written in python) and i know that it has session here but i have no idea how to use it at all as the example given is not really what i want to see.
FYI, i'm not using PHP at all and everything is in a single page. i simply show and hide them. But I want the page to remain as showing #configtableTable and hiding #labelTable even after refresh. Note that the fiddle is just part of the web app which will only show all these after getting a reply from another device.
Not sure about cookie because all the links i've found seem broken. How about jQuery session? Is it applicable in my case? I need some examples of application though :(
okay, to conclude my questions:
1. can i save the page state after refresh? and how? which of the methods mention above is worth trying? is there any examples for me to refer? or any other suggestions?
2. can i simply DISABLE refresh or back after reaching a page?
Thanks everyone in advance :)
Don't disable Refresh and / or back navigation. It's a terrible idea - user's have a certain expectation of what actions those buttons will perform and modifying that leads to a bad user experience.
As for saving state, while you could use session or cookies, if you don't need that data server side, you can save the state on client side as well.
For example, you could use localStorage
Alternatively, you could create an object out of the data in the table, JSON.stringify() it and append it to the url like this: example.com#stateData.
In case of either option, at page load, you'd have to check if there is state data. if you find there is, then use it to recreate the table, instead of displaying the form.
The disadvantage of the first, is that not all browsers support localStorage.
The disadvantage of the second is that URLs have a length limit and so this solution won't necessarily work for you if you're expecting large amounts of data.
EDIT
It appears that Midori does support most HTML5 features including localStorage however, it's turned off by default.. (I'm trying to find a better reference). If you can, just point Midori to html5test to see what HTML5 features it supports.

.prepend() result is visible to everybody not only to the person making the action

I'm using the .prepend() action into a page when a user click on a button.
I think only the clicker can see the element being added into the list but what do for all the users already watching this page can also see it ?
PS : A good example is the friend news thread of facebook (in the right column) where one actuality appears for everybody.
DOM operations are purely in YOUR browser. Unless your JS code pings the server with an update on the actions, and your server pushes that data to any observers, there's no way for one user's browser to 'spy' on what another's is doing.
When you say other users, do you mean other users of the site?
If so then the answer is no. Only that user will see ANY change made to the DOM in javascript because the change is only happening on the local computer. This is true regardless of whether AJAX is used.
Here's a metaphor to help you understand. When a web site gives a user a page, it is like mailing a letter to that user. The person who receives the letter (html document) can make changes all day long and it won't affect anyone else who got a copy of that letter.
You misunderstand jQuery prepend(). It does not perform any AJAX. It will simply insert new HTML on the page. If it is passed an existing HTML element, it will move that element to the beginning of element that you are prepending to.
For example:
// this adds a new paragraph to the beginning of the main content div
$('#mainContentDiv').prepend('<p>New content</p>');
See the jQuery API for more info: jQuery .prepend()
Notice you will not find AJAX mentioned anywhere on the page except in a comment by Karl Swedberg, and he refers to the AJAX docs.
You will probably need to use something like jQuery.ajax() separate from .prepend() to make the server update for other users to receive the change.

Maintain View State After POST

I am creating a site that utilizes the jQuery UI tabs. Whenever the user flips between the tabs, the tab they just left is posted back to the server in order to save the state.
One of the tabs in particular is a bit complicated in that, if I select a particular data option, other options need to be disabled. However, because of the POST, those options reenable themselves in the view when I go back to the tab. The current solution I have found to fix this problem is to check to see if the specific option was selected and to disable the other options appropriately (which happens as the user flips back to the tab). However, this seems like too much work. I am wondering if there is any way for the disabled attribute to remain on the various options even through the POST. (If the answer is "No," I'll accept that, but I wanted to see if there was another alternative to ensuring the view is correct for the user.)
Edit: I wanted to add some code demonstrating the post that I am doing when the user switches tabs. (Particularly based on the responses.)
$.post($(form).attr("action"), $(form).serialize(), function (data, success) {
if (success) {
// Inject the resulting form back into the parent of the page.
var parent = $(form).parent();
parent.removeData($(form));
parent.html(data);
processTabAfterLoad(tab_index);
}
});
The processTabAfterLoad function does all of the selections and setting the state of the tab back to what it previously was.
If I were you, I'd take a different approach. It seems like your goal in posting back to the server when navigating is to preserve a user's location in an application so when they return, you can restore this state. Rather than reloading the whole page through a POST, what you could do instead is do an "AJAX" post to tell the server to store the user's UI location but do all of your UI enabling logic client-side. That way, not only will UI transitions look smoother, but you'll reduce server load and make the application more responsive.
It'd only be when the user does the initial GET of the page that you'd need to look up the last-known UI location. If there's something stored for that user, you would add logic to set the UI's initial state when the page loads.
Update:
Indeed you are doing an AJAX post, but you're also apparently inserting the HTML response from that post into your UI. That is a somewhat unusual pattern (excepting ASP.NET update panels). Typically, you'd either POST the data and expect no content in the response or you'd receive data back from the post which you'd apply to the UI rather than receiving a fragment of the UI.
If you're committed to the way you're currently handling form submittal, you could look into the jQuery live function which can apply changes to elements as well as newly-inserted elements that match the criteria.
Tabs are usually navigation techniques. Imho, its a bad practice to postback and redirect when a GET (i.e. an ordinary link) would do. A GET resets viewstate back to a known point, is a small payload, doesn't require a page life cycle that gets discarded anyhow before the redirect, etc.
I could also be completely wrong here-- I'm making some guesses since I can't see any code.

Categories

Resources