在 ajax 之后重新加载 laravel foreach
Reload laravel foreach after ajax
我认为有一个 foreach 循环
<div class="col-lg-6 collapse" >
<div class="job-summ-panel" id="job-summ-panel" >
@foreach($jobs as $job)
{{$job['active']}}
@endforeach
</div>
</div>
我在页面上还有一个带有地图标记的 Google 地图,当我单击地图标记时,会进行 ajax 调用以获取与页面相关的所有信息
$.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)
},
});
职位首次加载页面时最初为空,因此不会显示任何内容。我不知道如何 refresh/reload div 并使用新的响应数据再次执行 foreach。
有两种方法可以实现这一点。一是server-side代,二是client-side应用。
1。服务器端内容生成
您可能希望将页面的该部分移动到不同的 blade 模板。然后通过 AJAX 调用,您可以重建页面并将输出发送到浏览器。例如:
路由定义
Route::post("generateList", "Partials@generateList");
部分模板定义
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>
您的部分内容生成器
<?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]);
}
?>
客户端刷新
$.ajax({
method: "POST",
url: '/generateList',
data: {
job_ref: marker.getCustomData('job_ref'),
},
success: function (response) {
$('.collapse').collapse('show');
$('#job-summ-panel').html(response)
},
});
2。客户端内容应用
路由定义
Route::post("generateList", "Partials@generateList");
您的部分内容生成器
<?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]);
}
?>
客户端刷新
$.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);
},
});
我认为有一个 foreach 循环
<div class="col-lg-6 collapse" >
<div class="job-summ-panel" id="job-summ-panel" >
@foreach($jobs as $job)
{{$job['active']}}
@endforeach
</div>
</div>
我在页面上还有一个带有地图标记的 Google 地图,当我单击地图标记时,会进行 ajax 调用以获取与页面相关的所有信息
$.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)
},
});
职位首次加载页面时最初为空,因此不会显示任何内容。我不知道如何 refresh/reload div 并使用新的响应数据再次执行 foreach。
有两种方法可以实现这一点。一是server-side代,二是client-side应用。
1。服务器端内容生成
您可能希望将页面的该部分移动到不同的 blade 模板。然后通过 AJAX 调用,您可以重建页面并将输出发送到浏览器。例如:
路由定义
Route::post("generateList", "Partials@generateList");
部分模板定义
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>
您的部分内容生成器
<?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]);
}
?>
客户端刷新
$.ajax({
method: "POST",
url: '/generateList',
data: {
job_ref: marker.getCustomData('job_ref'),
},
success: function (response) {
$('.collapse').collapse('show');
$('#job-summ-panel').html(response)
},
});
2。客户端内容应用
路由定义
Route::post("generateList", "Partials@generateList");
您的部分内容生成器
<?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]);
}
?>
客户端刷新
$.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);
},
});