javascript - submitting form with PJAX - Stack Overflow

admin管理员组

文章数量:1391947

Im using PJAX in my web project, and when I submit my form, PJAX actually handling it, the related stuff is ing 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 plete page reload(the traditional submission)

Im using PJAX in my web project, and when I submit my form, PJAX actually handling it, the related stuff is ing 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 plete page reload(the traditional submission)

• javascript
• php
• jquery
• html
• pjax

Share Improve this question Follow edited Jun 10, 2015 at 20:29 CodeRows asked Jun 10, 2015 at 20:16 CodeRowsCodeRows 1,03311 gold badge1010 silver badges1515 bronze badges 2

• We need to see the form, the problem might be there. – Jose Manuel Abarca Rodríguez Commented Jun 10, 2015 at 20:19
• @JoseManuelAbarcaRodríguez added the form code – CodeRows Commented Jun 10, 2015 at 20:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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.

本文标签： javascriptsubmitting form with PJAXStack Overflow