Develop Reference

How to replace content of div tag using JavaScript on back button?

My question is almost similar to question question here.
I am have a standard sidebar homepage, which executes ajax to replace text inside a div tag and show context. All works fine except the back button. The back button redirects to login page.
These are the things I tried : (I am using servlets)
Without any javascript, user is sent to login.jsp on back button, (session is not invalidated).
I have written code in login.jsp to redirect to homepage when user is already logged in.
access = Integer.parseInt(session.getAttribute("access").toString());
if (access == 1) {
RequestDispatcher rd = request.getRequestDispatcher("ajaxContent?url=homepage");
rd.forward(request, response);
//ajaxContent is the servlet loads the sidebar. With the content of homepage in div tag.
}
But back button just displays the previous page, so the java code to check session is never executed.
I tried to add a onbeforeunload function to alert the user on back button.
window.onbeforeunload = function () {
return "Your work will be lost.";
};
But it also displays the alert when saving forms saying "Your data will not be saved", well, that's not a very good way to accept forms, right?
Lastly I tried history.pushState function to replace the history when ever the ajax function is called.
window.history.pushState({}, 'Previous','www.example.com/ajaxContent?url=homepage');
But that just replaces the url in the browser but doesn't load the page. On multiple clicks, it displays login.jsp again. (obviously)
I also found this page which has source code to disable the back button entirely, but I would prefer to make the back button the replace the div tag with the previous content that was in there.

Javascript client & asp.net event handler timing issues - how to solve?

Simple web site with master page and multiple child pages.
In page_load, master page looks for session variable containing a value and if it's there, uses
Page.ClientScript.RegisterStartupScript(this.GetType(), "SessionAlert", "SessionExpireAlert(" + sessionTimeout + ");", true);
This kicks off a timeout alert, which works fine.
There is a server-side button on one child page that effectively ends the user interaction on the page and leaves a message stating "go and log in again if you want to do more stuff". When this button is clicked, I want to clear out the session variable (easy) and end the running timeout warning alert script (not so easy).
As the Master "page_load" event fires BEFORE the button handler, at the time the page reloads, it restarts the timeout script. When it hits the button event handler and clears the session variable, it's too late as the script is already running.
I've tried using "registerclientscriptblock" to inject immediate javascript to call the "clearTimeout()" client side function I have, but it doesn't seem to be able to find the function which exists on the master page and errors.
This seems to be a classic "chicken and egg" scenario and I can't see the wood for the trees. Could someone please point me in the right direction here before I drive myself mad!?
edited to add bit of javascript code:
Currently the master page function "SessionExpireAlert" referenced by the page_load code contains among other things this:
window.updateInterval = setInterval(function () {
seconds--;
document.getElementById("idleTime").innerHTML = convertTime(seconds);
document.getElementById("expireTime").innerHTML = convertTime(seconds);
}, 1000);

RegisterStartupScript will add the script to the end of the body, so the DOM is ready when it runs. As long as you always use RegisterStartupScript after that then the scripts will be added and executed in the order you create them.
Basically, RegisterClientScriptBlock is most likely going to place the script before any scripts added with RegisterStartupScript.

Have you considered putting this in Page_PreRender instead:
Page.ClientScript.RegisterStartupScript(this.GetType(), "SessionAlert", "SessionExpireAlert(" + sessionTimeout + ");", true);
With an appropriate check first to see if it is necessary?

How to run a Javascript program automatically after page refresh?

I am wondering if it is possible to have my program which ends with a page refresh, automatically run again after the page refreshes.

call the function(s) you want to run.
function doBusiness() {
// the business
}
doBusiness(); // leave the program where it is but make sure this is outside of any function that isn't called right away
If you don't want to do business the first time the page loads, look into sessionStorage, good starting point is mozilla doc. cheers

You can use:
<body onload="yourLoadingFunction()">
or
document.onload = function(){
//your code here
}
Any of these functions should be included in your tag in your page.

jQuery reloaded content calling functions from main page?

I have a page that refreshing part of the page every 10th second, and the reloaded content is using php to do a check in mysql database. If some cafeterias are met the refreshing should stop until a new button is pushed / function is called from the new content. My idea was letting the refresh function be controlled by javascript boolean but I cant get it to work.
In the main page I have the refresh function
var update = true;
function autoRefresh_div()
{
if (update)
{
$("#messagebox").load("include/messagebox.php");
}
setTimeout(autoRefresh_div, 10000);
}
function messageboxClose()
{
update = true;
$('.messagebox').hide();
}
In the php file that is loaded except from connection to database I have a link that calls function to hide this div and also enable refreshing again.
Hide
And also a script that disabling refreshing
var update = false;
The problem I have is that calling the function in the main page isn't working. When refreshing update variable is set to false and refreshing content stops. But when I click the link it doesn't start again. It seems like the sub page cant access the function on the main page. Is there a better solution to this?

Detect first page load with jQuery?

I need to detect the first time a page loads in jQuery so that I can perform some actions only when the page loads the first time a user navigates to that page. Similar to server side code page.ispostbasck. I have tested $(document).ready and it fires every time the page loads so this will not provide what I need. I have also tried the jQuery Load function - it also fires every page load. So by page load an example is that I have an HTML input tag on the page of type button and it does not fire a postback (like an asp.net button) but it does reload the page and fires $(document).ready
Thanks

You will have to use cookie to store first load information:
if (! $.cookie("cookieName")){
// do your stuff
// set cookie now
$.cookie("cookieName", "firstSet", {"expires" : 7})
}
Note: Above example uses jQuery Cookie plugin.

An event doesn't exist that fires only when the page is loaded for the first time.
You should use jQuery's .ready() event, and then persist the fact that you've handled a first time page load using your method of choice (i.e. cookie, session variable, local storage, etc.).
Note: This method will never be fool proof unless you can store this information at the user level in a DB. Otherwise, as soon as the user clears their cookies, or whatever method you choose, the "first time loaded" code will fire again.

I just ran into this problem and this is how I handled it. Keep track of the first time the page loads by using a variable initialLoad:
var initialLoad = true;
$(document).ready(function() {
...
...
...
initialLoad = false;
});
Then in other functions, you can do this:
if (initialLoad) {
//Do work that is done when the page was first refreshed/loaded.
} else {
//Do work when it's not the initial load.
}
This works well for me. If the user is already on the page and some jQuery functions run, I now know if that user just loaded the page or if they were already on the page.

The easy solution is to use jQuery ‘Once’ plugin
$(element).once('class-name', function() {
// your javascript code
});