Question

我在模态中有一个引导数据表。当我单击此数据表中的按钮时，新记录将插入到数据库中，模态会自动关闭，但是在父窗口中我看不到新记录。当我在成功的ajax响应中放置location.reload时，记录就可以了，但是页面重新加载并转到活动选项卡不正确。我尝试了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数据表生成的：

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');

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

1 个答案: