我的问题有点具体。。。我在Laravel中有一个简单的表单，在其中一些字段上，我将弹出窗口与简单的表绑定。。。
我需要实现的是，当你点击输入字段后的图标时，弹出窗口就会出现，你可以通过AJAX将字段插入到表格中。。这非常有效，直到你也想在弹出窗口中看到新添加的记录。。当我想看到它时，我需要重新加载页面并再次打开弹出窗口。。。
我的消息来源来了。。。
这是我的视图：
{{ Form::label('department_id', 'Department:') }}
{{ Form::select('department_id', $departments, $emp->department_id, array('placeholder' => 'Choose department ...')) }}
<a href="" id="firePopup_department">
<img src="{{ URL::asset('img/future.png') }}" alt="add_future_fields" title="Add future fields" class="add_future_icon"/>
</a>
<div id="department_content" title="Departments" style="display:none">
<div class="future_field_form">
{{ Form::label('dpt_new', 'Department:', array('class' => 'future_field_label')) }}
{{ Form::select('dpt_new', $departments, null, array('class' => 'future_field_input dpt_new', 'placeholder' => 'Choose department ...')) }}
<br />
{{ Form::label('dpt_from', 'Valid from:', array('class' => 'future_field_label')) }}
{{ Form::date('dtp_from', null, array('id' => 'from', 'class' => 'future_field_input dpt_from')) }}
{{ Form::submit('Save', array('class' => 'future_field_button', 'placeholder' => 'Submit')) }}
<br />
</div>
<p class="future_field_msg"></p>
<table class="future_field_table">
<tr>
<th>Value</th>
<th>From</th>
<th>To</th>
<th class="sys_action">Delete</th>
</tr>
@foreach($future_fields as $ffield)
@if($ffield->field_name == 'department_id')
<tr>
<td>{{ $departments->get($ffield->field_value) }}</td>
<td>{{ $ffield->valid_from }}</td>
<td>{{ $ffield->valid_to }}</td>
<td class="sys_action"><a href="#" title="Delete">delete</a></td>
</tr>
@endif
@endforeach
</table>
</div>
这是我正在调用的AJAX(由事件OnClick触发.future_field_button)
$( ".future_field_button" ).click(function() {
var field_value = $('.dpt_new').val();
var valid_from = $('.dpt_from').val();
var field_name = 'department_id';
var emp_id = $('.emp_id').val();
//alert(field_name + " => " + field_value + ", " + valid_from + " for: " + emp_id);
// get real data
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
method: "POST",
url: '/add_future_field',
data: { field_value: field_value,
valid_from: valid_from,
field_name: field_name,
emp_id: emp_id,
},
// results on ERROR or SUCCESS
error: function(xhr, status, error){
$('.future_field_msg').css('color','red').text("Error! Contact admin ...");
},
success: function(data){
if(data == 'both_missing'){
$('.future_field_msg').css('color','red').text("Both fields must be filled!");
}else{
$('.future_field_msg').css('color','green').text(" " + data);
}
}
})
});
路线非常简单：
Route::post('add_future_field', 'EmployeeController@add_future_field');
最后控制器：
public function add_future_field(Request $request){
$field_value = $request->input('field_value');
$valid_from = $request->input('valid_from');
$field_name = $request->input('field_name');
$emp_id = $request->input('emp_id');
$changed_by = Auth::user()->id;
if($field_value == '' || $valid_from == '') {
return "both_missing";
}else{
// insert data
$ffield = new FutureField;
$ffield->employee_id = $emp_id;
$ffield->field_name = $field_name;
$ffield->field_value = $field_value;
$ffield->valid_from = $valid_from;
$ffield->valid_to = '3000-01-01';
$ffield->created_by = $changed_by;
$ffield->save();
// get new actual results
$future_fields = array (
'future_fields' => FutureField::select('id', 'employee_id', 'field_name', 'valid_from', 'valid_from')
->where('field_name','=', $field_name) // only selected one
->get(),
);
return $future_fields;
//return $field_name.";".$field_value.";".$valid_from.";".$emp_id.";".$changed_by;
}
}
我无法将最终的$future_fields(带有新添加的记录)解析到目标表(视图)。。你能帮我怎么做吗？我错过了什么？
一切都很好，直到获得了。。。它们已插入，但现在显示在弹出窗口中：(在future_field_msg(p标签)中，我收到[object Object]绿色信息
谢谢
编辑：我找到了一个可能的解决方案——如何潜在地处理它。。ajax请求成功后，我将表隐藏在div中，并再次使用相同结构的jquery重建它。。。但是，有没有更复杂的方法来实现它呢？这听起来像是一个"讨厌"的解决方法：)我更喜欢清洁的溶液
解决方案(发送至@Thomas Van der Veen)
控制器：
return response()->json($future_fields);
Ajax：(仅成功部分)
success: function(data){
if(data == 'both_missing'){
$('.future_field_msg').css('color','red').text("Both fields must be filled!");
}else{
// get table body and remove it
$('#department_content .future_field_table > tbody').empty();
// transform JSON object to JS array
var future_fields = data.future_fields;
for (i in future_fields) {
var future_field = future_fields[i];
// generate new row content
var newRowContent = "<tr><td>"+future_field.field_value_display+"</td><td>"+future_field.valid_from+"</td><td>"+future_field.valid_to+"</td><td class="sys_action"><a href="#" title="Delete">x</a></td></tr>";
$(newRowContent).appendTo($('#department_content .future_field_table > tbody'));
}
$('.future_field_msg').css('color','green').text(field_value_display+" inserted!");
}
}
但我现在面临的问题是，我无法用laravel中的默认｛｛｝｝echo函数重新填充表。。我需要生成这个
<td class="sys_action">
<a href="#" title="Delete">
<img src="{{ URL::asset('img/delete.gif') }}" class="future_field_edit_img" alt="delete" />
</a>
</td>
我该怎么做？？
在控制器中，您必须返回json。
像这样：
return response()->json($future_fields);
文档
在javascript中，您必须循环这些数据并将它们添加到表中。
示例：
success: function(data)
{
for (i in data)
{
var future_field = data[i];
// Populate table
}
}
OP更新后编辑
您可以删除旧的行并添加新的行，而不是重新生成整个表。
示例：
$table_body = $table.find('tbody');
// Remove all table rows
....
$table_row = $('<tr><td class="somecolumn"></td><td class="othercolumn"></td></tr>');
for (i in future_fields)
{
var future_field = future_fields[i];
// Fill table row with desired values
//
$table_row.find('.someclumn').html(future_field.somevalue);
$table_row.find('.otherclumn').html(future_field.othervalue);
// Append new table row to tbody
//
$table_body.append($table_row);
}
这个代码还没有经过测试，但应该可以工作(我认为)