JQuery / PHP - Changing URL without refreshing page?

[Matt Clarke]

Hi guys, been a while since I posted or really been active however I am in need of a little assistance!

I'm developing a site for a client and they want it built with jQuery, PHP etc and I've encountered a problem.
The website requires them to have personal bios or profiles for the page, but my client does not want the page to re-direct to another page and wants it to grab the information.
I've achieved that easily using "$.get" in jQuery.

However, they also want the URL to change so that it can be referenced in different parts of the website.
I've created functions, defined variables for the URL and used window.location in jQuery to try and achieve this however I've hit a solid wall.

http://www.asual.com/jquery/address/samples/state/ - This website produces what I want effectively however I cannot seem to get their code to work on my end.

Below is my code

jQuery

function getBasics() {
	url = "profile.php?p=about";
	$.get(url, function(data) {
		$(".mainContent").html(data);
	});
	window.location = url;
}

PHP (only basic but works)

<?php
	error_reporting(0);
	if($_GET['p'] == "about") echo "about.";
	else echo "no valid p defined, would show feed here then as default.";
?>

HTML

    <div class="main-prof nav">
    	<ul>
            <li><a id="basics" onclick="getBasics()" href="#">Basics</a></li>
        	<li><a id="feed" onclick="getFeed()" href="profile.php?p=feed">Feed</a></li>
        	<li><a id="friends" onclick="getFriends()" href="#">Friends</a></li>
        	<li><a id="media" onclick="getMedia()" href="#">Media</a></li>
        	<li><a id="interests" onclick="getInterests()" href="#">Interests</a></li>
        </ul>
    </div>

Any help would be appreciated, and yes I've searched for this error on Google and stuff but I can't seem to find anything else other than the website I provided (and soundcloud).

 

[TheAJ]

window.location will force your browser to go to a new page, basically re-rendering everything again.

So you cannot use window.location to seem like there's a new path. There's two options you can make:

1. Make the application HTML5 compliant by using window.history.pushState, or
2. Use either a search query or hash.

Search query:

document.location.search="?page=about"

Or Hash:

document.location.hash="#about"

Alternatively, you can use a JavaScript framework that supports SPA (single page application) functionality.
Here's a small list of some that I've used and have been satisfied with:
AngularJS - http://angularjs.org/
ExtJS - http://www.sencha.com/products/extjs/
Ember - http://emberjs.com/

Most of these frameworks use hash (the example I've shown above) to allow for no refreshing upon rendering new content. This is totally acceptable, and most websites do use this type. Only a few use the HTML5 way because not all browsers support it yet.

 

[Matt Clarke]

window.location will force your browser to go to a new page, basically re-rendering everything again.

So you cannot use window.location to seem like there's a new path. There's two options you can make:

1. Make the application HTML5 compliant by using window.history.pushState, or
2. Use either a search query or hash.

Search query:

document.location.search="?page=about"

Or Hash:

document.location.hash="#about"

Alternatively, you can use a JavaScript framework that supports SPA (single page application) functionality.
Here's a small list of some that I've used and have been satisfied with:
AngularJS - http://angularjs.org/
ExtJS - http://www.sencha.com/products/extjs/
Ember - http://emberjs.com/

Most of these frameworks use hash (the example I've shown above) to allow for no refreshing upon rendering new content. This is totally acceptable, and most websites do use this type. Only a few use the HTML5 way because not all browsers support it yet.

Hi TheAJ, thanks for the reply!

I used your method above and both seem to refresh the page whenever I click a link. The way I need it is to be able to click the link, the information to pushed into a div and then the page still stay static without a refresh (with the link in URL for that specific call).

Thanks again!

 

[TheAJ]

Both examples should work fine, I don't understand why it's not working for you

Anyways, your requirements meets the description of a single page application. I highly recommend using an already existing framework.

If you don't want to use a framework, you can continue using jQuery (which is also a framework, btw). Here's a SO answer that has a list plugins/frameworks that help with routes: http://stackoverflow.com/questions/12132848/save-xhr-rendered-state-upon-browser-refresh

I would highly recommend AngularJS though, in my opinion, it's the new king of SPA: http://docs.angularjs.org/api/ngRoute/service/$route (scroll down a little to see an example of what you're trying to accomplish)

 

[Matt Clarke]

Both examples should work fine, I don't understand why it's not working for you

Anyways, your requirements meets the description of a single page application. I highly recommend using an already existing framework.

If you don't want to use a framework, you can continue using jQuery (which is also a framework, btw). Here's a SO answer that has a list plugins/frameworks that help with routes: http://stackoverflow.com/questions/12132848/save-xhr-rendered-state-upon-browser-refresh

I would highly recommend AngularJS though, in my opinion, it's the new king of SPA: http://docs.angularjs.org/api/ngRoute/service/$route (scroll down a little to see an example of what you're trying to accomplish)

Yeah it doesn't seem to work for me mate. I'll take a look at the frameworks you've provided and I've also got hold of an API that seems quite good. Cheers for all your help mate!

 

[Leon]

When I do it, I use code similar to this:

$('a').click(function(event) {
	var page = $(this).attr("href").split('#/')[1];

	// handle page change		

	location.hash = '/' + page;
	event.preventDefault();
});

<li><a href="/#/home">Home</a></li>

Seems to work perfectly for me.

 

[Matt Clarke]

When I do it, I use code similar to this:

$('a').click(function(event) {
	var page = $(this).attr("href").split('#/')[1];

	// handle page change		

	location.hash = '/' + page;
	event.preventDefault();
});

<li><a href="/#/home">Home</a></li>

Seems to work perfectly for me.

But that doesn't load data into a div, does it? The way I need it is so the user clicks a link, the data from that links page is put into a div and the URL changes however the page does not. If you take a look at https://soundcloud.com/ that's exactly how I want it.

Cheers mate!

 

[Leon]

But that doesn't load data into a div, does it? The way I need it is so the user clicks a link, the data from that links page is put into a div and the URL changes however the page does not. If you take a look at https://soundcloud.com/ that's exactly how I want it.

Cheers mate!

Note the comment, "handle page change", that's where I indicated where you put your page change (in your case, load the page data to the div). What you can probably use is something like this;

$('a.page-link').click(function(event) {
    var page = "profile.php?p=" + ($(this).attr("href").split('#/')[1]);

    $.get(page, function(data) {
		$(".mainContent").html(data);
	});

    location.hash = '/' + page;
    event.preventDefault();
});

Make sure your page links have the class "page-link"... But yeah, it's untested but it should work in theory.

 

[Matt Clarke]

Note the comment, "handle page change", that's where I indicated where you put your page change (in your case, load the page data to the div). What you can probably use is something like this;

$('a.page-link').click(function(event) {
    var page = "profile.php?p=" + ($(this).attr("href").split('#/')[1]);

    $.get(page, function(data) {
		$(".mainContent").html(data);
	});

    location.hash = '/' + page;
    event.preventDefault();
});

Make sure your page links have the class "page-link"... But yeah, it's untested but it should work in theory.

Alright mate, I've added the code you've put above me. I added it and changed the URL to /#/home as an example but that just takes me directly to the WAMPP www directory (root folder) on the web server where I see my project files. I've tried manipulating it for ages to get something out of it but it doesn't seem to be working.

EDIT: I've been reading into history.pushState() - Would that work in my favor?

Regards,

Matt



Fixed:

$(document).ready(function() {
	$(".main-prof-nav ul li a").click(function(e) {
		var href = $(this).attr("href");
		e.preventDefault();
		$.get(href, function(data) {
			$(".mainContent").html(data);
			history.pushState('', 'New URL: '+href, href);
			
		});
	});
});

I've re-built this and it appears to be working how I want it, however, it will not allow me to load external links, not entirely sure how to fix that. Any help is appreciated!