2012-12-24 29 views
0

工作我使用jQuery地址,我不能讓它來初始化刷新......(除了IE所有主流瀏覽器),這裏有問題...jQuery的「地址」上沒有刷新

當我點擊一個鏈接時,ajax會加載它完美的加載,並將鏈接「selected」添加到鏈接中。當我使用後退按鈕時,它也很完美,但是當我點擊鏈接後點擊刷新按鈕,它會重新加載原始狀態(減去ajax),並且不會將「selected」類添加到任何鏈接或之後再加載ajax 。

這裏是鏈接到頁面。 http://www.weightlossexp.com/articles

任何幫助是非常感謝,在此先感謝。

[編輯]代碼

jQuery的

var init = true, 
     state = window.history.pushState !== undefined; 
     // Handles response 
     var handler = function(data,topic,w) { 
      $("#title_back h1").hide().html(topic).fadeIn(800); 
      $('title').html(topic); 
      $('#content').html(data).animate({width:w},1500); 
      $('#lc').show(); 
      // $.address.title(/>([^<]*)<\/title/.exec(data)[1]); 
     }; 
     $.address.state('/articles').init(function() { 
      // Initializes the plugin 
      $('#lc a').address();     
     }).change(function(event) { 
      // Selects the proper navigation link 
      $('#lc a').each(function() { 
       //alert($(this).attr('href')+' - - '+$.address.state() + event.path); 
       if ($(this).attr('href') == ($.address.state() + event.path)) { 
        $(this).addClass('selected').focus(); 
       } else { 
        $(this).removeClass('selected'); 
       } 
      }); 
      var classL = $(".selected").length; 
      if(classL == 1){ 
       var topic = $('.selected h2').html(); 
       var action = event.path.substr(1); 
       var width = '100%'; 
      }else{ 
       var topic = "Topics"; 
       var action = ''; 
       var width = '0px'; 
      } 
      if (state && init) { 
       init = false; 
      } else { 
       // Loads the page content and inserts it into the content area 
       $.ajax({ 
        url: "scripts/ajax/getSubTitles.php", 
        data: {action:action}, 
        type: "post", 
        success: function(data, textStatus, XMLHttpRequest) { 
         handler(data,topic,width); 
        } 
       }); 
      } 
     }); 

的Html

<div id="lc" style="position:absolute; overflow:hidden;"> 
        <a href="/articles/ap" id="ap"><div class="topics" style="border-top:1px solid #d1d1d1; margin-top:20px;"><h2>Anatomy and Physiology</h2></div></a> 
        <a href="/articles/end" id="end"><div class="topics"><h2>Endurance</h2></div></a> 
        <a href="/articles/flex" id="flex"><div class="topics"><h2>Flexibility</h2></div></a> 
        <a href="/articles/myth" id="myth"><div class="topics"><h2>Myths</h2></div></a> 
        <a href="/articles/nut" id="nut"><div class="topics"><h2>Nutrition 101</h2></div></a> 
        <a href="/articles/corr" id="corr"><div class="topics"><h2>Post-Rehab/Corrective Exercise</h2></div></a> 
        <a href="/articles/power" id="power"><div class="topics"><h2>Power</h2></div></a> 
        <a href="/articles/stab" id="stab"><div class="topics"><h2>Stability</h2></div></a> 
        <a href="/articles/str" id="str"><div class="topics"><h2>Strength/Resistance Training</h2></div></a> 
        <a href="/articles/supp" id="supp"><div class="topics"><h2>Supplements</h2></div></a> 
        <a href="/articles/wg" id="wg"><div class="topics"><h2>Weight Gain</h2></div></a> 
        <a href="/articles/wl" id="wl"><div class="topics"><h2>Weight Loss</h2></div></a> 
       <div id="content"> 
       </div> 

回答

1

與您的代碼的問題是,您在其中包含您的JavaScript

<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="lib/jquery.address-1.5.min.js"></script> 

點擊鏈接後,該URL將

http://www.weightlossexp.com/articles

改變

http://www.weightlossexp.com/articles/something

和這兩個JS文件不能是創始人d在新的url中,所以jquery和jquery.address都不會被加載。

只需用斜槓'/'啓動JS文件的路徑,您的代碼就可以正常工作。

這樣的代碼將是這樣的:

<script type="text/javascript" src="/lib/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="/lib/jquery.address-1.5.min.js"></script> 
+0

那麼這一定幫助,但它並不能完全解決問題。所有鏈接現在都可以使用,但仍不會刷新內容。 –

+0

我明白了,問題在於,在加載頁面之後,您應該檢查以確定您是否位於文章的根目錄或其中一個鏈接中,然後您必須顯示'content'div和hind'lc'div 。 – EhsanT

+0

太棒了!謝謝您的幫助。 –