This question already has answers here:
How to show Ajax requests in URL?
(7 answers)
Closed 9 years ago.
I'm relatively new to web development so this probably is a odd question. I want part of my site to load a new page. But significant part doen't need to change. What I do now is that I load content into a div.
$('#rightdiv').load("about.html");
The downside to this is that the address doesn't change, I believe there is a good solution but I don't know how. I have tried googleing it but I can't find anything good on it. So I would love to see both a solution and how the sollution is called (hope you know what I mean).
Thank you for your time and effort.
Browsers supporting HTML5's pushState will let you change the path:
$('#rightdiv').load("about.html", function pushState(){
if(history && history.pushState){
history.pushState('','','about.html');
}
});
The standard way is to use location.hash. So for example if you were on mysite.com/, and loaded the about.html page, you could set the hash to #about. This would not cause the page to reload, but would alter the URL (to provide for bookmark/back button support).
As an example, using the success callback to load():
$('#rightdiv').load('about.html', function() {
location.hash = 'about';
});
HTML5 adds a new API called pushState. This allows for more complete modification of the URL without causing a page reload. Read more about that here.
This can easily be achieved by taking advantage of HTML5 and its features. Myspace does something similar to what you are asking. The HTML5 History API to change the browser URL without refreshing the page. Combining this with JQuery $.ajax can produce the effects shown in myspace, github and facebook. "arundavid" has a great explanation on this link at tinywall.info
That's the right way to load data into a div using AJAX. I personally prefer to use the jQuery.ajax() function though.
Related
This question already has answers here:
Changing the URL without reloading the page
(7 answers)
Closed 8 years ago.
i see sometimes on some sites like facebook or the Play Store from google, that by clicking a link the url changes (NOT with #blah), but the wohle site doesn't reload. I can use back/forward, so it could't be javascript, i think.
Can anybody say me how to implement that on a site? thanks
It uses pushState, and it is done using javascript and HTML5 with pushState compatible browsers. Here is some documentation: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
A quote from those docs:
Suppose http://mozilla.org/foo.html executes the following JavaScript:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
This will cause the URL bar to display
http://mozilla.org/bar.html, but won't cause the browser to load
bar.html or even check that bar.html exists.
The url can be changed in this way, and the new page is rendered using javascript. I do this by using Backbone.js, but there are other tools to do the same thing. It is mostly the same technique as those URLs with # in them, except they get rid of the hash. Backbone.js will use a # by default, but can be configured to make the URL to appear normal.
Here is a SO question about how to do this using Backbone
Another way this can be achieved is with AngularJS. As was said in the above comments, this will use AJAX to get new data to display, and then use javascript to change the content of the page, all without loading a new URL.
For browsers whose not support htmll5 like ie8, you can use the library https://github.com/browserstate/history.js/ which emulate the html5 pushstate method.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to keep the browser history in sync when using Ajax?
I think this is a rather easy fix but I can't find an answer anywhere else...so here goes...I made this kind of template for my homepage...I know the code's not insanely elegant but my main problem is that what if I want to send someone to a specific part of my page...rather than just my "home"...take a look http://useless-r-us.t15.org/
I mean how can I reference each of "blag", "projects", and "about me" using some unique url but still have my pretty css3 transitions...I'm thinking something like this...
http://radokirov.com
P.S....I know blag is a typo --> http://xkcd.com/148/
You should use url hashes (the part of the url following the # sign).
Then, in javascript, in the ready (jquery) event handler, based on the url's hash, you should do the appropriate ajax request and populate the page with the appropriate content.
For more details: Modify Address Bar URL in AJAX App to Match Current State
Does anyone have a good solution for getting and setting variables in window.location.hash?
Take a URL that looks like this:
domain.com/#q=1&s=2
What I'd like is an unstressful way - JavaScript or jQuery - to check the values of q and s when the page loads, and change them following events on the page.
I have found some code for getting hash variables, but nothing sensible for setting them.
Am I missing something really obvious, or do I need to roll my own solution (and release it!)?
Thanks.
Haven't used it but there is jHash
jHash allows you to work with the
'location.hash' value in a similar
fashion to a server-side query string.
This library utilizes the HTML5
"onhashchange" event, but also
includes a fall back to still allow
the change notifications to work
properly in older web browsers.
jQuery BBQ can do this.
See also:
Get URL parameter with jQuery
Get QueryString values with jQuery
Edit as #gonchuki points out, jQuery.query can also do this.
JHash didn't work for me in that I wanted it to trigger the routes right away. I personally used routie instead.
It lets you do advanced routing just like jHash but will trigger on page load correctly.
Below will match example.com/#users/john
routie('users/:name', function(name) {
//name == 'bob';
});
I use 'window.location.hash' to add '#something' to the URL without refreshing the page.
I want to know how to do the same but using a slash (/) instead of hash (#).
Why? I have navigation tabs and I use a jQuery and Ajax to dynamically load the data. When javascript is enabled, '#something' is added to the end of the URL to get the data. When javascript is disabled, it redirects to '/something'. So I want to fake the same URL for both.
Instead of http://site.com/section#something -> http://site.com/section/something
Thanks.
You can use any combination after the hash you want, but the answer to your question is no, you can't do what you're asking without re-directing the user.
Being able to play with the URL without re-directing would be a security concern on some levels (can you change the domain too? why not?....see where this rabbit hole goes?). For example changing your URL via JavaScript to say: http://www.mybank.com (why isn't my bank using SSL? bad bank, bad!) would be a phishers dream...so browsers don't allow messing with the URL like this at all...not without actually taking you there.
Take a look at this article. Basically, it lets you do this:
history.pushState({}, 'New Title', 'new_page.html');
This updates the history and the location bar but not actually load the page. That's what you want, but it's part of HTML5, and few (if any) browsers support it at the moment. Sticking with hashes is a better idea.
History.pushState (see the link in #Casey's post, or Kyle Scholz' blog) is present in the latest versions of Safari and Firefox, and Modernizr 1.5 now tests browser support for it. I just starting playing around with this today and it appears to do exactly what you want.
I realize this doesn't help with older browsers; some kind of window.location.hash trick will still be needed there.
Why don't you deploy SWFAddress?
It does get you URLs in the form of ../#/section/something and should be pretty much what you need. It's widely used for many Flash/AJAX websites on SEO considerations.
I need to link to a page that uses javascript to create the appearance of different pages. Each of the links on the page I am pointing to calls a javascript function that produces the "new" page. So, if I just link to the page, I get the default configuration. But what I need to link to is a particular configuration after the js function has run.
At first I thought I would be able to append the function to the url, but apparently that functionality is not supported for security reasons (is this correct?). Is it possible to post the values?
Does anyone know how I can display the correct configuration?
In the general case, no, it's not possible, which is why these sort of JavaScript-only pages are an inaccessible, unusable total pain in the neck and people should stop creating them, the idiots.
If you are lucky and the site you're talking about has actually Done It Properly, then they'll have used #fragment navigation, so when you click a link it does a history-able and bookmark-able navigation, updating the URL to one with a #something at the end that you can use to navigate back there. If you're really lucky, there might even be a fallback URL for non-JavaScript browsers that you could link to. But more often all there is is a JS function, which you can't link to or invoke outside of that site, leaving you quite out of luck should you want to deep-link anything.
(Did we learn nothing from the <frame> fiasco, guys? All you trendy webmasters hacking up clever-clever swooshy jQuery-animated load()-powered multiple-pages-in-one sites are churning out rubbish that is no better than the frame-addled worst of the Netscape 3 era. Stop it. Seriously.)
Okay, I was given the solution by a friend. It seems I should answer my own question. In fact, I felt a little silly once I saw how simple the solutions was. I just forgot how to plant "posts" in a URL. It seems the question itself was erroneous.
All I really needed to do was set some Javascript variables in a page I don't own. Solution looks something like this.
http://www.apage.com/control.aspx?var1=someVal&var2=someVal...&varn=someVal
Thanks to those who responded.
The owner of the page could do you a favour and provide a mechanism to run functions depending on a value in the querystring.
Otherwise there may be something that can be done with ajax but it could be messy.