I have a problem regarding to jquery and jsp. I used a jquery load() to load the data on the same page but the main problem was when it was loading the url remains same as the home page but i want to change the url to what the data i have clicked. I already used meta refresh tag but it not working on jsp pages so Please help me to complete the task that to paste the url what the page i have been clicked.I used html tags and javasript and jquery which was saved in jsp pages.
Use window.history.pushState :
window.history.pushState({},'',"http://newurl.com");
and on jQUery .load example :
$("#div").load("http://mysite.com/newpage",function(){
window.history.pushState({},'newpage', "http://mysite.com/newpage");
});
And if you want to change the title of document as well, use :
document.getElementsByTagName('title')[0].innerHTML = 'New Page';
window.history.pushState({},'newpage','http://mysite.com/newpage' );
If you're concerned about compatibility towards older browsers and the more modern (although outdated) versions of IE, you have little choice that I'm aware of but either using a redirect which triggers an entire page load, or use the hash sign, which you can access via
document.location.hash
If you're not concerned about that, have a look at the HTML5 history API (http://diveintohtml5.info/history.html)
It's as simple as
history.pushState(null, null, 'newURL')
And doesn't break compatibility with the browsers back and forward buttons, provided your page takes those into account.
Related
Doing some Intranet development. The design approach uses a basic HTML framework populated with an ajax call (via jQuery) to populate the page. We've standardized on Chrome for Intranet access. The intranet allows the user to open PDF documents linked from the page in the same window, and then use the back button to return. Our old "static" page approach retained the prior page contents - the new dynamic approach reloads the page. How can we retain prior page content?
Research has found similar problems, but not a clear answer. We've tried checking for an existing element in the onload() event; doesn't work because the page load is already triggered before that code gets evaluated.
The code is working correctly - our desire is to return to the already rendered page.
No errors. Getting page reload with the back button when we want to return to the already rendered prior page.
You could modify the url via the history api when you are changing the page content. This should be enough as history gets modified so the back function would work properly. However if this doesn't work you can use the url to determine what to show up on the page.
Here's an example: https://css-tricks.com/using-the-html5-history-api/#pushState-example
I currently have my website set up with a single html file that uses on-click javascript functions to display various sections of the site differently as the user navigates around. The main page contains an audio player that I want to keep playing as the user navigates, which is why I've chosen the AJAX route.
I've implemented pushState across the site to produce URLs for each section that the user navigates to. These links don't work.
I have a couple questions regarding this: should I be using pushState to generate these URLs, or am I going about producing links the wrong way? And is there a way I can have a user reload a deeply-embedded page in the site, and then have the page constructed from the javascript somehow server-side?
EDIT: I feel like maybe if I could have all these links routed to a javascript file that then built the appropriate page, maybe that would work? Not sure if that's the way to go about it.
$('#menu a').click(function() {
var page = $(this).attr('href');
history.pushState({}, '', page);
$('#news').load('content/' + page + '.php');
return false;
});
Here's an example of how the menu is running this jQuery function on click, and then using pushState to make a new URL. Then, it loads in content into the #news div from the appropriate php file.
Is there any way I can link to this "state" of the page? I've been reading Jose Maria Arranz Santamaria's "Single Page Interface Manifesto", which has a lot of great info, but I'm sort of wondering what I should do next.
Pushstate is not the way you should use if the links don't actually work.
You can use the hashes to implement this easily.
You the event onhashchange.
The hashes are stored in the window.location.hash property. There would be no need to modify the browser history as well.
Refer to onhashchange and Hashes
How does Shopify do this? Go to their website, click on the Features link and you'll see that the URL in your browser's address bar says:
http://www.shopify.com/tour/sell-online
Then click on any of the sub links and you'll see that the URL in the address bar changes without using a hash and there is no page flip.
I don't think they are using ajax to change the content because it all appears to be included in hidden divs on the page, but regardless, you can apparently change the URL using client side tricks. Your help is appreciated?
You use the new HTML5 history API to push a new state.
Here's the MDN documentation and a good tutorial.
Beware that doing this is often painful (you have to manage correctly the state of your application) and it doesn't work with IE9. It's almost always combined with ajax : it's the solution to let dynamically loaded content be bookmarkable even while the whole page isn't reloaded or changed.
Look into pushState, but be aware it's not supported in all browsers.
I'm using JQuery Mobile for a simple mobile web application.
I'm using Single Page Anatomy.
When i'm performing $.mobile.changePage("sample.html",{transition : pop});
This seems to load the page without javascript.
Is there any work-around ? or Is there any new API to load external pages with page transitions also with DOM being loaded properly ?
If you inspect the DOM using firebug you'll see that the page is added to the DOM except that when you navigate away it is removed. If you want the page to stay in the DOM you can load the page first using the loadPage method
$.mobile.loadPage( "sample.html" );
And then navigate as you normally would using either a link or $.mobile.changePage
If you are talking about the javascript files not being loaded then this is intentional and it depends on how the page is loaded) and I don't believe this is new behavior specific to the JQM 1.1.1 release.
I am trying to dynamically change the URL displayed to the user and change the id of the body without refreshing the page. The function I require is very similar to flickr.com when you click on an image, the pop-up appears. The id of the body has a word appended to it, and the url of the website also has a word appended to it.
An example would be:
http://www.flickr.com/photos/orangeacid/459207903/
There is an image there, if you click on the image the URL changes to as follows:
http://www.flickr.com/photos/orangeacid/459207903/lightbox/
(This new page is just overlaying the old one)
Before clicking on the link the body tag is as follows:
document.body.className = [document.body.className, 'js'].join(' ');
...
After clicking on the picture it changes to:
document.body.className = [document.body.className, 'js'].join(' ');
...
Flickr uses Yahoo's YUI library and what you are talking about is the lightbox component, and the history utility.
There is no all-in-one function, you have to build it yourself, using the library.
Note about the url : HTML5 adds a new history API that allows javascript to change the url (pushState) without reloading the page and without using the "hash" hack. It's available in webkit (Chrome, Safari) since a while and in Firefox 4. Using history from YUI will help you implementing this.
I have recently started to repatch the jquery fancybox plugin to work with the History API. Which does something similar to flickr's implementation.
However, it might just be the history API you are talking about
Click here to see my plugin on github
Click here to see an introduction to the History API
Click here to see my talk on the history API
:)
Hope it helps