jquery - 使用 Flask/BootStrap/jquery 通过帖子提交文本框时重定向到特定选项卡

Question

我正在编写一个包含 3 个选项卡的网页。选项卡 1 是主要的事件选项卡。选项卡 3 有文本框/提交按钮对。当我选择选项卡 3 上的提交按钮时，它会将我重定向到选项卡 1。我需要将其重定向回选项卡 3。

我尝试使用如下解决方案:

How to redirect to a specific tab using jquery

但是，由于 Flask(我正在使用的服务器)执行模板渲染的方式，当我使用建议的解决方案时，我发现/page#tab3 不是有效页面(我可以提供实际的页面)错误，如果我清理它后有帮助的话)。

这是我用于提交文本(html 页面)的代码:

<div id="tabs">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" style="width:98%">
    <li role="presentation" class="active"><a href="#open" data-toggle="tab" aria-controls="new" role="tab">Open Issues</a></li>
    <li role="presentation"><a href="#new" data-toggle="tab" aria-controls="reports" role="tab">New Issue</a></li>
    <li role="presentation"><a href="#lookup" data-toggle="tab" aria-controls="incidents" role="tab">Lookup</a></li>
  </ul>

  <div class="tab-content" style="width:98%">
    <div role="tabpanel" class="tab-pane fade in active" id="open">

        <table class="table sortable" align="center" style="width:98%">
        <thead>
        <tr>
        <th data-defaultsort="asc" width="10%"><center><center>Number</center></center></th>
        <th width="50%"><center>Subject</th>
        <th width="10%"><center>Owner</th>
        <th width="15%"><center>Updated</th>
        <th width="15%"><center>Created</th>
        </tr>
        </thead>
        <tbody>
        {% for content in array %}
        <tr>
        <td align="center" width="10%">{{ content['number'] }}</a></td>
        <td align="center" width="50%">{{ content.Description }}</td>
        <td align="center" width="10%">{{ content['ID'] }} </td>
        <td> blank</td>
        <td> blank</td>
        </tr>
        {% endfor %}
        </tbody>
        </table>

    </div>
    <div role="tabpanel" class="tab-pane fade" id="lookup">
        {% if pagetype == "post" %}
                <p> This should be the redirect page</p>
        {% else  %}
                <form method="post">
                <div class="form-group col-xs-3">
                  <label for="incident">Incident Lookup</label>
                  <input type="text" id="lookup1" name="incident" placeholder="Incident Number">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
                </form>
        {% endif %}
    </div>
  </div>
</div>

下面是我正在导入的 Javascipt:

<script type = "text/javascript" src="/static/jquery.min.js"></script>
<script type = "text/javascript" src="/static/jquery.js"></script>
<script type = "text/javascript" src="/static/bootstrap.min.js"></script>
<script type = "text/javascript" src="/static/bootstrap.js"></script>
<script type = "text/javascript" src="/static/bootstrap-sortable.js"</script>

以下是与此问题相关的 Flask 服务器内容(当然已清理):

@app.route("/page", methods=['GET', 'POST'])
@requires_auth
def page():
        pageType="issue"
        title = "Issue"
        issues = []
        issues_open = db.issues_open
        for post in issues_open.find():
                issues.append(post.copy())

        if request.method == 'POST':
                id = request.form['incident']
                app.logger.debug(id)
                pagetype="post"
                return render_template("page.html", id=id, pagetype=pagetype)

        return render_template("page.html", pageType=pageType, open_issues=issues, title=title)

如果需要更多信息或上下文，我非常愿意提供，但这应该足以开始对话。

Answer 1

表单提交后使用唯一关键字重定向并将条件放入选项卡页面中，如果获得唯一关键字，则特定选项卡类将处于事件状态，为此您必须使用jquery addClass() & removeClass()方法...