How to disable a jQuery function after it is called ?

Question

I want to disable the working of a jQuery function. In my page I have a login form. After login success, it disappears and the main page is shown. But if I refresh the page, it again shows the main form. It is because all of my contents are in 1 .html file. I made all of them display: none; and after login jQuery runs the .show() method.

Is there any way to disable this function after calling? Or should I add all my content to another .html file and then after login show in page?

Or how can I use header("Location: main2.html"); function in jQuery?For including another page in main page ?

Answer 1

JavaScript does not survive page reloads. The same applies to HTML and CSS. If you want to keep a value during a page reload, this can be achieved by using cookies.

In your case, you could store in a cookie if the user is logged in. If you reload the page, the cookie-data is still there. Then you could read the cookie-data and determine if the user has already logged in. If so, you can show the main-page immediately.

Answer 2

To answer your question directly, you could use:

$.fn.show = function() { return; } // Or similar

to disable $().show() from working ever again... but this will get wiped when the page is refreshed anyway.

However, I would avoid this approach!

Another approach would be to write your markup so that the log-in form starts hidden with display: none somewhere in its CSS. Then, use this code to show it when someone clicks the login button:

$('#loginbutton').bind('click', function() { $('#loginform').show(); }

In this manner, the form should never appear unless the user requests it.