2010-11-12 10 views
5

Ho un collegamento che ha un href di "/news#1930". Quando clicco su questo link quando sulla pagina /news, non aggiorna la pagina (aggiunge solo # 1930 alla fine dell'URL). Mi piacerebbe che aggiorni la pagina (sto usando le informazioni dopo il tag # con qualche jquery per caricare quell'articolo specifico in un iframe corrispondente e quando non si aggiorna non caricherà il nuovo articolo). Qualche idea su come forzare l'aggiornamento?Come creare una pagina con Hash Tag Href Refresh

Il codice che ho attualmente è:

$(document).ready(function() { 
    var $news_story  = $(window.location.hash.substring(1)), 
     $news_number  = $news_story.selector, 
     $news_url   = 'http://www.synergy-pr.com/news/mediacenter/index.html?view=article&CustomerID=41b1if9-a17d4va5sf7of15e3kb0pa3kd2y-99d03n8sq4ad2xk8h47j00r98el5pf&ClientArticleID=' + $news_number, //url of specific article 
     $news_url_default = 'http://www.synergy-pr.com/news/mediacenter/index.html?CustomerID=41b1if9-a1hd4xa52f78f1ke3bb0oa3ld2k-90208c8g64x02nh8wf7ad0m181p5su'; //url of general news page 

     if ($news_number.length>0) { //if their is a # with a number, this means it is a sidebar link and should load that specific article 
      $('#news-feed').attr('src', $news_url); 
     } else { //if not, load the main news page 
      $('#news-feed').attr('src', $news_url_default); 
     } 
}); 

risposta

-5

Prova uno spazio prima l'hash:

"/news #1930" 
+0

Va bene, buona chiamata. Questo funziona per il collegamento uno, ma in realtà ho tre di questi collegamenti. Quando hanno tutti spazi, si verifica lo stesso problema di non aggiornamento. Ho violato questo mettendo uno spazio tra il primo, due tra il secondo e tre tra il terzo. Funziona, ma non può essere il modo migliore per farlo. Qualche idea su come migliorare questo? – Andrew

+0

Non ci sono molti URL di hash. Non penso ci sia un'altra strada. Forse la tokenizzazione del valore di hash sarebbe un buon sostituto per l'utilizzo di più. –

6

Gli hash sono pensati per non causare un ricaricare la pagina. Se stai usando jQuery per caricare quell'articolo, potresti voler eseguire history.go (0) o window.location.reload, quindi usare jQuery per trovare il tag hash e processare (sull'evento load della pagina aggiornata).

$(document).ready(function(){ 
    loadArticle = function(articleId){ 
    // code to query/load the article 
    }; 
    if (window.location.hash) 
    articleLoad(window.location.hash); 

    $('.articleLink').click(function(){ 
    window.location.hash = $(this).attr('rel'); 
    window.location.reload(); 
    }); 
}); 

EDIT presumo si sta andando il percorso hash per gli stessi siti web come Facebook ragione fare così - per la capacità book-mark e indicizzazione, nonostante che si sta utilizzando Ajax per l'integrazione senza soluzione di continuità.

EDIT 2 Ecco quello che ho trovato per mostrare ciò a cui mi riferisco. Questo caricherà un hash che è stato passato attraverso l'URL e gestirà qualsiasi nuovo clic su nuovi articoli all'interno della pagina.

<html> 
    <head> 
    <title>Article Viewer</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 

     // loader function to serve up the correct article (pushes the article number to an iFrame 
     // so it can remotely load the article within the page 
     loadArticle = function(articleId){ 
      // set the hash (incase it's called from a link instead of a page load) 
      window.location.hash = articleId; 
      // change the iFrame src to the actual path fo the article page (customize this to fit your needs) 
      $('#article-frame').attr('src','view_article.php?article='+articleId); 
     }; 

     // check for a hash (#????) tag in the URL and load it (to allow for bookmarking) 
     if (window.location.hash) 
      loadArticle(window.location.hash.substring(1)); 

     // attack a click event to all the links that are related to loading an article 
     $('.article-link').click(function(){ 
      // grab raw article id from rel tag 
      var articleId = $(this).attr('rel'); 

      // shove loading it off to the "loader" 
      loadArticle(articleId); 

      // cancel the navigation of the link 
      return false; 
     }); 
     }); 
    </script> 
    </head> 

    <body> 
    <ul> 
     <?php for ($a = 1; $a < 10; $a++) echo "<li><a href=\"view_article.php?article={$a}\" rel=\"{$a}\" class=\"article-link\">View Article {$a}</a></li>\r\n  "; ?> 
    </ul> 
    <iframe id="article-frame" src="view_article.php?article=0" width="640" height="480"> 
     This page uses frames, unfortunately your browser does not support them. 
    </iframe> 
    </body> 
</html> 
+0

L'articolo si trova all'interno di un iframe, che è in realtà ciò che ha causato tutti questi problemi. In tutte le pagine del sito sono disponibili i collegamenti della barra laterale per gli articoli all'interno dell'iframe. Avevo bisogno di un modo per collegare entrambi alla pagina delle notizie e quindi aprire l'articolo corretto. Il modo in cui ho trovato di farlo è stato aggiungere un tag hash ai link della barra laterale, quindi convertirlo in un numero di quattro cifre corrispondente all'ID articoli e aggiungerlo alla fine dell'URL iframe. Funziona su tutte le pagine tranne il problema sopra. Se si dispone di un approccio migliore all'intero problema, sarei aperto ad esso di sicuro. – Andrew

+0

Nella funzione loadArticle() sopra puoi informare l'iFrame per cambiare posizione (qualcosa con l'effetto di $ ('#iframe') .attr ('src', 'http: //mysite.com/article'+articleId+' .html '); - A meno che non comprenda completamente la situazione, quello che stai cercando di realizzare dovrebbe essere abbastanza semplice –

+0

Sono sicuro che dovrebbe essere abbastanza facile, ma sto avendo qualche problema a capirlo. Ho aggiunto il codice che ho attualmente nella mia domanda precedente. Questo (con il diverso numero di spazi tra ogni link # tag) funziona alla grande, so solo che questo non è il modo migliore per farlo e vorrei farlo nel modo corretto modo. Qualsiasi aiuto sarebbe fantastico. – Andrew

-1

Prova questo:

$("a").click(function(){ 
    $("a").click(function(e){ 

    var location = $(window).attr('location').pathname.substring(1); 
    var goingToPage = $(this).attr('href'); 

    // if goingToPage is same page as current page, then assign new url and reload 
    // this is required to reload the page on a hash tag 
    if(goingToPage.indexOf(location) != -1){ 
     $(window).attr('location').assign(goingToPage); 
     $(window).attr("location").reload(); 
    } 
}); 
}); 
0

$("a").click(function() { 
 
     var hash = this.hash; 
 
     if (hash != "" || hash!= null) 
 
      window.location.reload(); 
 
    });

Questo codice verrà ricaricata ogni collegamento pagina strega ha hash