How can I access Laravel Helper from Javascript?

Question

I have a Laravel web app and want to access my Laravel Helper from any .js file.

In normally I accessed helper from script in blade.php file like this:-

<script>
function getSiteSettings() {
    return JSON.parse('<?php echo json_encode(Helper::getSettings()) ?>');
}
</script>

But I want to access this from my script.js file. Is it possible? I have tried with localStorage and get it very easily but problem is, in site settings have some secured data.

And if possible to hide localStorage data then my problem will be solved.

In .js file, you can not use php code. If you want to get data through js use ajax — Yasin Patel
– Yasin Patel, Commented Mar 5, 2020 at 7:41

nayeemdev · Accepted Answer · 2024-10-15 18:08:36Z

I found the answer. Basically, there is no direct way to write PHP code in the .js file. Here is 3 short way to get PHP/Laravel variable or Laravel Helper.

Solution 1. Call an ajax and get the return the value from js and use it as needed.

$(function() {
     // ajax call
});

Solution 2. Any Laravel Helper/Var can be accessible from a blade file, like this:

<script>
    let name = "{{ \Helper::get_name() }}";
</script>

and use this name anywhere in js.

Solution 3. The last and best way which I have been using is: Add the external script in the blade and add a getter and setter method into the script so that you can set the value from the blade file inside the js.

// in external/script.js script
var GetLaravelHelper = function () {
    let options = {
        name_from_laravel : ''
    }

    return {
        init: function(){
            // code for on load
        },
        set_options: function(data){
            Object.assign( options, data );
        },
        get_options: function(){
            return options;
        }
    }
}();

window.GetLaravelHelper = GetLaravelHelper; // You can get acces this GetLaravelHelper into balde file where you imort this js

document.onload(function(){
    GetLaravelHelper.init();
})

Then in blade, you can set any value into the Object like this:

<script src="external/script.js"></script>
<script>
   GetLaravelHelper.set_options({
        name_from_laravel: "{{ config('app.name') }}", // or anything from laravel/php
   })
</script>

BTW for Solution 3, remember that you are assigning value in global window.

Hope it will help you a lot. Happy Coding <3

Sumit Wadhwa · Accepted Answer · 2020-03-05 08:00:15Z

2

I think your best bet is to do what you're doing right now.

Or, Create a resource endpoint that can return JSON of these settings on page load in your script.js file:

// script.js
document.addEventListener("DOMContentLoaded", function() {
     // make an ajax request here and load your setting in a js variable
});

// if using jquery
$(function() {
     // make an $.ajax request here and load your setting in a js 
})

answered Mar 5, 2020 at 8:00

Sumit Wadhwa

3,2671 gold badge27 silver badges37 bronze badges

Comments

Pallab Mandal · Accepted Answer · 2020-03-05 08:16:08Z

0

The easiest solution will be call an api using Ajax or Axios(is using vue) inside the getSiteSettings function and in the response of the api you return the data.

answered Mar 5, 2020 at 8:16

Pallab Mandal

1471 silver badge13 bronze badges

Collectives™ on Stack Overflow

How can I access Laravel Helper from Javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related