2010-12-10 8 views
2

とのリンクは、私は次のリンクに移動するとします:プロセスアンカー(ハッシュ)のjQueryとAjax

http://www.mysite.com/feature#linktosection 

http://www.mysite.com/featureの内容は、jQueryのAJAXでロードされているので、私はAjaxのコンテンツまで#linktosectionに移動することはできませんが読み込まれました。それがロードされると、私はこれは私のjQueryのAJAX呼び出しで#linktosection

に(多分クリックをシミュレート)ナビゲートする必要があります。

$('.changecontext-button').click(function() 
{ 
    $.ajax({               
     type: "POST",             
     url: $(this).attr('href'), 
     success: function(data) { 
      diffSection.html(data); 
     }, 
     error: function(xhr, textStatus, errorThrown) { 
      diffSection.html(xhr.responseText); 
     } 
    }); 
}); 

あなたはjQueryを使ってこれを行う方法を知っていますか?

代替は、hrefのリンクを解析し、ベースURLアンカーURLに分離することができます。成功すると、jQueryセレクタを使用してアンカーリンクを取得し、.click()をシミュレートできます。

jQueryまたはJavaScriptを使用して、他にも優れた方法がありますか?

ありがとうございました。

答えて

3

は最後に、私はそれを実装:

$('.changecontext-button').click(function() 
{ 
    var targetUrl = $(this).attr('href'); 
    $.ajax({               
     type: "POST",             
     url: targetUrl, 
     success: function(data) { 
      diffSection.html(data); 
      var anchor = getAnchor(targetUrl); 
      if (anchor) 
      { 
       $(anchor).click(); 
      } 
     }, 
     error: function(xhr, textStatus, errorThrown) { 
       diffSection.html(xhr.responseText); 
     } 
    }); 
}); 

...

function getAnchor(url) 
{ 
    var index = url.lastIndexOf('#'); 
    if (index != -1) 
     return url.substring(index); 
} 
1

あなたのコンテンツが読み込まれた後、次のように

$('a[name=' + window.location.hash + ']').get(0).scrollIntoView(); 
+1

あなたの 'success:'関数にそのコードを入れてください。それは 'window.location.hash'(ハッシュ部分の後ろのURLのビット)をとり、それを' name'属性としてアンカーを見つけ、その要素をビューにスクロールします。 –

+0

これは動作しません。現在のURLにアンカーがないため、window.location.hashは空を返します。アンカーは '$(this).attr( 'href')'プロパティの上にあるので、この解決策は私にとっては有効ではありません。 –

+1

ああ、そうです。なぜ成功した関数で 'window.location.hash = $( 'a'、data).attr( 'name');'を実行するのはなぜですか? –

2

をこれが私のためにどのような作品であり、コンテンツが読み込まれた後に呼び出されたとき:

window.location.hash = window.location.hash