Hash tag ajax?

**Vernier** · 02-20-2012, 06:24 PM

Hey, this is some of my code:

PHP Code:


<?php

chdir("../forum"); // path to MyBB

define("IN_MYBB", 1);

require("./global.php");

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>

<script type="text/javascript" src="core.js"></script>  

<link rel="icon" href="images/favicon.gif" type="image/gif">

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<script language="javascript" src="/tweet/jquery.tweet.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>HabFab V1</title>

<link href="css/global.css" rel="stylesheet" type="text/css" />

<link href="css/navigation.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://vis.im/player/embed?radioIp=193.33.186.20&radioPort=8110&div=radioplayer&playIcon=http://habfab.com/v2/images/play.png&pauseIcon=http://habfab.com/v2/images/pause.png&volumeSlider=http://habfab.com/v2/images/volume-slider.png&volumeController=http://habfab.com/v2/images/volume.png&library=jquery&volumeStart=25"></script>

<script type="text/javascript">



/***********************************************

* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/



var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)

var loadedobjects=""

var rootdomain="http://"+window.location.hostname

var bustcacheparameter=""



function ajaxpage(url, containerid){

var page_request = false

if (window.XMLHttpRequest) // if Mozilla, Safari etc

page_request = new XMLHttpRequest()

else if (window.ActiveXObject){ // if IE

try {

page_request = new ActiveXObject("Msxml2.XMLHTTP")

}

catch (e){

try{

page_request = new ActiveXObject("Microsoft.XMLHTTP")

}

catch (e){}

}

}

else

return false

page_request.onreadystatechange=function(){

loadpage(page_request, containerid)

}

if (bustcachevar) //if bust caching of external page

bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()

page_request.open('GET', url+bustcacheparameter, true)

page_request.send(null)

}



function loadpage(page_request, containerid){

if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))

document.getElementById(containerid).innerHTML=page_request.responseText

}



function loadobjs(){

if (!document.getElementById)

return

for (i=0; i<arguments.length; i++){

var file=arguments[i]

var fileref=""

if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding

if (file.indexOf(".js")!=-1){ //If object is a js file

fileref=document.createElement('script')

fileref.setAttribute("type","text/javascript");

fileref.setAttribute("src", file);

}

else if (file.indexOf(".css")!=-1){ //If object is a css file

fileref=document.createElement("link")

fileref.setAttribute("rel", "stylesheet");

fileref.setAttribute("type", "text/css");

fileref.setAttribute("href", file);

}

}

if (fileref!=""){

document.getElementsByTagName("head").item(0).appendChild(fileref)

loadedobjects+=file+" " //Remember this object as being already added to page

}

}

}

</script>

</head>



<body>

<div id="container">

    <div id="wrapper">

        <div id="left">

            <div id="banner_container">

                <div id="banner"></div>

                <div id="navigation_bar">

                    <ul>

                        <li></li>

                        <li><a href="http://habfab.com/v2" id="habfab"></a>

                        </li>

                        

                        <li><a href="#" id="radio"></a>

                        <ul>

                        <li><a href="javascript:ajaxpage('/pages/radio/request.php, 'content');">Request line</a></li> 

                        <li><a href="javascript:ajaxpage('/pages/radio/timetable.php', 'content');">Timetable</a></li> 

                        <li><a href="javascript:ajaxpage('/staff/_frontend/listen_record.php', 'content');">Recent Songs</a></li>

                        <li><a href="javascript:ajaxpage('/pages/radio/djotw.php', 'content');">Djotw</a></li>

                        </ul> 

                        </li>

                        

                        <li><a href="javascript:ajaxpage('/staffpanel/_frontend/news.php', 'content');" id="news"></a>

                        <ul>

                        <li><a href="javascript:ajaxpage('/pages/news/sitenews.php', 'content');">Site News</a></li> 

                        <li><a href="javascript:ajaxpage('/pages/news/habbonews.php', 'content');">Habbo News</a></li> 

                        <li><a href="javascript:ajaxpage('/pages/news/reallifenews.php', 'content');">Real Life News</a></li>

                        </ul> 

                        </li>

                        

                        <li><a href="#" id="guides"></a>

                        <ul>

                        <li>Coming soon!</li> 

                        </ul> 

                        </li>

                        

                        <li><a href="#" id="events"></a>

                        <ul>

                        <li><a href="javascript:ajaxpage('/pages/events/eventstoday.php', 'content');">Events Today</a></li> 

                        <li><a href="javascript:ajaxpage('/pages/events/eventsthisweek.php', 'content');">Events This Week</a></li> 

                        </ul> 

                        </li>

                        

                        <li><a href="#" id="media"></a>

                        <ul>

                        <li>Coming soon!</li> 

                        </ul> 

                        </li>

                        

                        <li><a href="#" id="Usables"></a>

                        <ul>

                        <li><A HREF="#" onClick="window.open('/pages/goodies/habbowood.php','Habbowood','resizable,height=635,width=1245,scrollbars=no'); return false;">Habbowood Movie Creator</a></li>

                        <li><a href="#fontgenerator">Font Generator</a></li> 

                        <li><a href="javascript:ajaxpage('/pages/goodies/thronegenerator.php', 'content');">Throne Generator</a></li> 

                        <li><a href="javascript:ajaxpage('/pages/goodies/kissinggenerator.php', 'content');">Kissing Generator</a></li> 

                        <li><a href="javascript:ajaxpage('/pages/goodies/clubsofagenerator.php', 'content');">Club Sofa Generator</a></li> 

                        <li><a href="javascript:ajaxpage('/pages/goodies/djgenerator.php', 'content');">DJ Generator</a></li> 

                        <li><a href="javascript:ajaxpage('/pages/goodies/imager.php', 'content');">Habbo Imager</a></li> 

                        </ul> 

                        </li>

                        

                        <li><a href="#" id="jobs"></a>

                        <ul>

                        <li><a href="javascript:ajaxpage('/pages/jobs/open.php', 'content');">Open Jobs</a></li> 

                        </ul> 

                        </li>

                        

                        

                        <li><a href="#" id="forum"></a>

                        <ul>

                        <li><a href="http://habfab.com/forum" target="_blank">Board</a></li> 

                        <li><a href="http://habfab.com/forum/member.php?action=login" target="_blank">Login</a></li> 

                        <li><a href="http://habfab.com/forum/member.php?action=register" target="_blank">Register</a></li>

                        <li><a href="http://habfab.com/forum/showteam.php" target="_blank">Staff</a></li>

                        <li><a href="http://habfab.com/forum/donate.php" target="_blank">Donate</a></li>

                        </ul> 

                        </li>                                   

                       </ul>

                </div>

            </div>

            </body>

</html>

As I use javascript:ajaxpage to load the content of a page into a div, I need it so that the URL changes to something for example like www.example.com/something

I've seen this before and it uses a hash tag like so www.example.com/#!/goodies

Thanks for any support!

~ David

**Vernier** · 03-03-2012, 03:32 PM

I think I nearly have it! I now have this:

Code:

<li><a href="#!/events" onclick="ajax.load('/pages/events/eventsthisweek.php','content',false,'#!/events','');return false;">Events This Week</a></li>

It now loads when I click the link as: http://example.com/v2/#!/events

But when I try to access it via http://example.com/v2/#!/events in the url bar, it simply loads the index page.

Please help! Thanks alot guys, much appreciated!

~ David

**jscheuer1** · 03-03-2012, 08:37 PM

Did you edit the script? If not, this part (highlighted) is meaningless:

Code:

<li><a href="#!/events" onclick="ajax.load('/pages/events/eventsthisweek.php','content',false,'#!/events','');return false;">Events This Week</a></li>

except that it might cause an error that allows the browser to load the hash from the href. Because if the return false; part fires, the href will not load the hash into the address bar.

If you did edit the script, that last comma (red in the above) could potentially be a problem. And we would need to see your current version.

Either way, to get the script to fire:

Code:

ajax.load('/pages/events/eventsthisweek.php')

when the page is navigated to via the hash, you would need some extra javascript and/or PHP code.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

**Vernier** · 03-03-2012, 10:42 PM

Originally Posted by jscheuer1

Did you edit the script? If not, this part (highlighted) is meaningless:

except that it might cause an error that allows the browser to load the hash from the href. Because if the return false; part fires, the href will not load the hash into the address bar.

If you did edit the script, that last comma (red in the above) could potentially be a problem. And we would need to see your current version.

Either way, to get the script to fire:

Code:

ajax.load('/pages/events/eventsthisweek.php')

when the page is navigated to via the hash, you would need some extra javascript and/or PHP code.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Hey,

This is the code:

http://codeviewer.org/view/code:238a

This is my site (still being finished) http://habfab.com/v2

**jscheuer1** · 03-06-2012, 06:39 PM

I see you have jQuery on the page. But this does nothing:

Code:

$(function(){
  
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    var hash = location.hash;
    
    // Set the page title based on the hash.
    document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
    
    // Iterate over all nav links, setting the "selected" class as-appropriate.
    $('#nav a').each(function(){
      var that = $(this);
      that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
    });
  })
  
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange();
  
});

because there's no hashchange event in javascript or jQuery. You could create one by changing:

Code:

$(window).hashchange( function(){

to:

Code:

$(window).bind('hashchange', function(){

and you could run it by changing:

Code:

$(window).hashchange();

to:

Code:

$(window).trigger('hashchange');

But just as you've misunderstood how to create and trigger a custom event in jQuery, I think the code in your hashchange function would be error prone as well. And I don't think a custom event is required here anyway.

Those comments in the code look like you may have gotten it from somewhere else, did you?

In any case, best to skip that for now, keep a copy of it around to play with perhaps. We can add it's intent to what's below.

And that's not what I thought you were asking about anyway. I thought you wanted to change the hash while loading AJAX content, and to load AJAX content if there was a hash in the form of '#!/something' in the URL as the page loads.

To do that, put this code in the head of the page after the link to jQuery:

Code:

<script type="text/javascript">
jQuery(function($){
	var hashlinks = $('.jqloadlink').click(function(e){
		e.preventDefault();
		hashlinks.removeClass('selected');
		$(this).addClass('selected');
		var hash = this.hash, page = this.getAttribute('data-page');
		$('#content').load(page, function(){location.hash = hash;});
		document.title = 'The hash is ' + hash.replace(/#?!\//, '');
	});

	hashlinks.each(function(){
		var page, hash;
		if((hash = this.hash) === location.hash && (page = this.getAttribute('data-page'))){
			hashlinks.removeClass('selected');
			$('#content').load(page);
			$(this).addClass('selected');
			document.title = 'The hash is ' + hash.replace(/#?!\//, '');
			return false;
		}
	});
});
</script>

Change this and similar and/or use it as a template for links you want to do this with:

Code:

<a href="#!/events" onclick="ajax.load('/pages/events/eventsthisweek.php','content',false,'#!/events','/pages/events/eventsthisweek.php');return false;">Events This Week</a>

to:

Code:

<a class="jqloadlink" href="#!/events" data-page="/pages/events/eventsthisweek.php">Events This Week</a>

Use the same class for all of them, but use different href hashes for each one and different data-page attributes for each one.

**Vernier** · 03-06-2012, 07:00 PM

Thanks for your reply John! I've now got this code: http://codeviewer.org/view/code:23bf

The menu item for "Events this week" has gone white, it does load the content of the page in the div and it does change the url, but when i visit the url it still shows the index page :S

Thanks

~ David

**jscheuer1** · 03-06-2012, 08:16 PM

Code looks OK. But you still have that hashchange stuff on the page. Get rid of it and the:

Code:

<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>

If there's still a problem, give me a link to the page.

**Vernier** · 03-06-2012, 09:03 PM

Wow, thanks John! That works perfectly!

Also when I change the url in the bar from say /#!/requests to /#!/jobs it only loads the title of the page, I have to press enter twice to load the contents. Also How can I change the title of the loaded page to just say HabFab » V1 ?

Thanks

~ David

**jscheuer1** · 03-06-2012, 10:25 PM

I was just about to tell you to get rid of this when I noticed it was working:

Code:

<script type="text/javascript">
$(function(){
  
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).bind('hashchange', function(){
    var hash = location.hash;
    
    // Set the page title based on the hash.
    document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
    
    // Iterate over all nav links, setting the "selected" class as-appropriate.
    $('#nav a').each(function(){
      var that = $(this);
      that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
    });
  })
  
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).trigger('hashchange');
});
</script>

Now, I'm a little out of my depth here only because there's so much going on on the page that I'm not sure why that's working or if it's cross browser enough to rely upon. But let's not worry about that just yet. If it will work for what we want it to in most browsers, we can try to make adjustments later.

Here's what we should try. First back up what you have, as it's not so bad.

Next, get rid of:

Code:

<script type="text/javascript">
jQuery(function($){
	var hashlinks = $('.jqloadlink').click(function(e){
		e.preventDefault();
		hashlinks.removeClass('selected');
		$(this).addClass('selected');
		var hash = this.hash, page = this.getAttribute('data-page');
		$('#content').load(page, function(){location.hash = hash;});
		document.title = 'The hash is ' + hash.replace(/#?!\//, '');
	});

	hashlinks.each(function(){
		var page, hash;
		if((hash = this.hash) === location.hash && (page = this.getAttribute('data-page'))){
			hashlinks.removeClass('selected');
			$('#content').load(page);
			$(this).addClass('selected');
			document.title = 'The hash is ' + hash.replace(/#?!\//, '');
			return false;
		}
	});
});
</script>

Then change this:

Code:

<script type="text/javascript">
$(function(){
  
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).bind('hashchange', function(){
    var hash = location.hash;
    
    // Set the page title based on the hash.
    document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
    
    // Iterate over all nav links, setting the "selected" class as-appropriate.
    $('#nav a').each(function(){
      var that = $(this);
      that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
    });
  })
  
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).trigger('hashchange');
});
</script>

to this:

Code:

<script type="text/javascript">
$(function(){
	var hashlinks = $('.jqloadlink');
  
  // Bind an event to window.onhashchange
  $(window).bind('hashchange', function(){
    var hash = location.hash;
    
    // Set the page title based on the hash.
    //document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
    
    // Iterate over all class="jqloadlink" links, setting the "selected" class and executing their AJAX code as appropriate.
	hashlinks.each(function(){
		var page;
		if(this.hash === hash && (page = this.getAttribute('data-page'))){
			hashlinks.removeClass('selected');
			$('#content').load(page);
			$(this).addClass('selected');
			return false;
		}
	});
  });
  
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).trigger('hashchange');
});
</script>

Then bring back:

Code:

<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>

It should go just before the hashchange code we just modified. And if you can, upgrade to version 1.3:

https://raw.github.com/cowboy/jquery...hchange.min.js

Even if it doesn't work, let me see it before you get rid of it. We may be able to fix it.

Oh, and now the title will remain whatever the title tag on the page says it is. That currently is:

Code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HabFab V1</title>
<link href="css/global.css" rel="st . . .

Change it to:

Code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HabFab &raquo; V1</title>
<link href="css/global.css" rel="st . . .

or HabFab » V2 - This is version 2, right?

We could have the hash come after, like:

HabFab » V2 » eventstoday

The browser cache may need to be cleared and/or the page refreshed to see changes.

**Vernier** · 03-07-2012, 04:22 PM

Hiya John, thanks for your reply!

My code is now this: http://codeviewer.org/view/code:23cb

It's still loading as "This hash is X"

It's also still taking two times after pressing enter to load.

I cleared my cache, tried holding f5 for a few seconds etc.

Thanks John

~ David

Thread: Hash tag ajax?

Thread Tools

Search Thread

Hash tag ajax?

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions