Question

我有两个单选按钮，输入字段用于按字搜索和两个日期时间字段，在填写输入字段后单击提交，然后单击提交我有请求操作并在表单下重新加载包含结果的所有页面。现在我需要在搜索字段或其他输入时更改数据，而不重新加载发送ajax请求到操作。为此我使用pjax，安装在bower中并为搜索创建事件 - keyup用于更改另一个字段事件的更改，但是对于一个更改或一个单词我有四个ajax请求操作并且不知道为什么？

 <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>

我的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();
});
});

和我的行动：

    /**
 * @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
    ]);
}

我不知道如何识别问题或重复事件的位置。为什么我对所有事件都有四个ajax请求 - 关于更改，关键字？

Symfony pjax提交表格（许多请求在行动）

0 个答案: