How to type {{ URL::to(' ') }} inside jQuery

user_10403525 0
Viewed 153

How to type Image Source {{ URL::to('row.image') }} inside the jQuery foreach loop

function preview() {
        var preview = $('#image-preview');
        $.get('{{ route('admin.get_image') }}')
            .then(function (data) {
                var s = '';
                data.forEach(function (row) {
                    s += '<div class="col-lg-2 col-md-4">' +
                        '<img src="" class="img-fluid" alt="">' +
                        '<button type="button" class="btn btn-link remove-image" id="' + row.id + '">Remove</button>' +
                        '</div>'
                });
                preview.html(s);
            })
    }

I don't know how to do this. data.forEach(function (row) get all image data and here is one column that name [image:/image/product/123456.jpg]. if I use URL::to then output will be localhost/project/image/product/123456.jpg.

If there is another way to solve this problem then help me.

laravel jquery
3 Answers

You can't use {{ URL::to('row.image') }} inside loop because the Url render at the start.

Soultion:

  1. You need to export route to javascript
  2. After export route to JS you will be able to use custom function

In the link down you can see an example:

https://dev.to/halivert/laravel-routes-in-javascript-37hd

user_58463850 
function preview() {
    var preview = $('#image-preview');
    $.get('{{ route('admin.get_image') }}')
        .then(function (data) {
            var s = '';
            data.forEach(function (row) {
               s += '<div class="col-lg-2 col-md-4">'
               s += '<img src="'+${row.urlImg}+'" class="img-fluid" alt="">'
               s += '<button type="button" class="btn btn-link remove-image" id="'+${row.id}+'">Remove</button>'
               s += '</div>'
            });
            preview.html(s);
        })
}

You have to return the url of the image and concatenate it, I leave you the example

user_145525960

URL is a PHP class that will be executed first and then the result will be sent as a rendered HTML content to the user. So basically the jquery is executed after the PHP. Accordingly, you should access your routes in js runtimes dynamically. In my opinion, you can approach this in two way:

Create the full image URL before sending it to front-end

I guess that the return data of route('admin.get_image') has a field named "urlImage" for each returning objects. If I'm not mistaken this field is coming from a column in the database table. If it is what you are doing, You can mutate the column in your model and use the URL class there. For example:

 <?php

namespace PROJECT_NAMEPACE;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\URL; 

class ImaginaryModel extends Model
{
   // If we assume the column name is url_image the mutator would be like:

   public function getUrlImageAttribute($image){
      return URL::to($image);
   }
}

You can read more about mutators more in official docs here

Use a third-party package

The package should load your Laravel route in the JS runtime instead of the PHP runtime. You can call each of the "named routes" by their parameter as what route() function does in the Laravel.

I have found a package that will behave in such a way. But use it on your own responsibility if you find it helpful. You can see the package GitHub page here.

user_110218850
Related