0

I'm trying to load a div from another page using ajax but maintain the URL integrity using the History API. The ajax and history part is working (ie. the div is loading and the url is changing) but for some reason my div contains my entire page not just what is meant to be in the div!

This is the case for both the original page and the page div being loaded.

Stripped back HTML

<!DOCTYPE html>
<html>
  <body>
    <div id="slider">
        ... all the page content
        <a rel='tab' href="p/password.jsf">Forgot password?</a>
    </div>
  </body>
</html>

JS

<script>
    $(function(){
        $("a[rel='tab']").click(function(e){

            //get the link location that was clicked
            pageurl = $(this).attr('href');

            //to get the ajax content and display in div with id 'content'
            $.ajax({
                url:pageurl + '?rel=tab',
                success: function(data){
                    $('#slider').html(data);
                }});

            //to change the browser URL to 'pageurl'
            if(pageurl!=window.location){
                window.history.pushState({path:pageurl},'',pageurl);    
            }
            return false;  
        });
    });

    /* the below code is to override back button to get the ajax content without reload*/
    $(window).bind('popstate', function() {
        $.ajax({
            url:location.pathname+'?rel=tab',
            success: function(data){
                $('#slider').html(data);
            }});
    });
</script>
4

4 に答える 4

2

ajax を使用してページの一部を取得する場合は、要素のloadメソッドを使用しidてコンテンツを取得できます。

$('#slider').load(pageurl + '?rel=tab #container_with_content_to_fetch', function() {
  alert('callback after success.');
});

についての詳細情報load():情報

于 2013-03-11T16:45:22.677 に答える
0

デフォルトのクリック アクションを停止する必要がある場合があります。あなたのリンクは... リンクとして機能しているように見えます。

$("a[rel='tab']").click(function(e){
    e.preventDefault();
    ...
于 2013-03-11T16:40:40.473 に答える
0

ajax 応答で受け取るページの特定の部分を選択する場合は、次のようにします。

   /* the below code is to override back button to get the ajax content without reload*/
    $(window).bind('popstate', function() {
        $.ajax({
            url:location.pathname+'?rel=tab',
            success: function(data){
               var mydiv = $('#my_div_id' , data ) // this will get the div with an id of #my_div_id
                $('#slider').html(mydiv );
            }});
    });
于 2013-03-11T16:41:18.303 に答える
0

$.ajaxページ全体をロードします。使用できます.load()

それ以外の

$.ajax({ url:pageurl + '?rel=tab', success: function(data){ $('#slider').html(data); }});

あなたが使用することができます

$('#slider').load(pageurl + ' [rel=tab]');

ドキュメントはこちらです。

于 2013-03-11T16:50:42.980 に答える