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" autoplete="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="/cases">Scott</a></td> <td>Client</td></tr>
<tr><td><a href="/cases">Billy</a></td><td>Client</td></tr>
<tr><td><a href="/cases">George</a></td><td>Client</td></tr>
<tr><td><a href="/cases">Sara</a></td><td>Client</td></tr>
<tr><td><a href="/cases">John</a></td><td>Client</td></tr>
<tr><td><a href="/cases">Megan</a></td><td>Client</td></tr>
<tr><td><a href="/cases">Ben</a></td><td>Client</td></tr>
<tr><td><a href="/cases">Jully</a></td><td>Client</td></tr>
<tr><td><a href="/cases">Bethany</a></td><td>Client</td></tr>
<tr><td><a href="/cases">Alen</a></td><td>Client</td></tr>
<tr><td><a href="/cases">Jane</a></td><td>Client</td></tr>
<tr><td><a href="/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");
        }
    }
}

//For the sake of pleteness, CSS:

.active {
    background-color: yellow;
}

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

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

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" autoplete="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");
        }
    }
}

//For the sake of pleteness, CSS:

.active {
    background-color: yellow;
}

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

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

• javascript
• jquery
• pushstate
• pjax

3 Answers 3

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'});
        }
}

After reading over the doucmentation you linked, I believe you should be using the $.pjax.click function instead of assigning your URL to window.location:

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

Have a look at Djax : Dynamic Pjax

https://github./beezee/djax