Hi all,
I need some help please. I’ve coded up my portfolio with the following code below, I’m using the BBQ plugin, there’s a page call portfolio.php which leads to a page call graphicdesign.php which populates items from an sql database, when clicking any items it leads to a page call graphicdesignpage.php with variables ?p=page_id, the result after clicking will load the data from sql database into a div call Content, it loads fine, it returns something like this in the url- localhost/website/indexOfficial.php#graphicdesignpage.php?p=suiko_revival_rune
but when I refresh the page, it no longer loads any data of the specific page id
How do I fix this?
Urgent
Thanks
Regards
Kenwin
jQuery code on index.php
$(document).ready(function(){
var loadingImage = $('<img src="./preloader.gif"/>');
//initial
$('body').fadeIn('slow');
if(document){
$('#content').append('<p id="loading"></p>');
$('#loading').append(loadingImage);
$('#content-wrap').fadeOut('fast', function(){
$('#loading').show();
});
$('#content').load('home.php' + ' #content-wrap').fadeIn('slow');
$('#loading').hide();
}
//testcode
//start of coding
$('#nav ul li a, #pointnavwrapper a, .footleft a, #logo a').each(function(){
$(this).attr('href', '#' + $(this).attr('href'));
});
$(window).bind('hashchange', function(e){
var url = e.fragment;
$('#content').load(url + '.php' + ' #content-wrap').hide().fadeIn('slow');
//alert('loaded without fade out');
//remove current state when another state active
$('#nav ul li.current, .webdesign a.current, .graphicdesign a.current, .printdesign a.current, .photography a.current, .personalprojects a.current, #webdesigntext.current, #graphicdesigntext.current, #printdesigntext.current, #photographytext.current, #personalprojectstext.current, .footleft a.current').removeClass('current');
if(url){
$('#content').append('<p id="loading"></p>');
$('#loading').append(loadingImage);
//if hash
$('#nav ul li a[href="#' + url + '"]').parents('li').addClass('current');
$('#content-wrap').fadeOut('fast', function(){
$('#loading').show();
});
}else{
//if no hash
$('#nav ul li:first-child').addClass('current');
}
//dotnavs
if(url){
$('#content').append('<p id="loading"></p>')
$('#loading').append(loadingImage);
//without list items parents
$('#webdesigntext a[href="#' + url + '"], #content a[href="#' + url + '"], .webdesign a[href="#' + url + '"], #graphicdesigntext a[href="#' + url + '"], .graphicdesign a[href="#' + url + '"], #printdesigntext a[href="#' + url + '"], .printdesign a[href="#' + url + '"], #photographytext a[href="#' + url + '"], .photography a[href="#' + url + '"], #personalprojectstext a[href="#' + url + '"], .personalprojects a[href="#' + url + '"], .footleft a[href="#' + url + '"]').addClass('current');
$('#content-wrap').fadeOut('fast', function(){
$('#loading').show();
});
}else{
//if no hash
$('.footleft a:first-child').addClass('current');
}
//CONTENT LINK FUNCTION HERE
//end of content links clicks
});
//hide on exit
// $("a").click(function(event){
// event.preventDefault();
// linkLocation = this.href;
// $('#content-wrap').fadeOut('fast',redirecturl(linkLocation)).hide();
// });
//
// function redirecturl(link) {
// document.location.href= link;
// }
//finish hide on exit
$(window).trigger('hashchange');
//return false;
});
//test content load links
$('#portfoliowrapper a').live({
click:function(){
$(this).attr('href', '#' + $(this).attr('href'));
$(window).bind('hashchange', function(e){
var url = e.fragment;
$('#content').load(url + '.php' + ' #content-wrap').hide().fadeIn('slow');
});
}
});
//Dynamic Content load from php/sql
$('#webdesignitem-wrapper a, #graphicdesignitem-wrapper a, #printdesignitem-wrapper a, #photographyitem-wrapper a, #personalprojectsitem-wrapper a').live({
click:function(e){
$(this).attr('href', '#' + $(this).attr('href'));
$(window).bind('hashchange', function(e){
var url=e.fragment;
$('#content').load(url).hide().fadeIn('slow');
});
}
});
// end of function
code on graphicdesign.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.ba-bbq.min.js"></script>
<?php include ('inc/functions.php'); ?>
<?php require_once('Connections/connectdb.php'); ?>
<?php
mysql_select_db($database_connectdb, $connectdb);
$query_rsGraphicDesign = "SELECT pg_id, pg_link, pg_identity, pg_client, pg_year_completed, pg_work_type, pg_keywords, pg_work_link, pg_roles, path,identity FROM tbl_pages,images WHERE pg_category = 2 AND images.identity=tbl_pages.pg_identity";
$rsGraphicDesign = mysql_query($query_rsGraphicDesign, $connectdb) or die(mysql_error());
$row_rsGraphicDesign = mysql_fetch_assoc($rsGraphicDesign);
$totalRows_rsGraphicDesign = mysql_num_rows($rsGraphicDesign);
?>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<div id="content-wrap">
<div id="graphicdesignitem-wrapper">
<h1>Graphic Design</h1>
<div id="graphic-tagline"><div class="statement">My Imaginations, Concepts and Ideas <br /> in digital art form......</div></div>
<?php if (($totalRows_rsGraphicDesign) > 0){ ?>
<?php do { ?>
<li class="graphicdesignitems"><a href="graphicdesignpage.php?p=<?php echo $row_rsGraphicDesign['pg_identity']; ?>"><div class="graphicdesignimages"><img src="<?php echo $row_rsGraphicDesign['path']; ?>"/></div><div class="graphicdesigntitles"><?php echo $row_rsGraphicDesign['pg_link']; ?></div></a>
</li>
<?php } while ($row_rsGraphicDesign = mysql_fetch_assoc($rsGraphicDesign)); ?>
<?php } ?></div>
</div>
</div>
Code on graphicdesignpage.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.ba-bbq.min.js"></script>
<?php include ('admin/inc/fnc.php'); ?>
<?php require_once('Connections/connectdb.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
mysql_select_db($database_connectdb, $connectdb);
$query_rsContent = "SELECT pg_title,pg_cont,pg_description,identity,pg_client, pg_year_completed,pg_category, pg_work_type, pg_keywords, pg_work_link, pg_roles,nav_id,nav_name,path FROM tbl_pages,tbl_nav, images WHERE images.identity=tbl_pages.pg_identity AND tbl_nav.nav_id=tbl_pages.pg_category AND tbl_pages.pg_identity='$p'";
$rsContent = mysql_query($query_rsContent, $connectdb) or die(mysql_error());
$row_rsContent = mysql_fetch_assoc($rsContent);
$totalRows_rsContent = mysql_num_rows($rsContent);
?>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<div id="content-wrap">
<div id="pageheaderwrap">
<div id="pagethumbnail"><img src="<?php echo $row_rsContent['path']; ?>"/></div>
<div id="metawrap">
<h1 class="graphicdesignheader"><?php echo $row_rsContent['pg_title']; ?></h1>
<li>Category: <?php echo $row_rsContent['nav_name']; ?></li>
<li>Year Completed: <?php echo $row_rsContent['pg_year_completed']; ?></li>
<li>Client: <?php echo $row_rsContent['pg_client']; ?>
<li>Type: <?php echo $row_rsContent['pg_work_type']; ?></li>
<li>Roles: <?php echo $row_rsContent['pg_roles']; ?></li>
<li>Link to work:<br/><a href="<?php echo $row_rsContent['pg_work_link']; ?>"><?php echo $row_rsContent['pg_work_link']; ?></a></li>
</div>
</div>
<div id="pagecontentwrap">
<h2>About this workpiece:</h2>
<?php echo $row_rsContent['pg_cont']; ?>
</div>
</div>
someone on stackoverflow answer with the following-
You are making an ajax call to the php page which will load dynamic content into the DOM. When you are refreshing the page you are retrieving the original page from the webserver or cache. This original copy had none of the dynamic content in it so it knows nothing about the ajax call you made to retrieve the extra content. One way to go about doing what you want is to keep track of ajax calls you have made by using cookies or localStorage and then making the ajax calls that are in your cookies/localStorage on $(document).ready()
But I don’t know how to implement it, I’m still new to jQuery, please help me out
Thanks
Kenwin