Let's say I have the following link:
www.blahblah.com/#!?page=index
How can I convert it to one of the following:
www.blahblah.com/#!/index (this one should be made with mod_rewrite)
www.blahblah.com/ajax/index (still mod_rewrite, but #! replaced with ajax)
www.blahblah.com/index (the page will load with AJAX like facebook, but #! will be hidden)
Can anyone give me examples of each of the questions above?
Thanks alot!
Anything after the hash (#) isn't sent to the server, so you cannot read it server-side. You can, however, redirect the user using JavaScript. The information you're looking for will be stored in the variable window.location.hash.
On page load, you can do something like the following:
hashString = window.location.hash.substring(8);
window.location = 'http://www.blahblah.com/'+hashString;
We're using substring to remove the first eight characters (#!?page=), so we'll be left with index.
Module rewrite only changes what the server sees. Module rewrite can't, change what the local browser sees, which is where the js is being run.
The way Facebook load, is through requesting the contents of the new page, then it updates the window URL instead of having to re-load everything. This is done, so If an item needs to be shared or linked the link is all up to date with what they're actually viewing, so when the page gets a fresh re-load, the browser loads the actual full php page, requested from the server.
The hidden # in a ajax page loading strategy is done by HTML 5 pushState.
In javascript you can use window.location.hash for this.
Related
As many of you have noticed, when you hit a link to switch from page to page in Google+ or facebook, the URL changes, the body changes but some parts of the page don't, like the chatbox. I believe AJAX can change a specific content of the page by requesting a PHP page from the server and get some results, but that won't change the URL.
Actually, I didn't know exactly how to search that in Google, so, any keywords/names/linkes will be strongly appreciated.
I'm using JQuery library for Javascript and Symfony2 framework for PHP, if this helps.
Look at the JQUERY load method.
http://api.jquery.com/load/
All you need to do is use a selector:
$('mydiv').load('newcontent');
Very powerful function. Look it up!
edit:
Sorry missed that url change. The trick alot of times with the URL is around the Hashtag. If you look closely at the URL there will be a "#" pound symbol in there somewhere. This allows the site to store current state without a reload.
Currently there is no way to change the URL in the browser save for the bit after the hashtag with out fully reloading the site.
you can either use iframe or ajax to keep some part of your page static.To change url either you can use hash hack.
window.location.hash = "pageidentifier"
or you can use the html 5 trick described in the url provided by arxanas
my question is about this website - http://www.bits-apogee.org/2011/
whenever you click on the link in the side navigation bar, the middle part of the website is dynamically loaded. Also, the url also changes, everything else remains unchanged. how is this done?
is this some query plugin?
I totally agree with #JMCCreative. It looks like it's an actual refresh. You should look at the following post on StackOverflow.
Modify the URL without reloading the page
The site is using Hashes (#) in the URL to denote the new content being loaded.
This is useful for people bookmarking dynamically loaded content (normally hashes load to specific areas on a page, named anchors or ID's for new browsers), because they don't trigger the page to refresh...
http://www.highrankings.com/urls-with-hashtags-307 there are drawback (SEO) concerns to this... however you will notice more and more sites doing it so i would assume the SEO robots will get better.
There are 2 possibilities:
You can use the HTML5 capabilities to change the url (history pushState), however this feature isn't available in all browsers yet. For more information, look at this SO post: Is there a way to change the browser's address bar without refreshing the page? .
You can use a hashtag (#) part as fall back for browsers who don't have above feature yet.
If you use jQuery, you can use the handy plug-in jQuery Address. This will take care of both above cases.
They're not using a plugin. They're doing an ajax request to a URL like this:
http://www.bits-apogee.org/2011/getcontent/?even=Rachel+Armstrong
and dumping the overview in the container.
The circle of this type of process is usually like this:
listen for link clicks
on click, prevent default on event.
user window.history.pushState to update url
some other code - hears new history
generates a url to get the content.
ajax load the url
dump the data into a container
2 Libraries I have used, both are easier than the above, as they rely on loading a regular html page via AJAX instead the example site you point to, which used a JSON format to get the data.
Pjax - update peices of the page, by pulling that HTML node from a different URL.
Ajaxify - easiest solution, you could do that effect on an HTML site in 10 minutes.
How do I remove path inforation from a url?
For example in this url, http://stackoverflow.com/questions/ask, I want the user to only see http://stackoverflow.com. Is this possible to do?
I do a redirect in PHP from my root directory to path Foo. I don't want Foo to display in the URL.I also do a page reload of sorts using window.location.href = domain_name/foo. Similarly I don't want foo to display in the URL.
Is this possible to implment in Javascript or PHP or do I have to configure Apache to do this?
You cannot manipulate URLs in the browser's address bar using PHP or JavaScript. But you have guessed correctly, this is something that can be configured in Apache. For a primer on URL rewriting, take a look at this article.
I have seen websites that keep the user on the homepage and use AJAX to change the page content.
You should make yourself sober and then consider if you really want to hide anything and if your web site would work at all.
However, I can answer you already - it wouldn't.
We are using path information for the reason. And you'd better see it.
Read up on URL masking:
htaccess mask for my url
http://www.willmaster.com/library/web-development/URL-masking.php
etc... This cannot be handled in JS.
If you REALLY wanted to, you could do this in PHP: you would need to create an index.php page that was set up to handle the loading of other pages, and add a handler at the top of every page that detects the REQUEST_URI that sets any other link to redirect (header()) to the index page with the filepath stored in $_SESSION or another retrievable location. The index page would then render the requested page. However, this is ugly, wastes resources, and you're much better off with an apache level rewrite.
I am building an AJAX deep-linked site.
I want PHP to load all the HTML code of the page if the user is trying to access the site with a Javascript non-supported browser or if it is a search crawler. Basically PHP will return the whole page.
On the contrary, when the user is trying to access the site with Javascript supported browser, I want PHP to return only the template code, and let Javascript (AJAX) take care of the rest. Basically PHP will only load design elements and let Javascript populate them with content.
I looked into PHP's get_browser() function, however it seems it is not such a reliable tool. What is the industry's practice see if the browser supports Javascript or it is a search crawler using PHP?
Background:
Why I want the site to have this behavior.
Since I want the home page to load just by loading the address: example.com, which does not send any query to PHP, PHP returns the HTML code of the home page. This however causes issues when the user tries to load the following page: example.com#foo. So, for this example, PHP will return the home page and once the home page is loaded, Javascript (AJAX) will change the content around so that it shows proper content for #foo. This will make the user to see the home page, therefore load time will be slower and user-experience will not be so nice. However if my PHP script can figure out that if the use with Javascript supported browser is trying to load the page, it will only return the template of the web site, which has no content) and the javascript will populate that template with content whatever is supposed to be displayed for #foo. On the other hand, if the Javascript non-separated browser or a crawler will try to access the page example.com#foo, home page will be returned.
I am using SWFaddress (http://www.asual.com/swfaddress/) library for the deep-linking.
Edit
Thank you guys. I did not think of using <noscript></noscript> before.
Here is what I decided to do. PHP by default will load pages such as example.com or example.com#foo (which is essentially the same as example.com from PHP's point of view since fragments by definition are not sent to the server) blank (just visual template) with <noscript> tag inside for the content of the home page. This way users with javascript will not see the home page and AJAX will populate the content of the page according to the #foo fragment. On the other hand, search crawlers and users without javascript will see a home page.
Thank you again. I think this is pretty simple and elegant solution. If you have any further suggestions, please post a comment or another answer.
You can't do this using PHP. What you can do though is use a noscript tag to redirect to another php page if they don't have javascript:
<noscript>
<meta http-equiv="refresh" content="0; URL=nojavascript.php">
</noscript>
It's not possible to accomplish this in the way you're trying to do it.
It's rare that someone has JS turned off and doesn't know it.
PHP doesn't get passed anything after #, only javascript can do anything with that. So even if PHP could determine if the browser has javascript turned on then it still couldn't read # anyways.
You could include a link inside some <NOSCRIPT> tags that point the user to something like example.com#foo?javascript=disabled.
Unfortunately, browsers do not report whether JS is enabled or not, so there's no way to know from a simple HTTP GET whether or not you should send JS reliant pages.
You should just build an AJAX query that sets a session variable for javascript enabled.
Run this AJAX query before any other information on the site is loaded and then do a simple redirect to the actual site.
You could do something like this pseudo code:
Index.php:
ajax(check_js.php);
redirect(main_page.php);
check_js.php
$_SESSION['js_enable'] = true;
main_page.php
if($_SESSION['js_enable'] == true) {
//execute page
} else {
header("Location: no_js_error.php");
}
Instead of the server trying to sniff our the user's settings, how about using unobtrusive javascript in the first place? This way, the page will degrade gracefully (to the desired state) if JS is not available.
I just wanted to know, is there any possible way to change the URL that appears in the address bar of a webpage dynamically? Like, maybe there are two buttons on the webpage, and when the user clicks one it will (or won't it does not matter) refresh the page and the url will be mysite.com/page1, or if the user clickes the second button, the url that appears in the address bar will be mysite.com/page2?
I do not need it to chaneg the domain, just the part after.
Just wanted to say, that I DO NOT want to go to another page. This must be done on one page. It does not matter if it is done with JS, PHP, or via the .htaccess file, but it must do this with only one page.
Outside of changing the .location you only really have control over the window.location.hash.
window.location.hash = "boo"; http://mysite.com -> http://mysite.com/#boo
This is the only way to not go to a new page while changing the URL. All other methods will refresh the page or redirect the page:
window.location redirects user when changed
window.location.pathname redirects user when changed
window.location.search redirects user when changed
window.location.hash does not redirect user when changed
You can also just change the non domain path by using a relative url:
window.location = "page1"; // include forward-slash if necessary
// goes to http://somesite.com/page1
You can definitely (and easily) serve the same page off both /page1 and /page2 and have the buttons navigate respectively to one and the other -- "refreshing the page", as you say (i.e. loading it up again from the server, or browser cache), and of course change accordingly what appears in the address bar, too. However, I don't see what's the point of doing that.
I don't quite understand what you want.
Is it that in both cases, you want the same page to be shown but with different urls ?
In that case, you could write a .htaccess file to redirect to the same page for both /link1 and /link2 and point the button to either of the links.
Just to update this question in case others come along.
This can now be handled via javascript using pushState(). There's a couple of libraries (such as History.js) that aim to ease implementation across different browsers currently without proper support. However, if you'd like see a simple usage example without the use of such libraries, feel free to check out the following article on Hawkee
Dynamically change URLs using Push and Popstate