Question

我拥有用于更新与从业人员有关的数据的编辑表单，我希望它保留在名为#practitioner的同一选项卡上（在该选项卡中，我具有@include开业人员显示和@include开业人员编辑）。要在这两个包含项之间进行交换，我使用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

如果您想使用laravel而不是javascript，可以按照以下步骤操作

从选项卡中，您可以传递选项卡名称的隐藏值，并在控制器中进行会话刷新，

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

在视图中，您可以检查该值并将其激活。

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

Answer 2

要重新加载页面后显示#practitioner内容，可以按照以下步骤使用本地存储。

在name标签链接上附加<a>属性
获取选定的标签名称，并将其保存到本地存储中
重新加载页面，并根据先前存储的标签名称触发选定的标签

例如，您具有类似这样的元素：

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

停留在选定的导航标签上，但也要重新加载它才能在更新后查看更改的数据

2 个答案: