Datepicker не является функцией после запроса ajax - PullRequest
Новая
       19

Datepicker не является функцией после запроса ajax

0 голосов
/ 30 апреля 2018

Я пишу простой поисковик в Lumen Framework.

У меня есть список статуса, например. Пользователь может получить один из статусов из списка, и после нажатия кнопки поиска, затем на странице, мне нужно загрузить данные с выбранным статусом.

Одним из элементов является указатель даты. И этот указатель даты отлично работает, когда я обновляю страницу или захожу на страницу методом GET. Но у меня возникает проблема, когда я захожу на страницу методом POST после нажатия кнопки «ПОИСК». На мой взгляд, есть код, где я получаю статус из списка и перехожу к своему действию контроллера: 

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        var clientId = null;
        var status = null;

        $("[name='deadline']").datepicker(); //there I have this error comunicat

        $('#clients').on('change', function () {
            clientId = $(this).val();

        });

        $('#statuses').on('change', function () {
            status = $(this).val();
        });

        $('#searchForPremium').on('click', function () {
            $.ajax({
                type: 'POST',
                url: '/admin/clients/premium',
                data: {client_id: clientId, status: status},
                success: function (data) {

                    $('body').empty().html(data);

                    $('#clients').val(clientId);
                    $('#statuses').val(status);
                }
            });
        })
    });
</script>

И есть контрольное действие: 

public function clientsPremium()
    {

        $premiumTexts = NULL;

        $premiumClients = \App\Text::getPremiumClients();
        $premiumTexts = \App\Text::getPremiumTexts();
        $statuses = \App\Text::getStatus();

        if (Request::isMethod('get')) {
            $premiumTexts = $premiumTexts->orderBy(DB::raw('ISNULL(deadline), deadline'), 'ASC');
            $premiumTexts = $premiumTexts->get();
            return view('admin.clients-premium', ['statuses' => $statuses, 'clients' => $premiumClients, 'texts' => $premiumTexts]);
        }
        if (Request::isMethod('post')) {
            $clientID = Request::get('client_id');
            $statusName = Request::get('status');

            if ($clientID != NULL) {
                $premiumTexts = $premiumTexts->where('text.client_id', $clientID);
            }

            if ($statusName != NULL) {
                $premiumTexts = $premiumTexts->where('text.status', $statusName);
            }

            $premiumTexts = $premiumTexts->orderBy(DB::raw('ISNULL(deadline), deadline'), 'ASC');
            $premiumTexts = $premiumTexts->get();

            return response()->json(view('admin.clients-premium', ['statuses' => $statuses, 'clients' => $premiumClients, 'texts' => $premiumTexts])->render());
        }

    }

Тогда у меня ошибка "Uncaught TypeError: $ (...). Datepicker не является функцией ...". Я не могу понять, как это работает и почему я получил это сообщение. Появляется только когда я нажимаю кнопку поиска. Это $('body').empty().html(data); или действие моего контроллера: 

 return response()->json(view('admin.clients-premium', ['copywriters' => $copywriters, 'statuses' => $statuses, 'positioners' => $positioners, 'clients' => $premiumClients, 'texts' => $premiumTexts, 'allowedTemplates' => $allowedTemplates, 'section' => 'clients.premium'])->render());

Я пытался использовать $ .noConflict (); но нет никакого эффекта для меня. Может кто-нибудь взглянуть на мой код и попытаться помочь мне, что я должен изменить? Я думаю, что мой ответ "response () -> json (view ..." перезагрузит всю страницу и несколько раз получит мой jquery-ui. Но я могу ошибаться. Кто-нибудь может мне помочь?

Ответы [ 3 ]

0 голосов
/ 30 апреля 2018

После успеха ajax уничтожьте средство выбора даты и повторно инициализируйте его, как показано ниже: 

$('body').empty().html(data);
$("[name='deadline']").datepicker("destroy");
$("[name='deadline']").datepicker();
0 голосов
/ 30 апреля 2018

вы очищаете все тело, поэтому возможно, что вы включили js css в тело, поэтому, пожалуйста, добавьте и удалите этот div вместо всего тела, и если вы добавляете динамический указатель даты в любое текстовое поле, используйте 

  $("[name='deadline']").datepicker(); on ajax response .
0 голосов
/ 30 апреля 2018

Повторно инициализируйте его после изменения содержимого из ответа ajax. 

$.ajax({
    type: 'POST',
    url: '/admin/clients/premium',
    data: {client_id: clientId, status: status},
    success: function (data) {

        $('body').empty().html(data);
        $("[name='deadline']").datepicker();     
        $('#clients').val(clientId);
        $('#statuses').val(status);
    }
});
...