Laravel 4 blade syntax within my javascript files

Question

My home page had some inline javascript that was mixed up with some blade syntax e.g.

    <script type="text/javascript">
        @if(Auth::user())
            if(path.indexOf('/user/' + {{Auth::user()->id}} ) != -1) {
                    $( "#tabs" ).tabs();
            };
        @endif
    </script>

It worked until I wanted to move the javascript to an external file.js. I got error whenever blade syntax was added. Is there a way I can fuse blade syntax in my javascript files.js? I tried renaming to file.blade.js with no luck...

That actually works well for me. You should have made it an answer. I realised my home page was getting too cluttered with javascript. I believe this doesnt result in an extra request hence the page load speed is the same. Why would you recommend against it? — Tim Truston
– Tim Truston, Commented Aug 6, 2013 at 10:36
I find blade syntax easy. But the main problem is that my page was overloaded with javascript — Tim Truston
– Tim Truston, Commented Aug 6, 2013 at 13:38

Brandon Romano · Accepted Answer · 2014-03-03 20:53:23Z

42

Although the accepted solution will work, this is a most definitely an antipattern.

If I saw this not being the one who wrote it, I would be extremely confused to what's going on.

My suggestion is in your PHP file, have a block, which gets all of the values that you'll need in your external files, then call the external files.

So in your PHP file you would have something like:

<script>
    var userID = "{{ Auth::user()->id }}";
    var isUser = "{{ Auth::user() }}"
</script>

{{ HTML::script('path/to/js/file.js') }}

And in your javascript file:

if(isUser)
{
    if(path.indexOf('/user/' + userID ) != -1) {
        $( "#tabs" ).tabs();
    };
}

answered Mar 3, 2014 at 20:53

Brandon Romano

1,0201 gold badge13 silver badges21 bronze badges

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

6 Comments

Bill Garrison Over a year ago

plus 1 for seperating responsibilities and allowing me to minify my js if needed

Brandon Romano Over a year ago

@BillGarrison, keep in mind that yes, you can minify -- but you can't obfuscate because that will change variable names!

Drellgor Over a year ago

How would you use this solution and also be able to obfuscate? Can it be done? Any tricks that might allow obfuscation while preserving the specific variables?

slang Over a year ago

You can ensure that the variable names userID and isUser won't be obfusticated by tying them to the global scope (like window.userID and window.isUser)... which is what you need to do anyway to be able to access those variables in a separate JS file. Obfuscators like UglifyJS should detect that a variable is accessing the global scope and won't obfusticate them by default. But if there's any uncertainty, then accessing it explicitly through window will make it clear.

Ivan Castellanos Over a year ago

I don't like this solution because it pollutes the global scope, what I usually do to pass variables to my JS is <input id="isUser" type="hidden" value="{{ Auth::user() }}" /> then just get it from JS using $('#isUser').val()

|

Trying Tobemyself · Accepted Answer · 2013-08-06 10:56:38Z

10

you can try this save your javascript file in app/views folder and rename it to xxx.blade.php , yes .blade.php because Blade Engine will parse it only if its .blade.php and use @include('your javascript filename') to include the javascript file parsed by Blade, it will work.

edited Aug 6, 2013 at 10:56

answered Aug 6, 2013 at 10:48

Trying Tobemyself

3,6683 gold badges30 silver badges43 bronze badges

Comments

Luco · Accepted Answer · 2016-02-25 20:03:35Z

3

I was doing the same than @BrandonRomano, but I found a better approach. Sending directly the value from PHP to JS vars using: PHP-Vars-To-Js-Transformer

PHP:

JavaScript::put([
    'foo' => 'bar',
    'user' => User::first(),
    'age' => 29
]);

JS:

console.log(foo); // bar
console.log(user); // User Obj
console.log(age); // 29

You can set a namespace like:

console.log(server.foo)

answered Feb 25, 2016 at 20:03

Luco

1251 silver badge10 bronze badges

Comments

Andreyco · Accepted Answer · 2013-08-06 08:11:29Z

1

You are outputing string from PHP, so you have to enclose that string in '

<script type="text/javascript">
    @if(Auth::user())
        if(path.indexOf('/user/' + '{{Auth::user()->id}}' ) != -1) {
                $( "#tabs" ).tabs();
        };
    @endif
</script>

answered Aug 6, 2013 at 8:11

Andreyco

22.9k5 gold badges63 silver badges66 bronze badges

3 Comments

Tim Truston Over a year ago

I am getting an error: Uncaught SyntaxError: Unexpected token ILLEGAL => @if

Andreyco Over a year ago

What is the name of the file? It should be named whatever.blade.php

Tim Truston Over a year ago

It is a .blade.php file but the error disappeared when I enclosed the @if statements with in ' too. like '@if(Auth::user())'. Problem is, the blade php didnt run

Collectives™ on Stack Overflow

Laravel 4 blade syntax within my javascript files

4 Answers 4

6 Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related