Good evening,
I am currently developing a website for a fan site for an online game. I am trying to get it to where the top portion (logo, radio panel and navigation bar) doesn't reload on a new page call, so the radio doesn't refresh and take a few seconds to start playing again.
Using ajax, I've easily been able to get different page loads to work, but when I go back to a page which utilizes jquery and javascript, it doesn't load the content back up.
http://habbfinity.ca/V4$-$4V/ is the current test URL. The top portion, where the Twitter feed, recent posts and recent badges are, works as normal when you first visit. Going to the Habbfinity drop down to "About Us" then back to "Home", prevents those three content boxes from loading correctly and the tooltips on the recent guide images don't function correctly.
Here's the ajaxpage script being used:
/***********************************************
* Dynamic Ajax Content- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* 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
}
}
}
Here is what my index.php looks like:
<?php
require('../panel/includes/config.php');
include 'header.php';
?>
<div id="contfill">
<?php include 'home.php'; ?>
</div>
<?php
include 'footer.php';
?>
In header.php I have the following setup for links to appropriately call the page loads:
<a href="javascript:ajaxpage('about.php', 'contfill');">About</a>
<a href="javascript:ajaxpage('home.php', 'contfill');">Home</a>
The three scripts in question are:
<a class="twitter-timeline" data-lang="en" data-width="250" data-height="200" data-theme="light" href="https://twitter.com/Habbfinity">Tweets by Habbfinity</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
+
<script type="text/javascript" src="http://habbfinity.ca/forum/external.php?type=js"></script>
<script language="" type="text/javascript">
<!--
for (x = 0; x < 4; x++) {
document.writeln("<a href=\"http://habbfinity.ca/forum/showthread.php?t="+threads[x].threadid+"\" target=\"_blank\">"+threads[x].title+"</a> <br>(Posted By: "+threads[x].poster+")<br><br />");
}
//-->
</script>
+
<script>
$(function() {
var badgeUrl = 'http://habboo-a.akamaihd.net/c_images/album1584/';
$.getJSON( 'http://habboemotion.com/api/badge', function( badges ) {
$.each( badges.list, function( key, badge ) {
$('div#badges').append('<img src="'+badgeUrl+badge.code+'.gif" class="thumbnail aleft" alt="Badge" data-toggle="tooltip" data-placement="top" data-html="true" title="'+badge.name+' - '+badge.desc+'">');
return (key !== 29);
});
});
});
</script>
EDIT
I decided to go a URL path method with .htaccess and a switch case to load the appropriate page.
.htaccess
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [QSA,L]
index.php
<?php
function getCurrentUri() {
$basepath = implode('/', array_slice(explode('/', $_SERVER['SCRIPT_NAME']), 0, -1)) . '/';
$uri = substr($_SERVER['REQUEST_URI'], strlen($basepath));
if (strstr($uri, '?')) $uri = substr($uri, 0, strpos($uri, '?'));
$uri = '/' . trim($uri, '/');
return $uri;
}
require('../panel/includes/config.php');
include 'header.php';
?>
<div id="contfill">
<?php
$base_url = getCurrentUri();
switch ($base_url) {
case '/':
require 'home.php';
break;
case '/home':
require 'home.php';
break;
case '/about':
require 'about.php';
break;
default:
header('HTTP/1.0 404 Not Found');
require '404.php';
break;
}
?>
</div>
<?php
include 'footer.php';
?>
Works correctly. I'm sure there's an easier way to do this, but as long as it works, it's fine for me.
