обновите страницу и перейдите на нужную вкладку после вставки записи

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();
            }

        });

    }

Таблица генерируется с помощью таблиц Яджры:

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 success.

Или, если вы перезагрузите страницу, ваша активная вкладка должна измениться в зависимости от результата. Вы можете вызвать изменение на активной вкладке с помощью jquery следующим образом:

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