submitting form with PJAX

Question

Im using PJAX in my web project, and when I submit my form, PJAX actually handling it, the related stuff is coming in and replacing in the PJAX container, but after that default action is happening- that is form is getting submitted in the traditional way and entire page is loading again

form HTML is here

<form  class="form_class"><input type="text" name="search" id="search_query" class="basic_input" value="" /><button onclick="this.form.submit();" >Find</button></form>

here is my pjax code for the form invoking

$(document).on('submit', '.form_class', function(event) {
          $.pjax.submit(event, '#container_id');
        });

it works- but the the default form submission too happens, I want the only PJAX way, I dont want the complete page reload(the traditional submission)

Answer 1

Listen for the submit events you want to submit via PJAX, preventDefault() the event, and finally pass the event to $.pjax.submit(event).

For example:

$(document).on('submit', 'form[data-pjax]', function(event) {
    event.preventDefault();
    $.pjax.submit(event, '#pjax-container', {
        'push': true,
        'replace': false,
        'timeout': 5000,
        'scrollTo': 0,
        'maxCacheLength': 0
    });
});

Answer 2

The reason he was getting refreshed is because he was adding a container without adding the fragment.

Change:

$.pjax.submit(event, '#container_id');

to

$.pjax.submit(event, '#container_id', {fragment:'#container_id'});

I think this should be fixed in pjax, if fragment is not set, then use container... but its up to them how to solve it.