Laravel 5.2更新表，使用AJAX新增记录，无需重新加载页面

Question

我的问题有点具体...我在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 （由.future_field_button的事件OnClick 触发 ）

$( ".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（带有新添加的记录）解析到目标表（视图）..您能帮我怎么做吗？ 我想念什么？

一切正常，直到获取up2date数据为止……它们已插入，但现在显示在弹出窗口中：（在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> 

我该怎么办？

Answer 1

在您的控制器中，您将必须返回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);

}

该代码尚未经过测试，但应该可以正常工作（我认为）