1

この Web サイトで ajax ベースの Web サイトを開発しています。要求されたすべてのページの履歴を ajax 呼び出しで作成しています。1 時間の検索の後、状態を管理するための Histroy.js ライブラリを取得しました。しかし、私の問題は、ajax を呼び出して div のブロックのみを更新する要素を取得することです。だから私はこのようなものが欲しい。

<a href="a.php" class="ajax" data-block-to-update="a_block"> 
<div id="a_block">

ユーザーがこのリンクをクリックすると、ajax呼び出しが行われ、応答を取得した後、IDが「a_block」であるdivを更新する必要があります

ここに私のスクリプトがあります

<script>
    $(document).ready(function(){
        var History = window.History;
        var State = History.getState();
        var $log = $('#log');

        History.pushState({state:'1',rand:Math.random(),content:$('#main').html(),block:'main'}, 'index', State.url);
        //History.log(State.data, State.title, State.url);

        $('.ajax').live('click',function(){
        var gen_url = $(this).attr('href');
        var bl = $(this).attr('data-block');
            $.ajax({
                url: gen_url,
                success: function(data) {
                    console.log($(this));
                  $('#'+bl).html(data);
                  History.pushState({state:gen_url,rand:Math.random(),content:data,block:bl}, gen_url, gen_url);
                }
                  });
        return false;
        });

        $.ajaxSetup({

              });

        $(document).bind("ajaxComplete", function(e, xhr, settings){
                            // need to get element which make ajax request
            console.log(xhr);
            //var obj = $(e.target.activeElement);
            //alert(obj.attr('data-block'));

        });

        History.Adapter.bind(window, 'statechange', function() {
            var State = History.getState();
            if(State.data.content!="" && State.data.block!="")
            {
                //History.log(State.data, State.title, State.url);
                $('#'+State.data.block).html(State.data.content);
            }
            else
                return false;
        });
    });

</script>

「ajaxComplete」イベントハンドラでajaxリクエストを呼び出す要素を取得するには?

4

2 に答える 2

0

私が理解していることから、あなたの問題はオブジェクトを他の関数に渡すことです。

その場合、最初の関数の外側で変数を宣言し、関数を使用してその変数にデータを保存する必要があります。関数で初期化されたすべての変数は、関数の最後で削除されます。

あなたの場合、あなたのコードにはほんの少しの変更しかないと思います：

<script>
$(document).ready(function(){
    var ajax_element;
    // Do all you need as before…

    $('.ajax').live('click',function(){
    ajax_element = $(this);
    var gen_url = $(this).attr('href');
    var bl = $(this).attr('data-block');
        $.ajax({
            url: gen_url,
            success: function(data) {
                console.log($(this));
              $('#'+bl).html(data);
              History.pushState({state:gen_url,rand:Math.random(),content:data,block:bl}, gen_url, gen_url);
            }
              });
    return false;
    });
    // Etc…

    $(document).bind("ajaxComplete", function(e, xhr, settings){
        // need to get element which make ajax request ->
        // the element you want to catch here is: ajax_element
        console.log(xhr);
        //var obj = $(e.target.activeElement);
        //alert(obj.attr('data-block'));

    });
})
</script>

ajax 呼び出しが完了する前に 2 番目の関数がトリガーされないように注意する必要があります。ajax成功関数内から呼び出すことができる関数を作成して、早期にトリガーされないようにすることをお勧めします(後でトリガーする必要がある場合)。

また、通常のイベントの伝播を最初からブロックすることをお勧めするリンクを使用する場合、一部のブラウザは JS からの要求を実行する前にアクションを伝播します。

于 2012-12-03T09:17:08.237 に答える
0

私があなたを正しく理解していれば、これを解決する 2 つの方法を考えることができます。

最初のものは、すべてのデータをキャプチャする php ファイルを持つことです。jQuery を使用しているので、http://api.jquery.com/jQuery.post/を使用します。

あなたの質問から少し拡散したのは、どの情報を収集したいのかということでした.hrefデータが欲しいと言うなら、私はすべての要素を収集するために次のようなものを書きます:

$('a[href]');

bind を使用してイベント リスナーを追加できます: http://api.jquery.com/bind/

$('a[href]').bind('click', function()
{
    saveHistory();
    document.location = this.href;
});

そして、リンク 'onclick' が false を返すように設定します。その場合、リンクをクリックしてもサイトに転送されず、javascript で転送を処理できます。

しかし、これまでにこれを行ったことはありません。これは、この件に関する私の簡単な考えにすぎません。それがいくつかの助けになることを願っています。

于 2012-12-03T08:48:02.460 に答える