Есть ли способ программно вызвать и выполнить pjax из моего файла javascript?

У меня есть функция, которая ждет, пока пользователь нажмет на ввод текста, а затем ждет, пока пользователь нажмет клавиши со стрелками вниз и вверх. Когда пользователь нажимает клавиши со стрелками вниз и вверх, вызывается функция 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>

//Джаваскрипт

$(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 для загрузки контента.


javascript jquery pushstate pjax
person Scott    schedule 18.02.2013    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Я не знаю, как я пропустил это в документации в первый раз, но я нашел простой способ вручную вызвать 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'});
        }
}
person Scott    schedule 18.02.2013
comment
ах, я вижу, вы нашли ответ на эту проблему :) - person Alnitak; 18.02.2013
comment
@Alnitak Я сделал. Забавно, как ответы иногда становятся очевидными после публикации вопроса. - person Scott; 18.02.2013

arrow_upward
0
arrow_downward

После прочтения документации, которую вы связали, я считаю, что вам следует использовать функцию $.pjax.click вместо того, чтобы назначать свой URL-адрес window.location:

var container = $(this).closest('[data-pjax-container]')
$.pjax.click(event, {container: container})
person jbabey    schedule 18.02.2013

arrow_upward
0
arrow_downward

Взгляните на Djax: Dynamic Pjax

https://github.com/beezee/djax

person Abhishek Goel    schedule 15.06.2013