Web dev trick: jquery load () plus friendly url [solved]

 

Web dev trick: friendly url without using .htaccess / mod_rewrite [solved]

Recepies:

bunch of Javascripts

So here it is :

We all know that its easy to load or inject a content to an already loaded page using jquery.load() function, but the usual problem is “the url bar”, “page title” is not updating, and the biggest problem is when the user refresh the page, its all gonna go back to the state of the page it was first loaded.

So how are we gonna do that because when we click a normal <a> tag the page will go to that url and leaves the page you are currently on.

the trick is use slash or anchor “#” like this <a href=”#”> on each tag, so the page will stay on the current page.

i guess it will be easy if ill just show the codes and explain it line by line:

make sure you put the jquery library inside the head tag of the page:

<script type=”text/javascript” src=”jquery.js” ></script>

inside the body tag put this line:
<div id="window"></div>                    //this is where the loaded/injected page will show
<a href="#mypagetoinject.thml" class="n_loader" title="New item loaded">news 1</a>

inside a script tag put the following code:

$(".n_loader").click( function (){
		var url = $(this).attr("href");                   //this will get the value of href
		$('#window').load(url, function() {                  // this will load the url/href value to div-window
  		//alert('Load was performed. ' + url);
		});
		var w_title =  $(this).attr("title");            //this will get the tittle value from a-title
		$('title').text(w_title);                      //this will change the page title

});

So when ever you click the link, it will load/inject a page inside...

We are not finished yet, because still whenever the user refresh the page, the injected content will disappear or not be loaded.

The solution is put this code into the head tag of your page:
<script>

$("document").ready(function (){
	var exactURL= window.location;            //get the url value
	if (exactURL=="/"){                       // this is just if the url is default (no anchor etc.)
	} else {                                   // this is if the url has anchor on it (any other values)
		var exactURL= self.document.location.hash.substring(1);   //get the url anchored text
		$('#window').load(exactURL, function() {                   //load the page named as the url anchored text
		});
	}
	});

</script>Here is a working example of the implementation of this dirty trick. see http://clsu.edu.ph/ (do not use internet explorer, or it will send you to the old version of clsu website.
Sorry for my rough & not organized english :) copy and paste enjoy the code

Leave a Reply

Or