Оставайтесь на выбранной вкладке навигации, а также просматривайте ее, чтобы увидеть измененные данные после обновления

Question

У меня есть форма редактирования, которую я использую для обновления данных о практиках, я хочу, чтобы она оставалась на той же вкладке под названием #practitioner (в которой у меня есть @include Practitioner-Display и @include Practitioner-Edit).Для переключения между этими двумя включениями я использую editPractitionerButton.js (код ниже).

Я уже сделал скрипт .js, который вроде как делает то, что я хочу, он остается на вкладке #practitioner, но на практикующейредактировать, не идет на дисплей практикующего.Кроме того, обновленные данные не видны, это только после обновления веб-сайта вручную.

моя функция:

$(document).ready(function () {
    $('#practitioner_edit_form').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url : $(this).attr('action') || window.location.pathname,
            type: "POST",
            data: $(this).serialize(),
            success: function (data) {
                //window.location = $('.nav-tabs a[href="#practitioner"]').tab('show');
                /*^reloads my page to http://rps.me/person/profile/49/[object%20Object] from http://rps.me/person/profile/49/Smith*/
                $('.nav-tabs a[href="#practitioner"]').tab('show');
                /*^stays in the form after submitting, changed data isn't visible, only after reload, but I want to reload to correct nav tab*/
                /*location.reload();*/
            },
            error: function (jXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
});

функция контроллера:

public function updatePractitioner(Request $request, $id)
    {

        $this->validate($request, [
                'effective_date' => 'required',
            ]
        );

        $fields = $request->all();
        $specialtyfields = (['effective_date'=>$request->get('effective_date_specialty'), 'expiry_date'=>$request->get('expiry_date_specialty')]);
        $primary_key = $this->PractitionerRepository->getIdName();
        $primary_key_specialty = $this->PractitionerSpecialtyRepository->getIdName();
        $practitioner_specialty_id = PractitionerSpecialty::where('practitioner_id', $id)->value('practitioner_specialty_id');
        $fields[$primary_key] = $id;
        $this->PractitionerRepository->update($fields);
        $specialtyfields[$primary_key_specialty] = $practitioner_specialty_id;
        $this->PractitionerSpecialtyRepository->update($specialtyfields);
        return back()->with('successUpdate', 'Practitioner has been updated!');
    }

файл формы (только кнопки):

<form> [...]

            <button type="submit"
                    class="btn btn-editpanel btn-success btn-round">Save changes
            </button>
            <!-- end /.footer -->
            <button id="update-cancel-button-practitioner" href="javascript:window.location.href=window.location.href" type="button"
                    class="btn btn-editpanel btn-danger btn-round">Cancel
            </button>
</form>

editPractitionerButton.js

function editPractitionerButton() {
    var editInfoSelector = $('.edit-practitioner');
    var viewInfoSelector = $('.view-practitioner');
    var editBtnSelector =  $('#edit-practitioner-btn');

    editInfoSelector.css('display', 'none');
    editBtnSelector.click(function(){
        if (viewInfoSelector.is(':visible')) {
            viewInfoSelector.css('display', 'none');
            editInfoSelector.css('display', '');
        } else {
            viewInfoSelector.css('display', '');
            editInfoSelector.css('display', 'none');
        }
    });
}

Поэтому я хочу обновить страницу и перейти на вкладку #practitioner.Может быть, вместо файла JS, я могу сделать определенный возврат в функции контроллера?

Answer 1

Чтобы получить содержимое #practitioner, отображаемое после перезагрузки страницы, вы можете использовать локальное хранилище, выполнив следующие шаги.

1. Прикрепите атрибут name к ссылке <a> на вкладке
2. Получить имя выбранной вкладки и сохранить его в локальном хранилище
3. перезагрузить страницу и вызвать выбранную вкладку на основе ранее сохраненного имени вкладки

Например, у вас есть такие элементы:

<div id="tabs">
    <ul>
        <li><a href="#practitioner" name="practitioner">Practitioner</a></li>
        <li><a href="#tabs2" name="tabs2">Tab 2</a></li>
        <li><a href="#tabs3" name="tabs3">Tab 3</a></li>
    </ul>

<div id="practitioner">
    <p>practitioner content</p>
</div>

<div id="tabs2">
    <p>tabs2 content</p>
</div>

<div id="tabs3">
    <p>tabs3 content</p>
</div>

Добавьте этот код в конец блока javascript:

var currTab = localStorage.getItem("tab");
if (currTab) {
    $('a[name="' + currTab + '"]').trigger("click");
}

И добавьте этот код в ответ об успешном выполнении ajax, чтобы установить локальное хранилище и вызвать страницу перезагрузки:

var tab = $("#tabs li a.active").attr("name");
localStorage.setItem("tab", tab);
location.reload();

Итак, код JavaScript будет таким:

$(document).ready(function () {
    $('#practitioner_edit_form').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url : $(this).attr('action') || window.location.pathname,
            type: "POST",
            data: $(this).serialize(),
            success: function (data) {
                //window.location = $('.nav-tabs a[href="#practitioner"]').tab('show');
                /*^reloads my page to http://rps.me/person/profile/49/[object%20Object] from http://rps.me/person/profile/49/Smith*/
                // $('.nav-tabs a[href="#practitioner"]').tab('show');
                /*^stays in the form after submitting, changed data isn't visible, only after reload, but I want to reload to correct nav tab*/
                /*location.reload();*/
                var tab = $("#tabs li a.active").attr("name");
                localStorage.setItem("tab", tab);
                location.reload();
            },
            error: function (jXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
    var currTab = localStorage.getItem("tab");
    if (currTab) {
        $('a[name="' + currTab + '"]').trigger("click");
    }
});

Answer 2

Если вы хотите использовать laravel вместо javascript, вы можете следовать этому,

На вкладке вы можете передать скрытое значение имени вкладки, а в контроллере вы можете сбросить сессию,

session()->flash('active', 'tab-name');

и в представлении вы можете проверить значение и сделать его активным.

@if(session()->get('active') == 'tab-name') 'active' @endif