CODEWITHSUNDEEP
ajaxlaravellaravel-blade
user3074140
user3074140

Reputation: 857

Reload laravel foreach after ajax

I have a foreach loop in my view

<div class="col-lg-6 collapse" >
    <div class="job-summ-panel" id="job-summ-panel" >
        @foreach($jobs as $job)
            {{$job['active']}}
        @endforeach
    </div>
</div>

I also have a Google map on the page with map markers and when I click a map marker an ajax call is made to get all the info related to the page 

$.ajax({
    method: "get",
    url: '/joblocation/jobsummary',
    data: {
        job_ref: marker.getCustomData('job_ref'),
    },
    success: function (response) {
        $('.collapse').collapse('show');
        $('#job-summ-panel').html(response.jobs)
    },                               
});

Jobs will initially be empty when they first load the page so it wont display anything. I dont get how to refresh/reload the div and do the foreach again with the new response data.

Upvotes: 2

Views: 7501

Answers (1)

Taha Paksu
Taha Paksu

Reputation: 15616

There are two ways to achieve this. First, is server-side generation, and second is client-side application.

1. Server side content generation

You might want to move that part of the page to a different blade template. Then with a AJAX call, you can rebuild the page and send the output to the browser. For example:

Route Definition

Route::post("generateList", "Partials@generateList");

Partial Template Definition

Partials\loopContainer.blade.php

<div class="col-lg-6 collapse" >
    <div class="job-summ-panel" id="job-summ-panel" >
        @foreach($jobs as $job)
            {{$job['active']}}
        @endforeach
    </div>
</div>

Your Partial Content Generator

<?php 

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

    class Partials extends Controller {

    public function generateList(Request $request){
        // generate data from the parameters again
        $input = $request->input('job_ref');
        $generatedData = GenerateDataFromJobRef($input);
        return View::make("partials/loopContainer", ["jobs" => $generatedData]);
    }
?>

Client Side Refresh

$.ajax({
    method: "POST",
    url: '/generateList',
    data: {
        job_ref: marker.getCustomData('job_ref'),
    },
    success: function (response) {
        $('.collapse').collapse('show');
        $('#job-summ-panel').html(response)
    },                               
});



2. Client side content application

Route Definition

Route::post("generateList", "Partials@generateList");

Your Partial Content Generator

<?php 

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

    class Partials extends Controller {

    public function generateList(Request $request){
        // generate data from the parameters again
        $input = $request->input('job_ref');
        $generatedData = GenerateDataFromJobRef($input);
        return json_encode(["data" => $generatedData]);
    }
?>

Client Side Refresh

$.ajax({
    method: "POST",
    url: '/generateList',
    data: {
        job_ref: marker.getCustomData('job_ref'),
    },
    success: function (response) {
        $('.collapse').collapse('show');            
        var appendString = "";
        for(var i = 0; i < response.data.length; i++){
            appendString += "<div>" + response.data[i].info + "</div>";    
        }
        $('#job-summ-panel').empty().append(appendString);
    },                               
});



Upvotes: 2

Related Questions