Question

我有一个带有多个标签的视图。每个都有不同的形式。当我从一个选项卡提交表单时，它返回到同一页面，但返回主选项卡。如何获得返回到我工作所在的同一标签页的信息。

控制器

public function recieve(Request $request)
    {        
        $item = Item::find($request->input('item'));
            $item->recieved_at = now();
            $item->recieved_status = "1";
            $item -> save();
        return redirect('/files/'.$item->file)->with('success','Item Recieved Confirmed');
    }

视图-标签

<ul class="nav nav-tabs" id="fileTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
                   aria-controls="profile" aria-selected="true">Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="job-tab" data-toggle="tab" href="#job" role="tab" aria-controls="job"
                   aria-selected="false">Job</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="items-tab" data-toggle="tab" href="#items" role="tab" aria-controls="items"
                   aria-selected="false">Items</a>
            </li>
            <li class="nav-item"><a class="nav-link" id="mechanic-tab" data-toggle="tab" href="#mechanic" role="tab"
                                    aria-controls="mechanic" aria-selected="false">Labour Hours</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="accounts-tab" data-toggle="tab" href="#accounts" role="tab"
                   aria-controls="accounts" aria-selected="false">Accounts</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="accounts-tab" data-toggle="tab" href="#preview" role="tab"
                   aria-controls="accounts" aria-selected="false">Print Preview</a>
            </li>
        </ul>

表格

@if($file->job_status == "Closed")@else 
{!! Form::open(['action' => 'FilesController@item','method' => 'POST']) !!}
<div class="row pt-3 pb-1">
    <div class="form-group col-xs-12 col-sm-12 col-md-2">
        {{Form::text('part_number','',['class'=>'form-control','placeholder'=>'Part Number'])}}
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-6">
        {{Form::text('description','',['class'=>'form-control','placeholder'=>'Part Name'])}}                   
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-2">
        {{Form::text('qty','',['class'=>'form-control','placeholder'=>'Qty'])}}                 
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-2">
        {{Form::select('recieved_by',$users,null,['class'=>'form-control'])}}                   
    </div>
</div>
    {{Form::hidden('file',$file->id)}}
    {{Form::submit('Release Item',['class'=>'form-control btn-danger btn btn-sm'])}}
{!! Form::close() !!}
@endif

我尝试在返回重定向语句中使用标签标签名称

return redirect('/files/'.$item->file."#items-tab")->with('success','Item Recieved Confirmed');

它只会突出显示名称，但不会选择。我该如何实现？

Answer 1

如果您想在laravel中做到这一点，

-为每个标签提供一个ID，并编写一个活动类。

-放置一个隐藏的输入，其值为父选项卡ID。

-因此，laravel将在请求对象中接收标签ID。

-现在，您可以执行任何操作并将选项卡ID随同返回视图。

-为每个选项卡项提供if条件，并检查是否与laravel响应中的id相匹配。

匹配ID将活动类设置为它。

示例

<ul>
  <li id='tab1 {{ session()->get('tabId') === 'tab1' ? 'active' : '' }}'></li>
  <li id='tab2 {{ session()->get('tabId') === 'tab2' ? 'active' : '' }}'></li>  
</ul>


  // tab1 body

  <form>
  <input type="hidden" name="tabId" value="tab1">
  ...
  </form>

  // tab2 body
  <form>
  <input type="hidden" name="tabId" value="tab2">
  ...
  </form>


  // controller
  public funciton(Request $request) {
  //tabId
  $tabId = $request->input('tabId')
  ....
  ....

  return redirect()->back()->with('tabId' => $tabId);    
  }

Answer 2

您可以使用以下代码显示特定的标签：

function showTab(tab){
   $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

// Verify location.hash
if (window.location.hash !== ''){
    showTab(window.location.hash);
}

但是我会在返回中传递一个查询字符串，只是为了确保不会与其他最终的哈希冲突。像这样：

return redirect('/files/'.$item->file."?openTab=your-tab-id")->with('success','Item Recieved Confirmed');

当然，您可以将“ location.hash”验证更改为查询字符串验证。示例：https://davidwalsh.name/query-string-javascript

Answer 3

您可以这样做：

控制器：

public function tab() {
    $active_tab = "tab2";
    return view('tabs.index', compact('active_tab'));
}

查看：

<ul class="nav nav-tabs">
    <li class="@if($active_tab=="tab1") active @endif"><a data-toggle="tab" href="#home">Home</a></li>
    <li class="@if($active_tab=="tab2") active @endif"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li class="@if($active_tab=="tab3") active @endif"><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
    <div id="home" class="tab-pane fade @if($active_tab=="tab1") in active @endif">
        <h3>HOME</h3>
        <p>Some content.</p>
    </div>
    <div id="menu1" class="tab-pane fade @if($active_tab=="tab2") in active @endif">
        <h3>Menu 1</h3>
        <p>Some content in menu 1.</p>
    </div>
    <div id="menu2" class="tab-pane fade @if($active_tab=="tab3") in active @endif">
        <h3>Menu 2</h3>
        <p>Some content in menu 2.</p>
    </div>
</div>

Answer 4

您的标签导航，

<ul class="nav nav-tabs" id="tabMenu" role="tablist">
        <li><a href="#Galleries" data-toggle="tab"><i class="fa fa-camera" aria-hidden="true"></i> Galleries</a></li>
</ul>

标签的隐藏输入字段

<input type="hidden" name="tab" value="Galleries">

RedirectRoute

$tab = $request->get('tab');
return back()->withInput(['tab'=>$tab]);

JavaScript

<script>
        //redirect to specific tab
        $(document).ready(function () {
            $('#tabMenu a[href="#{{ old('tab') }}"]').tab('show')
        });
</script>

Laravel从选项卡提交表单并返回视图中的同一选项卡

4 个答案: