Question

我有一个表单视图“addMachine.blade.php”，它目前是通过导航栏访问的弹出模式表单。我还在表单中设置了Typeahead自动完成功能。

这些是addMachine视图和autocompleteUser

的路由

Route::get('/machine/add', 'Machine\AddMachineController@index')->name('addMachine');
Route::get('/machine/add/operator_autocomplete', [
        'as'=>'autocompleteUser',
        'uses'=>'Machine\AddMachineController@autocompleteUser']);

通过转到http://localhost/machine/add访问我的网站时，Typeahead自动填充功能正常运行。

但是，当我尝试通过导航栏访问该表单并将其作为弹出模式打开时（这是我想要它做的），我从Chrome的控制台收到以下错误：{{1} }。我已经尝试将typeahead和jquery链接移动到我的app.blade.php但我仍然得到相同的错误。

这是我的表单视图的代码，“addMachine.blade.php”。

- 删除了代码，请参阅下面的编辑，了解新的addMachine.blade.php代码 -

这是我的AddMachineController中处理自动完成的函数

TypeError: $(...).typeahead is not a function

这是我的app.blade.php

- 删除代码，请参阅下面的编辑，了解新的app.blade.php代码 -

最后，这是我的navigationBar.blade.php

/**
 * Handle a autocomplete user request.
 *
 * @return \Illuminate\Http\Response
 */
public function autocompleteUser(Request $request)
{
    $data = User::where("name", "LIKE", "%{$request->input('query')}%")
        ->orWhere("id", "LIKE", "%{$request->input('query')}%")
        ->orderBy('name')
        ->take(5)
        ->get();
    return response()->json($data);
}

感谢任何帮助。此外，我不确定这是否是导航栏显示弹出模式窗体的最佳方式。如果有人对我正在做的任何事情有更好的解决方案，请随时分享。我是网络开发的新手，喜欢学习：）

注意：使用Laravel 5.4和Php7

编辑：当我在Chrome中使用“Inspect”工具时，我可以看到addMachine视图的代码。但是，当我使用“查看页面源”时，它不存在。

我现在猜测，这就是输出错误背后的原因，我没有以智能方式从导航栏显示弹出模式窗体。有什么建议吗？

EDIT2：看起来像弹出模式似乎是问题。我将app.blade.php更改为以下代码

<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
            <a class="navbar-brand" href="/home">SEI</a>
        </div>

        @if (!Auth::guest())
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
            </ul>
            <ul class="nav navbar-nav navbar-right">

                <-- Some more links -->

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                        Machine <span class="caret"></span>
                                    </a>
                    <ul class="dropdown-menu" role="menu">
                        @if (Auth::user()->isMQE())
                        <li><a href="{{ route('addMachine') }}" data-toggle="modal" data-target="#addMachinePopupModal">Add New Machine</a></li>
                        @endif
                    </ul>
                </li>

                <-- Some more links -->

            </ul>
        </div>
        <div id="addMachinePopupModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                </div>
            </div>
        </div>
        @endif
    </div>
</nav>

然后我将addMachine.blade.php更改为此

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'SEI-MQE') }}</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
    <div id="app">
        @include('include.navigationBar')

        @include('include.flashMessage')

        @yield('content')
    </div>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
    @yield('scripts')
</body>

</html>

我更改了导航栏html以正常打开addMachine视图，而不是弹出模式，现在打字模式正常工作。

任何人都可以向我解释如何让我的addMachine视图成为一个弹出模式窗体，从导航栏打开并且打字输出有效吗？

Answer 1

错误是说缺少了先行功能。它表示在调用该函数之前它不包括在内。在您调用该函数之前应该包含该库，但正如我所看到的，您已将您的库包含在刀片中。

当我尝试解决此类错误时，我使用VIEW PAGE SOURCE并尝试检查页面的元素，样式表和脚本的顺序。

然后从那里，你可能会发现什么是错的。也许库没有加载或它在错误的地方。然后，在你的刀片中重新调查它。

Answer 2

终于明白了。解决我的问题只是将jquery和typeahead源脚本从addMachine.blade.php移动到app.blade.php中，如下所示：

df = create_df()

解决方案很简单，所以我觉得愚蠢，但是对于任何想要使用导航栏打开带有typeahead自动完成功能的弹出模式窗体的例子，请在问题中阅读我的解决方案。

无法使用引导程序预先使用Laravel刀片模板 - ＆gt; `TypeError：$（...）。typeahead不是函数`

2 个答案: