CODEWITHSUNDEEP
javascriptphpajaxlaravel
Robert Young
Robert Young

Reputation: 563

Using JavaScript variables inside laravel blade routes

I have a piece of View code that contains data from a '.get' request to Ajax. The .get request passes some PHP code to a controller which retrieves the results from a query and stores them in the JS object 'bookingObj'.

The issue is, I would like to use some of the ids that are retrieved by the query and stored inside this object as parameters for a route to another laravel function, 'edit'. At the moment, when I try to concatenate these variables into the blade helper function, I do not get their actual values, just the variable names verbatim.

For example, this in my code:

<a href="{{ route("bookings.edit", [' + bookingObj.id + ',' + bookingObj.tour_id + ',' + bookingObj.datedtour_id + ']) }}">

// returns this in the chrome inspector

<a href="http://localhost/laravel/bookings/ + bookingObj.id + /edit/ + bookingObj.tour_id + / + bookingObj.datedtour_id + ">Edit</a>

where I was hoping to see integer numbers (ids from the database) in place of the 'bookingObj' properties.

Anyone know if I have to use any conversion functions to display this, or might be willing to have a go at explaining what the issue is?

Many Thanks!

Here is the rest of my code:

$.get(url + variable, function(data){

                    console.log('Call complete');

                    //success data

                    $('tr#bookingstable').remove();

                    $.each(data, function(index, bookingObj){
                        var startdate = new Date(bookingObj.datedtourstartdate.replace(/-/g,"/"));
                        var enddate = new Date(bookingObj.datedtourenddate.replace(/-/g,"/"));

                       $('table').append(
                            '<tr id="bookingstable"><td scope="row"><a href="{{ route("bookings.show", $booking->id) }}">' + bookingObj.name + '</a></td><td scope="row">' + bookingObj.size + '</td><td scope="row">' + bookingObj.tour_name + '</td><td scope="row">' + bookingObj.category_name + '</td><td scope="row">' + bookingObj.continent_name + '</td><td scope="row">' + dateFormat(startdate, "dd.mm.yyyy") + '&nbsp; - &nbsp;' + dateFormat(enddate, "dd.mm.yyyy") + '</td><td scope="row"><li class="tiny success button"><a href="{{ route("bookings.edit", [' + bookingObj.id + ',' + bookingObj.tour_id + ',' + bookingObj.datedtour_id + ']) }}">Edit</a></li></td><td scope="row"><form method="post" name="_token" value="<?php echo csrf_token(); ?>" action="{{ route("bookings.destroy", ["id" => $booking->id]) }}">{!! csrf_field() !!}<input type="hidden" name="_method" value="DELETE"><input type="hidden" name="booking_id" value="{!! $booking->id !!}"><input type="submit" class="tiny alert button" value="Delete"></form></td></tr>'
                        ); // end append

                   }); // end each

               }); // end get

Thanks,

Regards,

Robert

London, UK

Upvotes: 2

Views: 7251

Answers (2)

Ady
Ady

Reputation: 85

Suppose your variable name is "post_url" in which you have the dynamic url that you want to use in Ajax as url for posting data. than do like this :

let url = "{{ route('old_url') }}"; 

url = url.replace('old_url', post_url);

$.ajax({
    type:'POST',
    url:url,
    data:{field_name:field_value},
    success:function(data){
             
    }
});

Upvotes: 1

Ohgodwhy
Ohgodwhy

Reputation: 50767

The problem here is that the PHP is rendered and send with the server's response. This means that it doesn't know anything about your JavaScript.

There are packages out there that aim to substitute the functionality on the client side, or you can write your own helper function to solve it.

However, you won't be able to achieve this exact emulation unfortunately.

Upvotes: 1

Related Questions