Laravel － How to include External JS file (contains Ajax )

Question

I use ajax to post the value I selected. It works fine with the following code. And I want to separate the jvascript file from index.blade.php.

web.php

Route::get('Homepage', function (){
    return view('frontend.index');
});

Route::post('Homepage/filter', 'Frontend\ImgListController@filter')
    ->name('Homepage.filter');

controller

function filter(Request $request)
    {    
        $get_Model = $request->get('Model');
        Log::debug($get_Model);    
    }

If I have my "view" code like the below, the selected value can be correctly post to the url:"{{ route('Homepage.filter') }}".

index.blade.php

<html>
<head></head>    
<body>
   <div class="form-group">
      <select name="Model" id="Model">
         <option value="">Select Model</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
      </select>

      <button class="btn" onclick="Fun();">submit</button>

   </div>

   {{ csrf_field() }}

   <script src="{{ asset('jquery/jquery.min.js') }}"></script>

</body>
</html>

<script>
   function Fun() {
     if ($('#Model').val() != '') {
       var model_value = $('#Model').val();

       $.ajax({
         url: "{{ route('Homepage.filter') }}",
         type: "POST",
         data: {
             Model: model_value,
             _token: '{{csrf_token()}}'
         },
         success: function (result) {
         //
         }
       })    
     }    
  }
</script>

However, when I try to add this <script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script> into index.blade.php, and independently out of a jvascript file (public\js\JS.js). I would get error message bellow.

POST http://localhost:8888/%7B%7B%20route('Homepage.filter')%20%7D%7D 404 (Not Found)

index.blade.php (Modified, and somewhere wrong)

<html>
<head></head>    
<body>
   <div class="form-group">
      <select name="Model" id="Model">
         <option value="">Select Model</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
      </select>

      <button class="btn" onclick="Fun();">submit</button>

   </div>

   {{ csrf_field() }}

   <script src="{{ asset('jquery/jquery.min.js') }}"></script>
   <script type="text/javascript" src="{{ URL::asset('js/JS.js') }}"></script>

</body>
</html>

javascript

function Fun() {
    if ($('#Model').val() != '') {
        var model_value = $('#Model').val();

        $.ajax({
            url: "{{ route('Homepage.filter') }}",
            type: "POST",
            data: {
                Model: model_value,
                _token: '{{csrf_token()}}'
            },
            success: function (result) {
                //
            }
        })
    }
}

The route {{ route('Homepage.filter') }} is wrong? Or anything else? What can I do to correct it ? Thanks!

Emtiaz Zahid · Accepted Answer · 2018-11-12 08:48:56Z

3

You cant write laravel blade syntax inside .js file.

so you cant give direct route name for ajax url

you can call this direct putting the URL of route.

and for pass token data,

just place the token in your meta tag inside head of html

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

and then you can attach the token data in your js

function Fun() {
    if ($('#Model').val() != '') {
        var model_value = $('#Model').val();
        var token = $('meta[name="csrf_token"]').attr('content'),
        $.ajax({
            url: "/Homepage/filter",
            type: "POST",

            data: {
                Model: model_value,
                _token: token 
            },
            success: function (result) {
                //
            }
        })
    }
}

edited Nov 12, 2018 at 8:48

answered Nov 12, 2018 at 8:43

Emtiaz Zahid

2,8552 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FJF Over a year ago

It seems that missing "header" in $.ajax()?! After I added headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, it works. Thanks a lot！

TrickStar · Accepted Answer · 2018-11-12 08:41:29Z

3

You can do by this way :

Add below line into your main layout file.

@stack('scripts')

than put below script at end of your index file.

@push('scripts')
     <script src="{{ asset('assets/js/JS.js')}}"></script>
@endpush

answered Nov 12, 2018 at 8:41

TrickStar

2294 silver badges19 bronze badges

Collectives™ on Stack Overflow

Laravel － How to include External JS file (contains Ajax )

web.php

controller

index.blade.php

index.blade.php (Modified, and somewhere wrong)

javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

web.php

controller

index.blade.php

index.blade.php (Modified, and somewhere wrong)

javascript

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related