与导航栏中的搜索表单相关的 Javascript 未显示在源代码中
Posted
技术标签:
【中文标题】与导航栏中的搜索表单相关的 Javascript 未显示在源代码中【英文标题】：Javascript related to search form in navbar doesn't show up in source code 【发布时间】：2016-10-24 13:40:52 【问题描述】：我在部分导航中添加了一个搜索表单，如下所示：
!! Form::open(array('id' => 'main_search_form', 'url' => 'main_txt_search', 'class' => 'form-inline pull-xs-right', 'method' => 'get')) !!
!! Form::text('main_search',$value = null, array('placeholder' => 'Search', 'id' => 'main_search_input', 'class' => "form-control")) !!
!! Form::submit('Search', array('class' => 'btn btn-info-outline' )) !!
!! Form::close() !!
在栏中显示如下：
我想要做的是将它与一些 javascript 一起使用，以使用 jquery 自动完成并在页面中发布搜索结果而不更新它。 关键是我在哪里放置表单脚本的链接？我试图将它直接放在部分中，但它们没有被加载。我的应用 html 是这样的：
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Project</title>
<!-- CSS contains bootstrap -->
<link rel="stylesheet" href="/css/app.css">
<!-- bootstrap mobile first -->
<meta name="viewport" content="width=device-width, initial-scale=1">
@yield('scripts')
</head>
<body>
<div class="container">
@include('partials.nav')
@yield('content')
</div>
</body>
</html>
所以我在这里的想法是，由于页面在包含导航之前加载脚本，因此无法加载脚本...但是由于导航出现在所有页面中..您将此链接放在脚本的什么地方？
【问题讨论】：
只要它在模板中的某个部分内，您就应该可以将它放在视图中的任何位置。如果您在模板中向我们展示了您尝试添加脚本的部分，并验证了它实际上在@section ... @endsection 标签内的位置，并且该部分作为@yield 语句存在于您的主布局中，也许会有所帮助。
我在 partials 中创建了一个 nav_scripts.blade.php 并将 @include('partials.nav_scripts') 放在 app html 中的 head 中。
【参考方案1】：
页面在包含导航之前加载脚本，但加载脚本失败
一件事是让脚本加载，也就是说，从它的src 中获取并加载到文档中，另一件事是它引用了一个本身还没有被解析的html元素.
对于后者，您必须确保脚本位于受影响的 html 之后。要么在最后加载它们（将 @yield('scripts') 移动到底部（在 </body> 之前）要么用
$(document).ready(function()
//
);
为了仅在加载文档后执行它。
【讨论】：
以上是关于与导航栏中的搜索表单相关的 Javascript 未显示在源代码中的主要内容，如果未能解决你的问题，请参考以下文章