Laravel blade pass Javascript variable in php

Question

How can I pass a javascript variable as an variable in my php loop:

Something like this(obviously does not work):

        var myJsVar = 100;

        @for ($i = 0; $i<myJsVar; $i++)
            ... some code
        @endfor

Further I tried solving this with ajax:

        /**
         *  Get slider value
         */
        $.ajax({
            type: 'GET',
            url: myUrl,
            data: myJsVar,
            success: function (option) {
                console.log(myJsVar);
            }
        });

It returns me the success function,

Further I did this in my Controller:

public function prod(Request $request)
{
    if ($request->ajax()) {
        $ajax = "AJAX";
        dd($ajax);
    } else {
        $ajaxN = "NO Ajax";
        dd($ajaxN);
    }
}

It did not work.

I am not sure how to proceed, hope for some help.

From where you got the value of the myJsVar ? I mean it is static or come from the database or from something else ? — Kalpesh Rajai
– Kalpesh Rajai, Commented Jul 6, 2016 at 13:11
I simplified the code, myJsVar is a dynamic value from a slider (javascript, jquery ui slider) — utdev
– utdev, Commented Jul 6, 2016 at 13:16
To clarify, the "does not work" part means you're getting "NO Ajax" returned from the controller? — apokryfos
– apokryfos, Commented Jul 6, 2016 at 13:16
The reason you're getting "No ajax" is because jQuery does not automatically set the header which Laravel checks. The method Laravel is calling in the link before is one from Symfonys HTTPFoundation — rdiz
– rdiz, Commented Jul 6, 2016 at 13:26

rdiz · Accepted Answer · 2016-07-06 13:24:09Z

3

PHP has finished doing its work even before the page hits your browser, so passing a variable from Javascript to PHP without doing another request is simply impossible. Consider

A) Moving your loop to Javascript. Consider using some UI library like Vue.js, Angular or React.

B) Move the contents of myJsVar to PHP. If it depends on user input or browser rendering, that impossible.

C) Performing the rendering logic through an Ajax-request

$.ajax({
            type: 'GET',
            url: myUrl,
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            data: {value: myJsVar},
            success: function (response) {
                $(someContainer).html(response);
            }
        });

And in your controller:

public function prod()
{
   $value =  Request::get('value');

   return view('view-with-a-loop')->with('value', $value);
}

Be careful with the latter method XSS-wise.

edited Jul 6, 2016 at 13:24

answered Jul 6, 2016 at 13:15

rdiz

6,1961 gold badge31 silver badges41 bronze badges

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

13 Comments

utdev Over a year ago

My loop is actually inside my Javascript like this <script>var bla;<?php ... ?></script> If you mean it like that, the content of myJsVar is created by a slider

utdev Over a year ago

Thanks I will check it out

utdev Over a year ago

Ok if I dd(value) I get null

rdiz Over a year ago

Try { value : "foo" } in the JS, just to see if it's failing php- or js-side

utdev Over a year ago

If I change it to "foo" dd(value) returns me null

|

omarjebari · Accepted Answer · 2018-03-07 07:17:25Z

I use a section in blade to add the javascript then pull that into the layout. The example below shows passing of integer/string/collection of models, eg:

// blade template

@extends('layouts.app')

@section('javascript')

<script type="text/javascript">
    var myInteger = {!! $myInteger !!};
    var myString = '{!! $myInteger !!}';
    var myObject = {!! json_encode($models) !!};
</script>

@endsection

@section('content')
...
@endsection

// Layout (the javascript can go anywhere in the layout, ie the head or body:

<!DOCTYPE html>
<html>
<body>
    @yield('content')
    @yield('javascript')
</body>
</html>

Caveat: This doesn't help if you are trying to inject a variable into an ESM. Also, if you use an automatic code formatter (and why wouldn't you), your formatter is probably going to break your code.

Jay Bienvenu · Accepted Answer · 2022-11-09 16:54:58Z

0

One way you can do it is to render your value into a meta tag, like so:

<meta name="myJsVar" content="100">

Then use JavaScript to read that value via DOM:

var myJsVar = parseInt(document.querySelector("meta[name=myJsVar]").content);

answered Nov 9, 2022 at 16:54

Jay Bienvenu

3,4177 gold badges41 silver badges47 bronze badges

Collectives™ on Stack Overflow

Laravel blade pass Javascript variable in php

3 Answers 3

13 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

1 Comment

Comments

Linked

Related