使用 Ajax + Modal + Laravel 更新数据

Question

我正在尝试使用这篇文章 LINK 更新 laravel 中的数据表 当我单击我的编辑按钮时，它正在获取数据，但是当我单击更新按钮时，我收到错误： 我在 laracast 中发布我的问题，如果有人能告诉我这个想法https://laracasts.com/discuss/channels/general-discussion/update-data-ajax-modal-laravel

Answer 1

使用 Laravel Ajax 模态更新非常容易

这里的路线

Route::get('class_routine', 'ClassRoutineController@routineEdit');
Route::resource('class_routine','ClassRoutineController',['parameters'=> ['class_routine'=>'id']]);

控制器

public function routineEdit(Request $request)
    {
        if($request->ajax()){
            $editModeData = ClassRoutine::Find($request->id);
            return Response($editModeData);
        }
     }


public function update(Request $request, $id)
{

    $data = ClassRoutine::FindOrFail($id);
    $input = $request->all();
    $input['updated_by'] = Session('loggedSessionData.id');
    $class_id = $request->class_id;


    try {
        $data->update($input);
        $result = 0;
    } catch (\Exception $e) {
        $result = $e->errorInfo[1];
    }

    if ($result == 0) {
            $notification = array(
            'message' => 'Class Routine Successfully Updated.',
            'alert-type' => 'success'
        );
        return redirect('class_routine/'.$class_id)->with($notification);
    } else {
        $notification = array(
            'message' => 'Something Error Found !, Please try again.',
            'alert-type' => 'error'
        );
        return redirect('class_routine/'.$class_id)->with($notification);
    }
}

模态视图在这里

按钮

<li>
    <a href="" class="editModalBtn" data-toggle="modal" data-id="{!! $value['id'] !!}">Edit</a>
</li>

<div id="editModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-md">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title" id="myModalLabel2">Update Routine</h4>
         </div>
         <div class="modal-body">
            {{ Form::open(array('method' => 'PUT','id'=>'classForm','class'=>'form-horizontal classFormUpdate')) }}
            {{ Form::hidden('class_id', '', array('id' => 'class-id','class'=>'class-id')) }}
            <div class="input-group">
               <span class="input-group-addon"><i class="fa fa-book"></i></span>
               {{ Form::select('subject_id', $subjectList, Input::old('required'), array('class' => 'form-control required subject_id', 'id'=>'subject_id')) }}
            </div>
            <div class="input-group">
               <span class="input-group-addon"><i class="fa fa-calendar-check-o"></i></span>
               {{ Form::select('day_of_week', daysOfWeek(), Input::old('day_of_week'), array('class' => 'form-control day_of_week required', 'id'=>'day_of_week','style'=>'pointer-events: none !important')) }}
            </div>
            <div class="input-group">
               <span class="input-group-addon"><i class="fa fa-user"></i></span>
               {{ Form::select('teacher_id', $teacherList, Input::old('teacher_id'), array('class' => 'form-control required teacher_id', 'id'=>'teacher_id')) }}         
            </div>
            <div class="input-group">
               <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
               {!! Form::text('start_time','', $attributes = array('class'=>'form-control required myDatepicker3 start_time','id'=>'start_time','placeholder'=>'Start Time')) !!}
            </div>
            <div class="input-group">
               <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
               {!! Form::text('end_time','', $attributes = array('class'=>'form-control required myDatepicker3 end_time','id'=>'end_time','placeholder'=>'End Time')) !!}
            </div>
            <br />
            <button type="submit" class="btn btn-primary"><i class="fa fa-check-circle"></i> Update !</button>
            {{ Form::close() }}
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

js

$(document).ready(function() {
    $('.editModalBtn').click(function() {
      var id=$(this).data('id');
      var action ='{{URL::to('class_routine')}}/'+id;


      var url = '{{URL::to('class_routine')}}';
      $.ajax({
        type : 'get',
        url  : url,
        data : {'id':id},
        success:function(data){
          $('#id').val(data.id);
          $('.class-id').val(data.class_id);
          $('.subject_id').val(data.subject_id);
          $('.day_of_week').val(data.day_of_week);
          $('.teacher_id').val(data.teacher_id);
          $('.start_time').val(data.start_time);
          $('.end_time').val(data.end_time);
          $('.classFormUpdate').attr('action',action);
          $('#editModal').modal('show');
        }
      });
    });
});

Answer 2

先做人

编辑

现在你编写脚本

 <script type="text/javascript">
             var postId = 0;
             var PostBodyElement = null;
             $('.post').find('.interaction').find('.edit').on('click',function(event){
         event.preventDefault();
        PostBodyElement =  event.target.parentNode.parentNode.childNodes[1]
                 var postBody = PostBodyElement.textContent;
        postId = event.target.parentNode.parentNode.dataset['postid'];
         $('#post-body').val(postBody);
          $('#edit-modal').modal();
  });

             </script>

现在你制作模态

       <div class="modal fade" tabindex="-1" role="dialog" id="edit-modal">
           <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">Edit</h4>
                </div>
             <div class="modal-body">
                   <form method="post">
                     <div class="form-group">
                   <label for="edit-taunt">Edit Taunt</label>
                  <textarea name="post-body" id="post-body" rows="5" class="form-control"></textarea>
              </div>
         </form>
           </div>
            <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" id="modal-save">Save changes</button>
                </div>
             </div><!-- /.modal-content -->
           </div><!-- /.modal-dialog -->
         </div>

现在在您的模态保存按钮上使用 id 进行更新

             <script type="text/javascript">
                  $('#modal-save').on('click',function(){
                  $.ajax({
                       type : 'post',
                      url : urlEdit,
                      data : {body : $('#post-body').val(), postId:postId , _token:token }
                    }).done(function(msg){
                //console.log(msg.new_body);
                 $(PostBodyElement).text(msg['new_body']);
                 $('#edit-modal').modal('hide');
              });
    });
          </script>

       <script type="text/javascript">
             var token = '{{ Session::token() }}';
             var urlEdit = '{{ route('edit') }}';

         </script>