Pass Laravel variable to Jquery function

Question

Trying to pass Laravel variable from controller e.g. campaigns to another file of jquery function for ajax call. Normally in php we able to show the data using campaigns->id. I wanted to pass to the function and ajax call to show on the chart.

index.php

<div id="colouredBarsChart" class="ct-chart"></div>
<canvas id="myAreaChart" height="60"></canvas>

<script src="{{ asset('js/create-charts.js') }}"></script>

create-charts.js

( function ( $ ) {

var charts = {
    init: function () {
        // -- Set new default font family and font color to mimic Bootstrap's default styling
        Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
        Chart.defaults.global.defaultFontColor = '#292b2c';

        this.ajaxGetCampaignReportData();

    },

    ajaxGetCampaignReportData: function () {
        // var urlPath =  'http://' + window.location.hostname + '/get-campaigns-chart-data';
        var urlPath =  '/engagements/{{campaign->id}}/get-campaigns-report-chart-data'; <------ ***Here***
        var request = $.ajax( {
            method: 'POST',
            url: urlPath,
            data: reference: campaign->score, <------------ ***Here***
            dataType:"json",
    } );

        request.done( function ( response ) {
            // console.log( response );
            charts.createCompletedJobsChart( response );
        });
    },

    /**
     * Created the Completed Jobs Chart
     */
    createCompletedJobsChart: function ( response ) {
    }
};
charts.init();

} )( jQuery );

@MayankPandeyz No, that won't work. It's a .js file; you can't use .blade syntax ({{ }}) in a .js file. — Tim Lewis
– Tim Lewis, Commented Oct 14, 2020 at 14:03
@TimLewis sorry I missed it ( it is in js file ). Thanks for correcting me :) — Mayank Pandeyz
– Mayank Pandeyz, Commented Oct 14, 2020 at 15:02

john Smith · Accepted Answer · 2020-10-14 14:24:49Z

2

In index.php render content into js-variable-definition:

<div id="colouredBarsChart" class="ct-chart"></div>
<canvas id="myAreaChart" height="60"></canvas>
<script>
var my_backend_var = "{{ $campaign->score }}";
</script>
<script src="{{ asset('js/create-charts.js') }}"></script>

and in your create-charts.js file you will have access to the js var then:

data: {reference:my_backend_var}

I added the brackets because you want to add a js-object to data property ;)

edited Oct 14, 2020 at 14:24

answered Oct 14, 2020 at 14:04

john Smith

18k12 gold badges80 silver badges124 bronze badges

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

3 Comments

Tim Lewis Over a year ago

I feel like there's a $ missing from the PHP variable, i.e.: {{ $campaign->score }}, might be a syntax/uninitialized constant error otherwise.

john Smith Over a year ago

yes this might be :) I never used laravel so but I can imagine that its templating engine is also twig? I dont know, but if its like twig you wouldn´t need $

Tim Lewis Over a year ago

Laravel uses .blade.php syntax, which does require $. {{ }} is shorthand for <?php e($variable) ?>, and PHP will throw an error if you omit the $, as campaign is not a variable, but $campaign is. Again, this is just a guess; the original PHP variable was never mentioned, but I suspect that is the case. Leave for now, but if you get a comment that this doesn't work, suggest that change :)

Collectives™ on Stack Overflow

Pass Laravel variable to Jquery function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related