有没有办法以编程方式从我的javascript文件中调用和执行pjax？ [英] Is there any way to programmatically call and execute pjax from within my javascript file?

问题描述

我有一个等待用户点击文本输入的功能，然后等待用户按向下和向上箭头键。当用户按下向下和向上箭头键时，调用函数hoverDown（），它基本上以编程方式悬停在表行上。按下enter键时，将调用window.location并加载相应的页面。问题是我在整个应用程序中使用 pjax 来动态加载内容并推送新内容没有页面刷新的网址。当我调用window.location函数时，pjax不再起作用，而是加载了正确的url并且发生了整页刷新 - 这是我想要避免的事情。有没有办法以编程方式从我的函数中调用和执行pjax？相关代码：

I have a function that waits for a user to click on an input of type text and then waits for the user to press the down and up arrow keys. When the user presses the down and up arrow keys the function hoverDown() is called which essentially programmatically hovers over tables rows. When enter is pressed, window.location is called and the appropriate page is loaded. The problem is that I'm using pjax throughout my application to dynamically load the content and push the new url without a page refresh. When I call the window.location function, the pjax no longer works, but instead, the correct url is loaded and a full page refresh occurs - the very thing I'm trying to avoid. Is there any way to programmatically invoke and execute pjax from within my function? Relevent Code:

// 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

//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：

//For the sake of completeness, CSS:

.active {
    background-color: yellow;
}

如果你想看到这个代码在行动中以便更好地理解，那么你可以查看这个jsFiddle。

If you want to see this code in action to get a better understanding, you can check out this jsFiddle.

再次，我正在尝试使用 pjax 来加载内容。

And again, I'm trying to use pjax to load the content.

推荐答案

我不知道第一次在文档中我是如何错过这个，但我发现了一种手动调用pjax的简单方法。

I don't know how I missed this in the documentation the first time around, but I found a simple way to manually invoke 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'});
        }
}

这篇关于有没有办法以编程方式从我的javascript文件中调用和执行pjax？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！