小编ben*_*pps的帖子

我有一个使用CFlayout生成动态标签的应用程序.每个选项卡都由变量组合组成,但就本文而言,没有必要进入该选项.

这是有趣的.过去,如果CFlayout找不到标签,我总是会收到错误.如果我更改选项卡名称是什么(知道它将是不正确的)Coldfusion会抛出错误,所以我知道选项卡正常存在,但无论出于何种原因,它都没有切换.

以下是我的代码:

JavaScript的

var uniqueTopTabID = someVar,
    uniqueLowerTabID = uniqueTopTabID + someVar,
    $topLayoutID = $('#cf_layoutarea' + uniqueTopTabID), //jquery objects to find if the tabs exist
    $lowerTabID = $('#cf_layoutarea' + uniqueLowerTabID); //same as above

以下是创建新选项卡或选择以前创建的选项卡的逻辑:

if ( $topLayoutID.length < 1 ) {
    ColdFusion.Layout.createTab('innerTabLayout', uniqueTopTabID, 'tabName' , cfLayoutLocation,    {inithide: false, selected: true, closable: true});          
}
//if the subsystem and WBS have already been selected, focus on that tab
else if ( $lowerTabID.length !== 0 ) {
    ColdFusion.Layout.selectTab( uniqueTopTabID, uniqueLowerTabID ); …

我对pushState/popstate有一个奇怪的问题,我的初始页面似乎保存了两次.

没有例子就很难解释.

这样的事情:

1. 当前页面是www.bing.com
2. 将我的网址复制/粘贴到网址栏和网页加载中
3. 单击页面上的链接(此链接将触发AJAX请求,然后操作DOM以显示检索到的数据.)
4. 按下后退按钮,将我带到与步骤2相同的页面
5. 再按一次按钮,但我仍然和step2/4在同一页面上
6. 再次按回按钮,这将我带回www.bing.com

正如你所看到的,我需要按两次后退按钮让我回到www.bing.com,它应该只需要1.

我的页面的简短说明(代码位于页面底部):

1. 当页面加载时,通过AJAX检索下拉列表选择的初始列表并填充选择标记.

2. 用户可以选择单击确定下拉选择内容的3个链接.示例:如果单击选项B链接,则会从步骤1触发相同的AJAX,但仅检索适用于选项B的数据.

3. 用户从下拉列表中进行选择并按下搜索.这会触发另一个AJAX函数,该函数检索相关数据并在mysearchresults div中显示格式化信息.

4. 我尝试使用pushState进行放置(例如,在AJAX调用之前或之后),并且放置现在似乎是给我最小问题的放置.虽然我确实遇到了上面提到的问题.

这是我的代码.我不得不删除许多代码/函数,使其简短易读,但请确保AJAX调用/数据显示正常.

<div id="content">
    <p>
        <a class="coursetype" href="#" data-type="B">Option B</a>
        | <a class="coursetype" href="#" data-type="H">Option H</a>
        | <a class="coursetype" href="#" data-type="BG">Option BG</a>
    </p>

    <form id="myform">
        <label class="formlabel" for="course">Select your course</label>
        <br /><select id="course" name="course"></select>
        <button id="searchbutton" type="button">Search Me</button>
    </form>

    <div id="mysearchresults"></div>
</div>

$(document).ready(function() {
    var onClickCourseTypeHandler = function(event) {
        event.preventDefault();

        getCourses({ type:$(event.target).data("type") });

        window.history.pushState({ html:$("#content").html(), coursecode:$("#coursecode").val() }, "", main?type="+pagevars.type);
    }

    var onClicksearchbuttonHandler = function(event) …