Please see the code below which is generated on the server side:
tc.Attributes.Add("onclick", "location.reload(); this.style.backgroundColor='olivedrab'; open('PrimaryNominalAjax.aspx?USN=" & CStr(objDR("USN")) & "&Requester=" & strUserName & "&Status=" & CStr(intReviewStatus) & "&Reason=-1&Review=" & lngReview & "','_blank','')")
When the user clicks on the link on the client side the code reaches the server side page load event in: PrimaryNominalAjax.aspx before it refreshes the current webpage. Why is this?
location.reload() does not block the execution of other javascript. So if it takes say, 5 seconds to reload a page, animations etc can continue.
Are you trying to get your site to: Reload, then change color, then open another page? I don't think you will be able to accomplish this using the method you have above. Once the page reloads, it has lost all knowledge of state from before it was reloaded. So after the reload, the page wont know that the tc button was clicked.
You are probably better navigating to the current page with a url parameter
location.href = location.href + "?button=tc";
Then in the onload event, check if that value is in the URL, then change the background color and open the second page. Something along the lines of:
if(location.search === "button=tc")
{
// change color
// open page
}
Related
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.
I am trying to create a navigation in the CMS I am building, but it seems that every problem I fix only gives me more problems.
I want to do the following:
User clicks on a link: http://cms.abayocms.dev/swatch-settings/?/site/1
The PHP script does not detect a '/swatch/'in the URL and creates a new swatch
Issue 1: The URL does not change after adding a swatch, and I can't use PHP to change the header, because that is already sent!
So when a user refreshes the page, a new swatch will be created, etc, etc.
I don't want that, so I added a step:
I added a new peace of code (javascript):
location.replace(window.location + '/swatch/' + newSwatchID);
Issue 2: This method refreshes the page. I just want to add it to the URL and not refresh it.
To prevent the above issue, I tried 'history.pushState' (if supported by the browser) and I added the following code:
history.pushState(null, null, window.location+'/swatch/'+newSwatchsetID);
Issue 3: This ADDS a history event, so when the user clicks the browsers 'back' button, he again ends up on the URL: http://cms.abayocms.dev/swatch-settings/?/site/1. Which AGAIN creates a new swatch.
Is there a way to prevent this?
If you want to update the current state than you have to use history.replaceState();
Just use history.replaceState(null, null, window.location+'/swatch/'+newSwatchsetID);
This wont add a new state on History object so history.back() will reload the previous page instead of a state object.
I am using ajax post requests for doing paging on a feed in my site. When getting the post request data I am reforming the page by clearing previous data and rendering the new data that came from the request. I want to be able to change the URL as well so saving the new page link will get the user to the current page.
Example:
User on page example.com/feed - seeing content of page #1
User clicking to get to page #2 -> ajax post is send and data on the page is changed using js (no refresh)
URL is still example.com/feed but the content is of example.com/feed?page=2
How can I set the URL to point to the new page without triggering a refresh (no redirect) ?
I am using Nodejs + express.
I understand you are aiming at a single page application.
While keeping the url is nice, note you might want distinct urls for directly accessing different parts of your application. Still, you can load content with AJAX and keep a smooth application. The way to go is using the hash part of the location.
The Sammy.js framework gives you a nice base to build upon, you can try it out.
You can use history pushstate but some browsers does not support.
history.pushState({id: 'SOME ID'}, '', 'myurl.html');
And don't forget about window.onpopstate, it pops if user clicks back button.
Redirect the user to an anchor point.
Page 2
And in your document.ready:
if (window.location.hash.length > 1){
var pageNumber = window.location.hash.substring(1);
loadPage(parseInt(pageNumber));
} else{
loadPage(0);
}
I don't believe it is possible to change the query part of the URL without triggering a refresh (probably due to security issues). However you may change the anchor and use an event listener to detect when the anchor is being changed.
//Listener
$(window).on('hashchange', function() {
if(loaction.hash.length > 1) {
//The anchor has been changed.
loadPageWithAjax("example.com/feed.php?page=" + location.hash.substring(1));
} else {
//Load standard page
...
}
});
Change the anchor to load new feed
Page 2
Remember to not use an anchor that is used as an id, since this makes the browser scroll to that element.
I was really confused with this question despite on google guide.
So, I have a web-page(html and js) which is upload some information to the
<div id=""></div>
using jquery's
.load(target)
Uploading realized with js function and "onclick" event in the html document.
So, when I click on the page region js start to upload information to the block.
According to google guide I should to use hash-bang if I want that page will be crawl.
Questions:
1.How can I implement this considering I have only one page?
2.How can I give access to the "#!" pages which upload by script?
3.How can I create html snapshots?
Thank you.
regarding Your question:
lets assume you have a page named MyPage.html with 3 elements to which you attach java script, with id's: A, B, C. each one of them causes different content to load in your div.
1) the simplest way is to create links like:
<a id='A' href='#GoToA' onclick='javascript:executeYourCodeA();'>Load A</a>
<a id='B' href='#GoToB' onclick='javascript:executeYourCodeB();'>Load B</a>
<a id='C' href='#GotoC' onclick='javascript:executeYourCodeC();'>Load C</a>
what that would do is when user clicks the link, the '#GoToA'or other will be added autommatically to browsers page addres. So the page address will look like
www.yourdomain.com/MyPage.html#GotoA
this change in addres will be remebered by the browser in its history.
2) if you wan to read the url use
var mylocation = window.location
- source: http://www.w3schools.com/js/js_window_location.asp
3) if the user accesses only MyPage.html everything is ok, the page renders with its original state, but what if user wants to see content visible after clicking link A ?
You can tell the difference, on page load, reading page url ( see 2)) and automatically loading the content. it can be achieved by :
$(function (){
var myurl = window.location;
var target = myurl.split('#')[1];
switch(target){
case 'GoToA' : executeYourCodeA(); break;
case 'GotoB' : executeYourCodeB(); break;
.
.
default: /*show the original, initial page*/
break;
});
Effectively what's going on now is that loading an address MyPage.html and clicking link A is the same by means of what is displayed to accessing a page MyPage.html#GoToA
So this way you can have separate links to the same site with different dynamically loaded content.
The thing Cristian Varga told you about can be used to achieving back and forward capabilities: basically what you do is you create a normal link to a page like MySecondPage.html ( this page does not really exist ). You then on click event load the contents to your div, force stop execution of standard link behavior (by preventDefault() - this causes your event not to be processed any more - so the browser 'ignores' navigation to MySecondPage.html. You then manually tell the browser to store the history stete and tell it that you are now om MySecondPage.html
history.pushState(null, null, link.href);
so you load the content, block navigation and manually convince the browser that the page has changed and to store the state in browsers history.
but now achieving the snapshot capability - would be more tricky in my mind, as the MySecondPage.html is a perfectly valid but non existent url, loading MyPage.html instead when user types in www.mydomain.com/MySecondPage.html and displaying MySecondPage content would require server side actions.
- source http://diveintohtml5.info/history.html
I have drawn a chess board in a php page. Every piece is set as draggable, and every tile as droppable. Once a piece is dropped on a tile, I'd like to reload the php page so the board can be drawn anew along with new positions.
How can I do that: reloading the php page with javascript, without displaying a window asking for confirmation such as "To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier. ->Cancel; Resend" ?
Or perhaps there are better solutions?
If you want to avoid having refresh reporting data (for any reason, including the user clicking the reload button) then use the POST-REDIRECT-GET pattern (http://en.wikipedia.org/wiki/Post/Redirect/Get). Read that, it will explain what to do.
Quick solution: you could try:
window.location.reload(true); //true sets request type to GET
Use GET, instead of POST and the dialog box you are getting will go away.
Good luck!
Make use of
window.location.reload();
will refresh automatically
<script>
var timer = null;
function auto_reload()
{
window.location = 'http://domain.com/page.php'; //your page location
}
</script>
<!-- Reload page every 10 seconds. -->
<body onload="timer = setTimeout('auto_reload()',10000);">
reference http://davidwalsh.name/automatically-refresh-page-javascript-meta-tags