laravel 刷新页面并在插入记录后转到正确的选项卡

Question

我在模态框内有一个引导数据表。 当我单击此数据表中的一个按钮时，一条新记录被插入到数据库中，模式会自动关闭，但在父窗口中我看不到新记录。当我将 location.reload 放入我的成功 ajax 响应中时，记录是好的，但是页面重新加载并转到活动选项卡是不正确的。我试过 location.hash = '#tab2';但没有任何改变。

这是我的 JS 函数：

function addMemberToLessonDirect(id)
    {
        console.log(id);

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            method: 'POST', // Type of response and matches what we said in the route
            url: '/admin/lessons/addMember/licenseMemberId', // This is the url we gave in the route
            data: {'licenseMemberId' : id},
            success: function(response){ // What to do if we succeed
                console.log(response);
                //location.hash = '#tab2';
                location.reload();
            }

        });

    }

表格是用 Yajra Datatables 生成的：

public function getMembersDirect()
{
    $members = DB::table('members')
        ->select(['license_member.id as id','nip','firstname','lastname', DB::raw('DATE_FORMAT(birthdate, "%d-%m-%Y") as birthdate'),'description'])
        ->join('license_member','members.id','license_member.member_id')
        ->join ('licenses','licenses.id','license_member.license_id')

        ->whereNull('members.deleted_at')
        ->orderBy('members.lastname','asc');


    return Datatables::of($members)
        ->addIndexColumn()
        ->addColumn('action', function ($member) {


            $clic="addMemberToLessonDirect($member->id)";
            $link='<a onclick="'.$clic.'" class="btn btn-info btn-xs"><i class="fa fa-arrow-up" title="Add to lesson"></i></a>';
            return $link;})->make(true);

}

这是我的刀片文件的一部分，有 2 个选项卡（我希望它在选项卡 2 上刷新）：

<div role="tabpanel">
    <ul class="nav nav-tabs" role="tablist" id="tabMenu">
         <li class="nav-item"><a class="nav-link active" href="#tab1" data-toggle="tab">{{__('lesson.detail')}}</a></li>
         <li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">{{__('lesson.members')}}</a></li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane active" id="tab1" role="tabpanel">
        <form method="POST" action="{{ route('lessons.update', ['lesson' => $id]) }}">
            {{ csrf_field() }}
            <button type="submit" class="btn btn-primary"><i class="fa"></i> {{__('lesson.update')}}</button>
        </form>
    </div>
    <div class="tab-pane" id="tab2" role="tabpanel">
        <div class="table-responsive">
            <table class="table" id="actual-members">
                <tr>
                    <th scope="row" ># {{__('member.id')}}</th>
                    <th scope="row" >{{__('member.firstname')}}</th>  
                    <th scope="row" ></th>
                </tr>
                @foreach($lesson->LessonLicenseMember as $llm)
                <tr>
                    <td scope="row" >{{$llm->licenseMember->member->id}}</td>
                    <td scope="row" >{{$llm->licenseMember->member->firstname}}</td>
                    <td scope="row" >{{$llm->licenseMember->member->lastname}}</td>
                    <td>
                        <form class="delete" action="{{ route('lessons.removeMember', ['licenseMemberId' => $llm->id]) }}" method="POST">
                            {{ csrf_field() }}
                            {{ method_field('DELETE') }}
                            <button class="btn btn-danger btn-xs btn-delete" >
                            <i class="fa fa-trash-o" title="{{__('lesson.remove_member_from_lesson')}}"></i>
                            </button>
                        </form>
                    </td>
                    @endforeach
                </table>
            </div>
            <a href="{{ route('lessons.index',['type'=>$lesson->course->type->description]) }}#{{$lesson->course->id}}"class="btn btn-primary"><i class="fa fa-angle-double-left"></i>{{__('general.back')}}</a>&nbsp;
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#membersModal">
                {{__('lesson.addMember')}}
            </button>
            <div class="panel-body" id="allMembers" style="display: none;">   
                <h6><b>{{__('member.list')}}</b></h6>
                {{-- @include('admin.lessons.lessons_members_direct') --}}
            </div>
        </div>
    </div>
</div>

Answer 1

我刚刚尝试在我的一个单页应用程序上同时使用两者，并且工作正常：

  // first change the url
  location.hash = '#tab2'; // or location.href = "#tab2"
  // then refresh
  location.reload();

但您遇到的问题是因为您始终将第一个选项卡设为活动状态，这应该会改变。

为了在使用 ajax 时显示新记录，除非您使用 Vue 或 Angular 等模型视图绑定框架，否则您将始终需要在 ajax 成功回调中手动附加新记录。

或者，如果您重新加载页面，您的活动标签应该会根据结果发生变化。 您可以使用 jquery 在活动选项卡上触发更改，如下所示：

$('a[href="#tab2"]').trigger('click');