Pass a local variable as a parameter from to a controller function (MVC)

$('body').on('keyup','#search,function(){
        var keyword = $(this).val();

        $.ajax({
            type: "POST",
            url: "{{ route('search')}}",
            dataType: "json",
            data: {keyword: keyword,
                    _token: '{{csrf_token()}}'
            },
            success: function(res){
                var tableRow='';

                $('#dynamic-row').html('');
                
                $.each(res, function(index, value){

                    tableRow = '<tr><td colspan="1"><b style="color: #bb2124">'+value.id+'</b></td><td colspan="2">'+value.date+'</td><td colspan="3">'+value.name+'</td><td colspan="3">'+value.amount+'</td><td>

//PROBLEM HERE
<a class="btn btn-outline-info btn-sm" href="{{ route("expenses.show", '+value.id+') }}"><b class="fas fa-eye"> </b> <b> VIEW </b></a>

</td></tr>';
 
                    $('#dynamic-row').append(tableRow);

                });
            }
        });
    });

in the code I want to pass the search result's id value.id as a parameter to the expenses.show router but instead of passing the content of value.id, value.id in itself is the one being passed as a string. this is a laravel project btw.

tykus

3 years ago

Best Answer

Level 104

You cannot use the route helper like this; PHP has already rendered the view; so route has already been executed before JS search has been executed.

You either can use the absolute URL; or you can use Laravel Ziggy to make your Laravel application routes available to Javascript.

My preference in such cases is to return a Blade partial rather than constructing the HTML in Javascript like that:

public function search()
{
    $results = // search...
    return view('partials.search-results', compact('results'))->render();
}

@foreach($results as $result)
<tr>
  <td colspan="1"><b style="color: #bb2124">{{$result->id }}</b></td>
  <td colspan="2">{{$result->date }}</td>
  <td colspan="3">{{$result->name }}</td>
  <td colspan="3">{{$result->amount }}</td>
  <td>
    <a class="btn btn-outline-info btn-sm" href="{{ route("expenses.show",  $result->id) }}">
        <b class="fas fa-eye"> </b> <b> VIEW </b>
    </a>
  </td>
</tr>
@endforeach

success: function(res){
  $('#dynamic-row').empty();
  $('#dynamic-row').append(res);
}

j_watson

3 years ago

Level 2

@tykus it is my first time encountering render, in the search function do i make a new view where I can return all the search results or do i just return the results to the original page where i made the call from?

webrobert

3 years ago

Level 51

@j_watson, you make a view called partials/search-results.blade.php etc. with the @foreach chunk then render will prepare it. So when you call it from your success function its already the html you need. Its what you were trying to do before but without trying to write html with javascript, instead its a loaded partial "Server fetched partials"

and here is cool video series about them

1 like

tykus

3 years ago

Level 104

@j_watson the idea of the partial is reusability; so your parent view can use it as well with an @include passing original results. The render function simply evaluates the partial with the given data and generates a HTML string that can be returned rather than a full Response. So, you only want the part of the DOM that is updated with the search results; i.e. the table (or table rows)

1 like

j_watson

3 years ago

Level 2

@tykus thank it's working now

Please or to participate in this conversation.