Symfony pjax submit form(many request in action)

[shubaivan]

I have for with two radio buttons, with input field for search by word and two date time fields, early after filling input fields and click submit I have request to action and reload all page with result under the form. Now I need in when in search fields or another input change data, without reload send ajax request to action. For this I use pjax, install in bower and create event for search - keyup for change another fields event on change, but for one change or one word I have four ajax request for action and don't know why ?

 <div class="filters" id="filter_form">
    <form action="{{ path('outbound_invoices') }}" method="get" data-pjax="1">
        <div class="choice-group" id="filter-status" role="group" data-toggle="buttons">
            <label class="btn active">
                <input type="radio" name="status" value={{ status_draft }} checked="checked">{{ status_draft|trans }}
            </label>
            <label class="btn">
                <input type="radio" name="status" value={{ status_sent }}>{{ status_sent|trans }}
            </label>
            <label class="btn">
                <input type="radio" name="status" value={{ status_paid }}>{{ status_paid|trans }}
            </label>
        </div>

        <div class="choice-group" id="filter-type" role="group" data-toggle="buttons">
            <label class="btn active">
                <input type="radio" name="type" value="all" checked="checked">all
            </label>
            <label class="btn">
                <input type="radio" name="type" value="contract">contract
            </label>
            <label class="btn">
                <input type="radio" name="type" value="other">other
            </label>
        </div>

        <input name="search" id="filter-id" placeholder="{{ 'search'|trans }}" class="form-control" value="{{ app.request.get('search') }}">
        <p>from Date: <input type="text" name="from_date" id="from_datepicker" dataformatas="dd-mm-yyyy"></p>
        <p>to Date: <input type="text" name="to_date" id="to_datepicker" dataformatas="dd-mm-yyyy"></p>
    </form>
</div>

my js:

const $ = require('jquery');

$(document).ready(function () {
$('body').on('click', '.js-clickable', function () {
    window.location.href = $(this).data('href');
});

// do not add a browser history entry upon navigation
$.pjax.defaults.push = false;

$(document).pjax('#pjax-container a', '#pjax-container');

$(document).on('submit', 'form[data-pjax]', function (event) {
    event.preventDefault(); // stop default submit behavior
    $.pjax.submit(event, '#pjax-container');
});

const search = $('#filter-id');
const choice_group = $('#filter-type');
const choice_status = $('#filter-status');
const from_datepicker = $('#from_datepicker');
const to_datepicker = $('#to_datepicker');

from_datepicker.on('change', function () {
    $('form[data-pjax]').submit();
});

to_datepicker.on('change', function () {
    $('form[data-pjax]').submit();
});

choice_status.on('change', function () {
    $('form[data-pjax]').submit();
});

choice_group.on('change', function () {
    $('form[data-pjax]').submit();
});

search.on('keyup', function () {
    $('form[data-pjax]').submit();
});

$(document).on('pjax:complete', function () {
    search.focus();
});

$(document).on('pjax:timeout', function (event) {
    // Prevent default timeout redirection behavior
    event.preventDefault();
});
});

and my action:

    /**
 * @Route("/manage/outbound_invoices", name="outbound_invoices")
 * @Method("GET")
 */
public function outBoundInvoiceListsAction(Request $request)
{
    $paginationBoundInvoices = $this->getApplicationOutboundInvoice()
        ->getOutboundInvoiceByParameters(
            $request->query,
            $request->query->get(self::DATE_END),
            $request->query->get(self::DATE_START)
        );

    $this->get('session')->set('filter', $request->query);

    $template = $request->isXmlHttpRequest()
        ? 'ERP/economy/outbound_invoice/parsher/_list_outbound_invoices.html.twig'
        : 'ERP/economy/outbound_invoice/outbound_invoices.html.twig';

    return $this->render($template, [
        'outboundInvoices' => $paginationBoundInvoices,
        'status_draft' => OutboundInvoice::STATUS_DRAFT,
        'status_paid' => OutboundInvoice::STATUS_PAID,
        'status_sent' => OutboundInvoice::STATUS_SENT
    ]);
}

I don't know how to identification where the problem or duplicated event.
Why I have four ajax request in action for all event - on change, on keyup ??

[mislav]

Sorry, I'm not sure what's going wrong here and why do you have duplicate requests. It sounds like this might be a problem with usage of this project, and not a bug in our code. Did you ever solve this?

[shubaivan]

yes, I resolved