jQuery动态内容链接通过php从sql数据库加载url但是当刷新时它不加载

时间:2013-09-27 01:22:43

标签: javascript php jquery sql dynamic

我需要一些帮助。 我用下面的代码编写了我的投资组合, 我正在使用BBQ插件,这是一个页面调用portfolio.php,它导致页面调用graphicdesign.php,它填充sql数据库中的项目,当点击任何项目时,它会导致页面调用graphicdesignpage.php变量{ {1}},点击后的结果会将数据从sql数据库加载到div调用?p=page_id,它加载正常,它在url- #content

中返回这样的内容

但是当我刷新页面时,它不再加载特定页面ID的任何数据

我该如何解决这个问题?

紧急

由于

此致

Kenwin

index.php上的jQuery代码

localhost/website/indexOfficial.php#graphicdesignpage.php?p=suiko_revival_rune

在graphicdesign.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 

imagedesignpage.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>

1 个答案:

答案 0 :(得分:0)

您正在对php页面进行ajax调用,该页面将动态内容加载到DOM中。刷新页面时,您将从Web服务器或缓存中检索原始页面。这个原始副本没有任何动态内容,所以它对你为检索额外内容所做的ajax调用一无所知。实现目标的一种方法是跟踪您使用cookie或localStorage进行的ajax呼叫,然后在localStorage上进行cookie / $(document).ready()中的ajax呼叫}