Log in

View Full Version : Hash tag ajax?


Vernier
02-20-2012, 06:24 PM
Hey, this is some of my 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:

<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:



<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:


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
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:


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:


$(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:


$(window).hashchange( function(){

to:


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

and you could run it by changing:


$(window).hashchange();

to:


$(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:


<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:


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

to:


<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:


<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 &raquo; 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:


<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:


<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:


<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:


<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:


<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-hashchange/v1.3/jquery.ba-hashchange.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:


<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:


<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 &raquo; 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
jscheuer1
03-07-2012, 04:37 PM
You haven't followed the instructions from my previous post.

Go back and reread them more carefully.
Vernier
03-07-2012, 05:01 PM
The title has changed now, and it loads now, thanks so much John! :D

~ David
Vernier
03-08-2012, 11:37 PM
Also John, when my content loads, the white background of the container doesn't show, instead it loads onto the background. It should load into the container like on the index page.

Thanks :)

~ David
jscheuer1
03-09-2012, 01:45 AM
Is there a question in there?
Vernier
03-09-2012, 07:47 AM
I was wondering if when the content loads, it loads with the same white container as the index page, how can I achieve this?

Thanks :)

~ David
jscheuer1
03-09-2012, 12:54 PM
It depends upon how dramatic and/or extreme you want to be about it.

The first thing to do would be to set the background color of the target division to white. Put this in your stylesheet:


#container {
background-color: white;
minHeight: 400px;
}

That might be enough for you. But we could also empty the target division before loading in the new content:


<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').empty().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>


Even add a loading image and/or text and remove them when the content loads (you'd need a loading.gif):


if(this.hash === hash && (page = this.getAttribute('data-page'))){
hashlinks.removeClass('selected');
$('#content').empty()
.css({background: 'white url(loading.gif) center no-repeat')}
.html('Loading . . .')
.load(page, function(){$('#content').css({background: ''});});
$(this).addClass('selected');
return false;
}

Other things could be done. But those are the options that spring to mind.

But even with some or all of that, once the external page loads it will bring with it any styles it has inline, and perhaps any or some it may have in stylesheets. There are ways to stop them or some of them from affecting the appearance of the new content once it's loaded. You could have overriding style in the stylesheet on the 'top' page, changing what we just added at the beginning of this post to:


#container {
minHeight: 400px;
}
#container, #container * {
background-color: white !important;
}

You should be careful with that, it might render some of the imported text illegible (white on white, or light on white). You could do:


#container {
minHeight: 400px;
}
#container, #container * {
background: white !important;
color: black !important;
}

But at that point it would look pretty drab.

As I say, it all depends upon how dramatic and/or extreme you want to go.
Vernier
03-09-2012, 04:04 PM
Hey, thanks for your reply.

This is my CSS: http://codeviewer.org/view/code:23d7

This is my index.php: http://codeviewer.org/view/code:23d8

It still shows with no background when I load it. What did I do wrong?

Thanks

~ David
jscheuer1
03-09-2012, 07:05 PM
Let's see, I had a typo:


.css({background: 'white url(loading.gif) center no-repeat')})

should be:


.css({background: 'white url(loading.gif) center no-repeat'});

But I'm unclear what you want. Do you want it to be a white background while it's loading? After it's loaded? Never?
Vernier
03-09-2012, 10:38 PM
Hey John,

On the index page where it says:

"Welcome!"

The white space around that (the container) I want it to stay white, so the content loads into that, not with no background.

Thanks :)

~ David
jscheuer1
03-10-2012, 04:11 AM
Yeah well then for now remove everything else we just added and concentrate on adding the style (use the !important keywords as shown because what you did before wasn't taking effect):


#container {
background-color: white !important;
minHeight: 400px !important;
}

And let's see what that gets us. As I said in my last post, there was a syntax error in my post before that in the javascript part. That may or may not have been responsible for a bigger problem I now see. That is the external pages are loading in a script generated iframe! I don't think that was happening before the latest script changes. But we need to find out.
Vernier
03-10-2012, 12:15 PM
Hey John,

This is my new CSS: http://codeviewer.org/view/code:23db

I've added the !important keywords into the css but it still doesn't load with the white container.

The images for the content box are here:

Content Background (http://habfab.com/v2/images/content_background.PNG)

Content Bottom (http://habfab.com/v2/images/content_bottom.PNG)

Content Top (http://habfab.com/v2/images/content_top.PNG)

The top image should be at the top, then the background should repeat to the size of the document, then the bottom should be after the last background.

Thanks :)

~ David