4

ユーザーがテキストタイプの入力をクリックするのを待ってから、ユーザーが下矢印キーと上矢印キーを押すのを待つ機能があります。ユーザーが下矢印キーと上矢印キーを押すと、関数hoverDown（）が呼び出されます。この関数は、基本的にプログラムでテーブルの行にカーソルを合わせます。Enterキーを押すと、window.locationが呼び出され、適切なページがロードされます。問題は、アプリケーション全体でpjaxを使用してコンテンツを動的にロードし、ページを更新せずに新しいURLをプッシュしていることです。window.location関数を呼び出すと、pjaxは機能しなくなりますが、代わりに正しいURLが読み込まれ、ページ全体が更新されます。これは避けようとしていることです。関数内からプログラムでpjaxを呼び出して実行する方法はありますか？関連コード：

// HTML

<div id="main">
<input type="text" class="table-search" id="search" autocomplete="off"   placeholder="Search Clients..." /><table class="table" id="tblData">
<thead><tr><th>Name</th> <th>Title</th></tr></thead>
<tbody id="tblDataBody">
<tr><td><a href="http://lar.loc/cases">Scott</a></td> <td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Billy</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">George</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Sara</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">John</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Megan</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Ben</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Jully</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Bethany</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Alen</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Jane</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Alice</a></td><td>Client</td></tr></tbody></table>
</div>

// Javascript

$(document).ready(function(){
    $("#main").on("keydown", "#search", hoverDown);
});

function hoverDown(e) {
    var $tbl = $('#tblDataBody');
    var $cur = $('.active', $tbl).removeClass('active').first();

    if (e.keyCode === 40) { //down
        if ($cur.length) {
            $cur.next().addClass('active');
        } else {
            $tbl.children().first().addClass('active');
        }
    } else if (e.keyCode == 38) { //up
        if ($cur.length) {
            $cur.prev().addClass('active');
        } else {
            $tbl.children().last().addClass('active');
        }
    } else if (e.keyCode == 13) {
        if ($cur.length) {
            window.location = $cur.find("a").attr("href");
        }
    }
}

//完全を期すために、CSS：

.active {
    background-color: yellow;
}

理解を深めるためにこのコードの動作を確認したい場合は、このjsFiddleを確認してください。

繰り返しになりますが、私はpjaxを使用してコンテンツを読み込もうとしています。

4

3 に答える 3

7

初めてドキュメントでこれを見逃した理由はわかりませんが、手動でpjaxを呼び出す簡単な方法を見つけました。

} else if (e.keyCode == 13) { 
        if ($cur.length) {
            // manually invoke pjax after enter has been pressed
            var $url = $cur.find("a").attr("href");
            $.pjax({url: $url, container: '#main'});
        }
}
于 2013-02-18T14:18:48.013 に答える
0

リンクしたドキュメントを読んだ後、URLを次の場所$.pjax.clickに割り当てるのではなく、関数を使用する必要があると思います。window.location

var container = $(this).closest('[data-pjax-container]')
$.pjax.click(event, {container: container})
于 2013-02-18T13:55:36.550 に答える
0

Djax：DynamicPjaxをご覧ください

https://github.com/beezee/djax

于 2013-06-15T11:13:41.333 に答える