submitting form with PJAX

pjax reload
pjax example
pjax tutorial
pjax:complete
defunkt pjax
pjax events

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)

Just use the event object to cancel the default submission behavior:

$(document).on('submit', '.form_class', function(event) {
    event.preventDefault(); // stop default submit behavior

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

If that does not work then perhaps you are cancelling it too late. Try:

$(document.body).on('submit', '.form_class', function(event) {
    event.preventDefault(); // stop default submit behavior when it bubbles to <body>

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

using pjax to submit a form, pjax({ container: "#update_panel", timeout: 2000 }). live('click', function() {}); $("#submit_btn"). click(function() { var form = $('#form'); $. pjax({ container: "#update_panel", timeout: 2000, url: "@Url. I use a yii2 to create a website, trying to use a form to submit some data. Can some body give me a example. Tell me how to use pjax to submit a form without reload the page.

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

Problem submitting a form � Issue #647 � defunkt/jquery-pjax � GitHub, Hi, I am defining a pjax container in that way: $.pjax({ async: false, push: false, url : "http://theurl.com/form", container:� I found a (really hacky) solution: #539.That issue refers to old browsers, but at the moment the pjax bug that forces the need for the hack also appears to be affecting the most current (at the time of this writing) version of Chrome.

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.

$.pjax.submit on a GET form duplicates parameters � Issue #279 , in the <form> tag to clear the existing querystring params (which is the behavior you get when submitting the form without PJAX anyway). The submitted button value is only required when pjaxing a form, right? Noone would expect it when using pjax on a link, wouldn't they? So, adjust handleSubmit and pass the value of a submit button if one was clicked and otherwise submit the value of the fist submit button of the form, in case it was submitted using ENTER key.

Yii2 Pjax Form Submission Example, $.pjax.submit. Submits a form via pjax. $(document).on('submit', 'form[data-pjax]', function(event) { $.pjax.submit(event, '#pjax-container') })� yii2 documentation: Submitting Ajax form. This modified text is an extract of the original Stack Overflow Documentation created by following contributors and released under CC BY-SA 3.0

jQuery Pjax, submit. Submits a form via pjax. This function is experimental but GitHub uses it on Gist so give it a shot! Form submission. Submitting a form is a great use case for the Pjax widget. For this example we will be hashing strings so it will take time for the server to respond. Demo. Our view will include the Pjax widget, a form, a text input field and a submit button.

pjax, Hi - I have a form within a pjax block, when I click the submit button it does update the container without reloading the entire page. Now I would� Form submission. Submitting a form is a great use case for the Pjax widget. For this example we will be hashing strings so it will take time for the server to respond. Demo. Our view will include the Pjax widget, a form, a text input field and a submit button.

Comments
  • We need to see the form, the problem might be there.
  • @JoseManuelAbarcaRodríguez added the form code
  • thanks, but we should not do that, because PJAX will have a timeout, it will actually try to load the response with in that, if it fails then should fallback to normal submission, if we disable the event completely then its not the right way I feel, any suggestions?
  • @CodeRows make a reference to the deferred object for $.pjax.submit and listen to the error event. If that's triggered, submit the form normally. event.preventDefault() should be there if you want to attempt PJAX first.
  • as far as I know- PJAX does this automatically
  • @CodeRows in that case, what's the problem?
  • tried event.preventDefault() but no luck, form still submits in traditional way
  • Add useful description to your answer to make it more helpful