Laravel 5 External JavaScript Files_ JavaScript stack

Question

the following JavaScript is working perfect in side the test.blad.php file but when i made external test.js file at the browser i get some thing like

http://localhost:8000/%7B%7Burl('/barcode')%7D%7D?j_barcode=112234

instead of

 http://localhost:8000/barcode?j_barcode=112234

the code in test.js file is :

$(document).ready(function(){ 
 $('#barcode').keyup(function(event){
  if(event.keyCode == 13){            
            var j_barcode = $('#barcode').val();      
   $.get("{{url('/barcode')}}", {j_barcode:j_barcode},   function(data) {   
         console.log(data) ;
        //success data                                             
         $.each(data,function(i, obj){       
            document.getElementById("item").value =obj.itemName;
            document.getElementById("itemId").value = obj.id;

            console.log(data) ;
        });
      });

      } 
  });

});

and the route.php

Route::get('/barcode'    , 'testController@getBarcode');

at last i decleared the test.js in test.blade.php as

<script  type="text/javascript" src="/hsm/js/test.js" ></script>

Is your PHP replacing parameters like url whereas in the file it is taken as a literal string? — Yogi
– Yogi, Commented Dec 29, 2015 at 12:28
@HussainAli what is the problem with suggestion of dev-null? — Jai
– Jai, Commented Dec 29, 2015 at 12:29
@HussainAli $.get("/barcode", {j_barcode:j_barcode} will work. — Jai
– Jai, Commented Dec 29, 2015 at 12:30
$.get("/barcode", {j_barcode:j_barcode} not working if i move the script to the text.blade.php as it is it will work fine — Hussain Ali
– Hussain Ali, Commented Dec 29, 2015 at 12:39

Thomas · Accepted Answer · 2015-12-29 12:39:00Z

1

You can not use blade or php code inside files which are not interpreted by php.

The simplest way, as already suggested by @dev-null is to hardcode that url. But that generates problems when you're on a sub page like "/articles/2015" since it will then try to call "/articles/barcode".

You will have to find a way to pass the site root url to your js file. The way I always solve this is to define a global variable in my main template with all the php interpreted values required in js.

var App = {
    root: '{{ url('/barcode') }}',
    texts: {
            // some translated texts for js
    }
};

That way you can easily access it in all your js files:

$.get(App.root + '/barcode')...

Note: If you use named routes like me you will have to add each URL separately instead of just the root.

answered Dec 29, 2015 at 12:39

Thomas

8,8592 gold badges28 silver badges54 bronze badges

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

Comments

seedme · Accepted Answer · 2021-01-28 07:48:30Z

0

After some research, this is my solution:

Step 1. In the blade file, add a yielded section, immediately (just to keep your scripts neat) before referring to external .js file, do something like following,

@section('js_after')
<script>let dataUrl = "{{ route('subcat') }}"</script>
<!--Then external javascript file -->
<script src="{{ asset('js/pages/somescript.js ') }}"></script>
@endsection

Step 2. In your somescript.js file, you may refer and manipulate with this pre-defined variable dataUrl, such as,

var url = dataUrl+'?someParam='+id
$.get(url)

reference: https://stackoverflow.com/a/59994382/3107052

answered Jan 28, 2021 at 7:48

seedme

5025 silver badges10 bronze badges

Collectives™ on Stack Overflow

Laravel 5 External JavaScript Files_ JavaScript stack

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related