Как активировать вкладку, когда на этой вкладке нажимаются ссылки на страницы? - PullRequest
0 голосов
/ 26 апреля 2018

Когда пользователь обращается к "http://proj.test/user/profile?user=1", он переходит на страницу, подобную приведенной ниже, на которой есть 3 вкладки: одна для пользователя, чтобы отредактировать его учетную запись, другая (Мои билеты) для пользователя, чтобы получить доступ к информации о его регистрациях в конгрессах. и другие (Мои конгрессы) для доступа пользователя к информации о созданных им конгрессах. Вкладка по умолчанию при доступе к этой странице - «Редактировать учетную запись пользователя».

enter image description here

Содержимое tab1 предназначено для редактирования пользователем своего профиля. Когда пользователь нажимает «Обновить», код отправляется в UserController для обновления информации о пользователе.

Когда пользователь нажимает на вкладке 2 (Мои билеты) содержимое этой вкладки, как показано ниже. Он показывает регистрации в конгрессах пользователя. Внутри содержимого этой вкладки также отображаются 2 вкладки, на которых пользователь показывает свои регистрации в конгрессах, которые уже завершены, и другие вкладки, на которых отображаются его регистрации в конгрессах, которые еще не проводились.

Затем происходит разбиение на страницы, если имеется более 5 результатов, когда пользователь переходит на ссылку "2", он переходит к "http://proj.test/user/profile?page=2".

enter image description here

Когда пользователь нажимает на вкладке 3 (Мои конгрессы) содержимое этой вкладки, как показано ниже. Показывает конгрессы, созданные пользователем. Внутри содержимого этой вкладки также есть 3 вкладки, одна (Черновик) для пользователя, чтобы показать созданные им конгрессы, которые имеют столбец "status" как "D", другая (Опубликованная), чтобы показать конгрессы, созданные пользователем, которые имеют столбец "status" как "P" и другие (в архиве), чтобы показать конгрессы, созданные пользователем, которые уже закончили.

Затем происходит разбиение на страницы, если имеется более 5 результатов, когда пользователь переходит на ссылку "2", он переходит к "http://proj.test/user/profile?page=2".

enter image description here

Сомнение:

Проблема, связанная с этим контекстом, заключается в том, что при щелчке ссылки на нумерацию страниц в какой-либо вкладке, например, если пользователь находится на вкладке «Черновик» на вкладке «Мои конгрессы» и щелкает ссылку «нумерация страниц» «2», URL-адрес изменяется на «http://proj.test/user/profile?page=2", но вкладка, которая становится активной, является первой, вкладка« Изменить учетную запись пользователя ». Затем, если пользователь нажимает« Мои конгрессы », отображаются результаты страницы 2, но пользователю необходимо вручную нажать кнопку «Мои конгрессы».

Знаете ли вы, как в этом случае активировать вкладку «Мои конгрессы», если щелкнуть ссылку на страницу пагинации на вкладке «Мои конгрессы»?

Полный код на этой странице, чтобы показать все вкладки:

<ul class="nav nav-pills" role="tablist">
    <li class="">
        <a class="nav-link active" href="#updateUserInfo" data-toggle="tab" role="tab">Edit user account</span></a>
    </li>
    <li class="disabled">
        <a class="nav-link" href="#myCongresses" data-toggle="tab" role="tab">My Congresses</span></a>
    </li>
    <li class="disabled">
        <a class="nav-link" href="#myTickets" data-toggle="tab" role="tab">My Tickets</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active clearfix" id="updateUserInfo" role="tabpanel" aria-labelledby="home-tab">
        <form method="post" action="{{route('user.updateUserInfo')}}" class="clearfix">
            {{csrf_field()}}
            <div class="form-row">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" value="{{$user->name}}" name="name" class="form-control" id="name" >
                </div>
               <!--other form fields-->
            <input type="submit" class="btn btn-primary btn" value="Update"/>
        </form>
    </div>

    <div class="tab-pane clearfix fade" id="myCongresses" role="tabpanel" aria-labelledby="contact-tab">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link active border" href="#draftCongresses" data-toggle="tab"
                       role="tab">Draft</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link border" href="#publishedCongresses" data-toggle="tab"
                       role="tab">Published</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link border" href="#archivedCongresses" data-toggle="tab"
                       role="tab">Archived</a>
                </li>
            </ul>
        <div class="tab-content bg-white" id="myTabContent">
            <div class="tab-pane fade active show clearfix" id="draftCongresses" role="tabpanel" aria-labelledby="home-tab">
                <ul class="list-group">
                    @foreach($draftCongresses as $draftCongress)
                        @if(!empty($draftCongress))
                            <li class="list-group-item">
                                <p>{{$draftCongress->start_date->formatLocalized('%a, %b %d, %Y - %H:%M')}}</p>
                                <h5>{{$draftCongress->name}}</h5>
                                <a href="{{route('congress.edit', ['id' => $draftCongress->id])}}" class="btn">Edit Congress</a>
                            </li>
                        @endif
                    @endforeach
                </ul>
                <div class="text-center d-flex justify-content-center mt-3">
                    {{$draftCongresses->links(("pagination::bootstrap-4"))}}
                </div>
            </div>

            <div class="tab-pane fade show clearfix" id="publishedCongresses" role="tabpanel" aria-labelledby="home-tab">
                <ul class="list-group">
                    @foreach($publishedCongresses as $publishedCongress)
                        @if(!empty($publishedCongress))
                            <li class="list-group-item">
                                <p>{{$publishedCongress->start_date->formatLocalized('%a, %b %d, %Y - %H:%M')}}</p>
                                <h5>{{$publishedCongress->name}}</h5>
                                <a href="{{route('congress.edit', ['id' => $publishedCongress->id])}}"
                                   class="btn btn-outline-primary">Edit Congress</a>
                            </li>
                        @endif
                    @endforeach
                </ul>
                <div class="text-center d-flex justify-content-center mt-3">
                    {{$publishedCongresses->links(("pagination::bootstrap-4"))}}
                </div>
            </div>

            <div class="tab-pane fade show clearfix" id="archivedCongresses" role="tabpanel" aria-labelledby="home-tab">
                <ul class="list-group">
                    @foreach($archivedCongresses as $archivedCongress)
                        @if(!empty($archivedCongress))
                            <li class="list-group-item">
                                <p> {{$archivedCongress->start_date->formatLocalized('%a, %b %d, %Y - %H:%M')}}</p>
                                <h5>{{$archivedCongress->name}}</h5>
                                <a href="{{route('congress.edit', ['id' => $archivedCongress->id])}}"
                                   class="btn btn-outline-primary">Edit Congress</a>
                            </li>
                        @endif
                    @endforeach
                </ul>

                <div class="text-center d-flex justify-content-center mt-3">
                    {{$archivedCongresses->links(("pagination::bootstrap-4"))}}
                </div>
            </div>
        </div>
    </div>


    <div class="tab-pane clearfix fade" id="myTickets" role="tabpanel" aria-labelledby="contact-tab">

        <div class="d-flex mb-3">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link active border" id="nextCongresses" href="#nextCongresses" data-toggle="tab" role="tab">Next Congresses</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link border" id="pastCongresses" href="#pastCongresses" data-toggle="tab" role="tab">Past Congresses</a>
                </li>
            </ul>
        </div>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="nextCongresses" role="tabpanel" aria-labelledby="home-tab">
                <ul class="list-group" id="nextCongressesContainer">
                    @foreach($nextRegistrations as $nextRegistration)
                        @if(!empty($nextRegistration->congress || !empty($nextRegistration->congress->start_date)))
                            <li class="list-group-item">
                                <p>{{optional($nextRegistration->congress)->start_date->formatLocalized('%a, %b %d, %Y - %H:%M')}}</p>
                                <h5>{{optional($nextRegistration->congress)->name}}</h5>
                                <p> Registration in {{optional($nextRegistration->congress)->created_at }}</p>
                            </li>
                        @endif
                    @endforeach
                </ul>

                <div class="text-center d-flex justify-content-center mt-3">
                    {{$nextRegistrations->links(("pagination::bootstrap-4"))}}
                </div>

            </div>

            <div class="tab-pane fade show" id="pastCongresses" role="tabpanel" aria-labelledby="home-tab">
                <ul class="list-group" id="pastCongressesContainer">
                    @foreach($pastRegistrations as $pastRegistration)
                        @if(!empty($pastRegistration->congress || !empty($pastRegistration->congress->start_date)))
                            <li class="list-group-item">
                                <p>{{optional($pastRegistration->congress)->start_date->formatLocalized('%a, %b %d, %Y - %H:%M')}}</p>
                                <h5>{{optional($pastRegistration->congress)->name}}</h5>
                                <p> Registration in   {{$pastRegistration->created_at}}</p>
                            </li>
                        @endif
                    @endforeach
                </ul>

                <div class="text-center d-flex justify-content-center mt-3">
                    {{$pastRegistrations->links(("pagination::bootstrap-4"))}}
                </div>
            </div>
        </div>
    </div>
</div>

UserController:

class UserController extends Controller
{
    public function index(Request $request){

        $pageLimit = 5;

        $user = $request->user();

        $pastRegistrations = $user->registrations()->with(['congress' => function ($query) {
            $query->where('end_date', '<', now());
        }])->paginate($pageLimit);

        $nextRegistrations = $user->registrations()->with(['congress' => function ($query) {
            $query->where('end_date', '>', now());
        }])->paginate($pageLimit);

        $draftCongresses = $user->congresses()->where('status','D')->paginate($pageLimit);
        $pastCongresses = $user->congresses()->where('end_date','<', now())->paginate($pageLimit);
        $publishedCongresses = $user->congresses()->where('status','P')->paginate($pageLimit);

        return view('users.index',
            compact('user', 'pastRegistrations','nextRegistrations', 'draftCongresses', 'pastCongresses', 'publishedCongresses'));
    }
}

Пример выпуска

Если здесь щелкнуть ссылку «2»:

enter image description here

Вместо отображения страницы с активной вкладкой «Мои конгрессы», как на изображении выше, но с активной ссылкой «2» вместо нумерации страниц «1», она отображает страницу с активной вкладкой по умолчанию «Правка». учетная запись пользователя ":

enter image description here

Ответы [ 2 ]

0 голосов
/ 13 мая 2018

Измените эти:

{{$draftCongresses->links(("pagination::bootstrap-4"))}}
{{$publishedCongresses->links(("pagination::bootstrap-4"))}}
{{$archivedCongresses->links(("pagination::bootstrap-4"))}}
{{$nextRegistrations->links(("pagination::bootstrap-4"))}}
{{$pastRegistrations->links(("pagination::bootstrap-4"))}}

.. к этим: (то есть добавить соответствующий фрагмент ссылки)

{{$draftCongresses->fragment('draftCongresses')->links(("pagination::bootstrap-4"))}}
{{$publishedCongresses->fragment('publishedCongresses')->links(("pagination::bootstrap-4"))}}
{{$archivedCongresses->fragment('archivedCongresses')->links(("pagination::bootstrap-4"))}}
{{$nextRegistrations->fragment('nextCongresses')->links(("pagination::bootstrap-4"))}}
{{$pastRegistrations->fragment('pastCongresses')->links(("pagination::bootstrap-4"))}}

Затем добавьте этот скрипт JavaScript / jQuery на страницу:

<script>
jQuery( function( $ ){
    // List of tab IDs.
    var tabs = {
    // PARENT_TAB_ID: [ 'ID_OF_DIRECT_CHILD_TAB', 'ID_OF_DIRECT_CHILD_TAB', ... ]
        updateUserInfo: [],
        myCongresses: [ 'draftCongresses', 'publishedCongresses', 'archivedCongresses' ],
        myTickets: [ 'nextCongresses', 'pastCongresses' ]
    };

    // Default tab's ID.
    var default_tab = 'updateUserInfo';

    function showTab( parent_id, child_id ) {
        $( 'a[data-toggle="tab"][href="#' + parent_id + '"]' ).first().click();

        if ( child_id ) {
            $( 'a[data-toggle="tab"][href="#' + child_id + '"]' ).first().click();
        }
    }

    $( window ).on( 'load hashchange', function(){
        var tab_id = location.hash || '';

        // Remove the hash (i.e. `#`)
        tab_id = tab_id.substring(1);

        if ( tab_id && tabs[ tab_id ] ) {
            showTab( tab_id );
        } else if ( tab_id ) {
            $.map( tabs, function( child_ids, parent_id ){
                if ( $.inArray( tab_id, child_ids ) > -1 ) {
                    showTab( parent_id, tab_id );
                }
            } );
        } else {
            showTab( default_tab );
        }
    } );
} );
</script>
0 голосов
/ 11 мая 2018

Поскольку вы используете вкладки Bootstrap, вам нужно добавить правильный фрагмент к ссылкам для нумерации страниц, чтобы сохранить активную вкладку.

Например, вы можете сделать что-то вроде этого

{{ $draftCongresses->fragment('myCongresses')->links("pagination::bootstrap-4") }}

Вы можете увидеть документ здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...