Question

我在Lumen框架中编写简单的搜索引擎。

我有一份状态列表，例如。用户可以从列表中获取状态之一，然后单击搜索按钮然后在页面中，我需要加载具有所选状态的数据。

其中一个元素是datepicker。当我刷新页面或通过GET方法转到页面时，这个日期选择器工作得很好。但是当我通过POST方法从我的点击＆＃34; SEARCH＆＃34;进入页面时，我遇到了问题。我的视图中有一些代码，我从列表中获取状态并传递给我的控制器操作：

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

    }

然后我有错误＆＃34; Uncaught TypeError：$（...）。datepicker不是函数...＆＃34;。我不明白它是如何工作的以及为什么我得到这个信息。只有当我点击搜索按钮时才会出现。它是$('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（）;但对我没有任何影响。任何人都可以看看我的代码，并试图帮助我应该改变什么？我想我的回复＆＃34;响应（） - ＆gt; json（查看...＆＃34;重新加载所有页面并多次获取我的jquery-ui。但我可以错。有人可以帮助我吗？

Answer 1

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

Answer 2

ajax成功后，销毁datepicker并重新初始化，如下所示：

$('body').empty().html(data);
$("[name='deadline']").datepicker("destroy");
$("[name='deadline']").datepicker();

Answer 3

你清除整个身体所以可能你可以在身体中包含js css所以请添加并删除这个div而不是整个身体，如果你在任何文本框中添加动态datepicker请使用

  $("[name='deadline']").datepicker(); on ajax response .

在ajax请求之后，Datepicker不是一个函数

3 个答案: