Question

我有一个与特定项目相关的任务列表，需要在仪表板中显示：

我需要在添加新任务时将其都添加到仪表板和甘特图中，但是由于我在甘特图实现中使用了第三方库，因此我需要通过一个控制器来返回视图，而不仅仅是通过jQuery或类似的东西将其添加到底部。

我要进行两次AJAX调用，一次是保存新任务，另一次是使用新添加的任务重新加载页面（此任务通过第一个调用）。

我检查了调试器，一切似乎都正常，AJAX调用已成功完成，并且一切均应返回，但他的页面不会重新加载或显示任何新信息。

这是我的主要刀刃

@section('content')
<!-- Default box -->
<div class="box">
    <div class="box-header">
        <div class="row">
            <div class="col-md-12">
                <div class="box-header with-border">
                    <h3>Proyectos</h3>
                </div>
                <div class="box-body">
                    <div class="col-md-3">
                        <div class="box box-primary">
                            <form action="{!! url('admin/gettasks') !!}" method="POST">
                                <div class="box-body">
                                    <div class="form-group">
                                        {{csrf_field()}}
                                        <div>
                                            <h4>Reportes por proyecto</h4>
                                        </div>
                                        <div>
                                            <select name="project_type" id="project_type">
                                                <option disabled selected>Seleccionar tipo</option>
                                                <option value="qwin">QWIN</option>
                                                <option value="ski">SKI</option>
                                                <option value="foka">FOKA</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div>
                                            <select name="projectsSelect" id="projectsSelect">
                                            </select>
                                            <input type="hidden" id="project_name" name="project_name">
                                        </div>
                                    </div>
                                </div>
                                <div class="box-footer">
                                    <button type="submit" class="btn btn-primary">Ver Gantt</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-md-9">
                        @if(!empty($field))
                            @include('vendor.backpack.crud.fields.create_model', ['field' => $field,
                            'project_type' => $project_type, 'project_id' => $project_id])
                        @endif
                    </div>
                </div><!-- /.box-body -->
            </div>
        </div>
    </div>
    <div class="box-body">
        <div class="row">
            <div class="col-md-12">
                <div>{!! $gantt !!}</div>
            </div>
        </div>
    </div>
</div>
@endsection

这是进行AJAX调用的JavaScript：

let taskObject = {
  "_token": "{{ csrf_token() }}",
  "task_code": task['task_code'],
  "task_name": task['task_name'],
  "task_start_date": task['task_start_date'],
  "task_end_date": task['task_end_date'],
  "task_comments": task['task_comments'],
  "task_progress": task['task_progress'],
  "task_status_id": task['task_status_id'],
  "task_assignee_id": task['task_assignee_id']
};
taskObject['{{$project_type}}' + '_id'] = '{{ $project_id}}';
$.ajax({
  url: '{!! url("admin/task") !!}',
  type: 'POST',
  data: taskObject,
  success: function(result) {
    reloadWithNewTask('{{$project_type}}', '{{$project_id}}');
  },
  error: function(result) {
    alert('Something went wrong, please try again');
  }
});
/* Makes an ajax call to reload the view with the Gantt and dashboard updated
 * with the task that was just created.
 */
let reloadWithNewTask = function(projectType, projectId) {
  $.ajax({
    url: '{!! url('admin/gettasks') !!}',
    type: 'POST',
    data: {
      "_token": "{{ csrf_token() }}",
      "project_type": projectType,
      "projectsSelect": projectId

    },
    success: function(result) {
      console.log('it worked!!!');
    },
    error: function(result) {
      alert('Something went wrong, please try again');
    }
  });
}

最后，一旦将任务添加到数据库中，这就是被调用的控制器：

public function getTasks(Request $request) {
    $projectType = $request->input('project_type');
    $projectId = $request->input('projectsSelect');

    $select = 'task_name as label, DATE_FORMAT(task_start_date, \'%Y-%m-%d\') as start, DATE_FORMAT(task_end_date, \'%Y-%m-%d\') as end';
    $tasksForGantt = Models\Task::select(DB::raw($select))
    ->where( $projectType . '_id', $projectId)
    ->orderBy('start', 'asc')
    ->orderBy('end', 'asc')
    ->get();

    if(!$tasksForGantt->isEmpty()) {
        /*Tasks are the same but dashboard requires all columns, no aliases
        and different date format*/
        $tasksForDashboard = Models\Task::where($projectType . '_id', $projectId)->get();

        $projectCrudController = $this->makeProjectCrudController($request->input('project_type'), $request->input('projectsSelect'));
        $field = $this->makeField($projectCrudController->taskCrudController);
        $field['value'] = $tasksForDashboard;
        $gantt = new Gantt($tasksForGantt->toArray(), array(
            'title'      => $request->input('project_name'),
            'cellwidth'  => 25,
            'cellheight' => 35
        ));

        return view('custom.gantt')->with([
            'gantt'         => $gantt,
            'field'         => $field,
            'crud'          => $projectCrudController->crud,
            'fields'        => [$field],
            'project_type'  => $projectType,
            'project_id'    => $projectId
        ]);
    }else {
        return view('custom.gantt')->with([ 'gantt' => '<h3 style="text-align:center">Este proyecto no cuenta con tareas</h3>', 'field' => '' ]);
    }
}

两个AJAX调用均成功，没有错误，但仍然没有任何反应。我在这里可以做什么？我究竟做错了什么？我应该尝试其他方法吗？

通过ajax调用来调用控制器，该调用返回Laravel 5.5中的相同视图

0 个答案: