Clever Geek Handbook

Is there a way to programmatically call and execute pjax from my javascript file?

I have a function that waits for the user to hit type text input and then waits for the user to press the up and down arrow keys. When the user presses the up and down arrow keys, the hoverDown () function is called, which essentially hovers over the lines of strings programmatically. When input is entered, window.location is called and the corresponding page is loaded. The problem is I am using pjaxin your app to dynamically load content and hit a new url without refreshing the page. When I call the window.location function, pjax no longer works, but instead the correct url is loaded and the page is fully refreshed - which is what I am trying to avoid. Is there a way to programmatically call and execute pjax from within my function? Relevant 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

$(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 completeness of CSS:

.active {
    background-color: yellow;
}

If you'd like to see this code in action to understand better, you can check this jsFiddle.

Again I am trying to use pjax to load the content.

+3


source to share


3 answers


I don't know how I missed this in the documentation the first time, but I found an easy 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'});
        }
}
+6


source


After reading the link linked to you, I believe you should use a function $.pjax.click

instead of assigning your url window.location

:



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


source


Take a look at Djax: Dynamic Pjax

https://github.com/beezee/djax

0


source






More articles:


All Articles