Javascript code is not working inside blade template Laravel - Stack Overflow

I'm using laravel-5.3. I am trying to put some code in my blade template. But it seems that the JavaScript code is not working properly. Here is my blade template.

@extends('layouts.app')
@section('scripts')

    <script type="text/javascript">
        $(document).ready(function() {
            var members = {!!  json_encode($member)  !!};
            var arr = [];
            var cities = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                local: members
            });
            cities.initialize();
            var elt = $('#researcher');

            elt.tagsinput({
                itemValue: 'value',
                itemText: 'text',
                allowDuplicates: false,
                interactive:true,
                typeaheadjs: {
                    name: 'cities',
                    displayKey: 'text',
                    source: cities.ttAdapter()
                }
            });
            console.log(members);
            var elt1 = $('#advisor');
            elt1.tagsinput({
                itemValue: 'value',
                itemText: 'text',
                allowDuplicates: false,
                interactive:true,
                typeaheadjs: {
                    name: 'cities',
                    displayKey: 'text',
                    source: cities.ttAdapter()
                }
            });

            $("#submit").click(function(event){
                $.ajax({
                    type: "POST",
                    url: '/storeresearch',
                    data: { _token: "{{ csrf_token() }}"},
                    success: function( msg ) {
                        console.log(msg);
                        window.location.replace('/researches');
                    }
                });
            });

        });
    </script>
@endsection

@section('content')
    <form id="hu" action="/storeresearch" method="POST">
        {!! csrf_field() !!}
        <label>Researcher</label>
        <input type="text" class="R_a" id="researcher" name="researchsupervisor_1">
        <label>Advisor</label>
        <input type="text" class="R_a" id="advisor" name="researchsupervisor_1">
        <input type="button" name="submit" id="submit" class="btn btn-primary" value="Add">
    </form>
@endsection

The tagsinput is not working. what should i do. If I do this without extending any layouts it works fine. In the app layout i have yield the scripts section in the header part.

I'm using laravel-5.3. I am trying to put some code in my blade template. But it seems that the JavaScript code is not working properly. Here is my blade template.

@extends('layouts.app')
@section('scripts')

    <script type="text/javascript">
        $(document).ready(function() {
            var members = {!!  json_encode($member)  !!};
            var arr = [];
            var cities = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                local: members
            });
            cities.initialize();
            var elt = $('#researcher');

            elt.tagsinput({
                itemValue: 'value',
                itemText: 'text',
                allowDuplicates: false,
                interactive:true,
                typeaheadjs: {
                    name: 'cities',
                    displayKey: 'text',
                    source: cities.ttAdapter()
                }
            });
            console.log(members);
            var elt1 = $('#advisor');
            elt1.tagsinput({
                itemValue: 'value',
                itemText: 'text',
                allowDuplicates: false,
                interactive:true,
                typeaheadjs: {
                    name: 'cities',
                    displayKey: 'text',
                    source: cities.ttAdapter()
                }
            });

            $("#submit").click(function(event){
                $.ajax({
                    type: "POST",
                    url: '/storeresearch',
                    data: { _token: "{{ csrf_token() }}"},
                    success: function( msg ) {
                        console.log(msg);
                        window.location.replace('/researches');
                    }
                });
            });

        });
    </script>
@endsection

@section('content')
    <form id="hu" action="/storeresearch" method="POST">
        {!! csrf_field() !!}
        <label>Researcher</label>
        <input type="text" class="R_a" id="researcher" name="researchsupervisor_1">
        <label>Advisor</label>
        <input type="text" class="R_a" id="advisor" name="researchsupervisor_1">
        <input type="button" name="submit" id="submit" class="btn btn-primary" value="Add">
    </form>
@endsection

The tagsinput is not working. what should i do. If I do this without extending any layouts it works fine. In the app layout i have yield the scripts section in the header part.

• javascript
• laravel-5
• laravel-blade
• typeerror
• bootstrap-tags-input

Share Improve this question Follow edited Feb 17, 2017 at 19:38 Mutasim Fuad asked Feb 17, 2017 at 17:08 Mutasim FuadMutasim Fuad 60633 gold badges1212 silver badges3232 bronze badges 4

• Does anything show up in your browser's error console? – aynber Commented Feb 17, 2017 at 17:10
• no error shows up. I think the problem is happening at the elt.tagsinput() section. Because if i print anything in the console before that section it prints but nothing is printing in the console after that section – Mutasim Fuad Commented Feb 17, 2017 at 17:14
• Show us where you're adding the libraries. – Zakaria Acharki Commented Feb 17, 2017 at 18:06
• actually I'm getting this error "elt.tagsinput is not a function" . I'm using these libraries <script src="cdnjs.cloudflare./ajax/libs/bootstrap-tagsinput/0.8.0/…> <link href="cdnjs.cloudflare./ajax/libs/bootstrap-tagsinput/0.8.0/…" > <script src="twitter.github.io/typeahead.js/releases/latest/…> – Mutasim Fuad Commented Feb 17, 2017 at 19:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Check your code by inspecting elements in developer options, see where your scripts are loading and confirm that they are included at the end of the page.

And also remember to use @endsection tag