CODEWITHSUNDEEP
javascriptphplaravel
FJF
FJF

Reputation: 135

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

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!

Upvotes: 1

Views: 7226

Answers (2)

Emtiaz Zahid
Emtiaz Zahid

Reputation: 2845

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) {
                //
            }
        })
    }
}

Upvotes: 3

TrickStar
TrickStar

Reputation: 229

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

Upvotes: 3

Related Questions