Submitting a form using PJAX
I am using PJAX in my web project and when I submit my form the PJAX actually processes it, the related stuff comes in and is replaced in the PJAX container, but after that the default action happens - it's the form, in the traditional way, and the whole page is loaded again
HTML form 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 to call the form
$(document).on('submit', '.form_class', function(event) {
$.pjax.submit(event, '#container_id');
});
it works but default form submission happens too, i want PJAX only way, i don't want full page reload (traditional submission)
source to share
Just use the event object to override the default view behavior:
$(document).on('submit', '.form_class', function(event) {
event.preventDefault(); // stop default submit behavior
$.pjax.submit(event, '#container_id');
});
If that doesn't work, you might be canceling 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');
});
source to share
Listen to dispatch the events you want to dispatch via PJAX, preventDefault()
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
});
});
source to share