在所有jQuery选项卡中包含相同的jsp页面

Include same jsp page in all jQuery tabs

本文关键字：包含相 jsp 页面 jQuery 选项      更新时间：2023-09-26

我想在所有具有唯一选项卡ID的jQuery选项卡中包含相同的JSP页面，即在CommentTab.html的所有jQuery选项卡上包含相同的Comment.JSP文件。当我运行以下代码时，我可以创建新的选项卡，但JSP页面内容不会显示在任何选项卡中

<script>
    $(function() {
    var tabTitle = $( "#tab_title" ),
        tabContent = $( "#tab_content" ),
        tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
        tabCounter = 2;
    var tabs = $( "#tabs" ).tabs();
    // modal dialog init: custom buttons and a "close" callback reseting the form inside
    var dialog = $( "#dialog" ).dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            Add: function() {
                addTab();
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            form[ 0 ].reset();
        }
    });
    // addTab form: calls addTab function on submit and closes the dialog
    var form = dialog.find( "form" ).submit(function( event ) {
        addTab();
        dialog.dialog( "close" );
        event.preventDefault();
    });
    // actual addTab function: adds new tab using the input from the form above
    function addTab() {
        var label = tabTitle.val() || "Tab " + tabCounter,
            id = "tabs-" + tabCounter,
            li = $( tabTemplate.replace( /#'{href'}/g, "#" + id ).replace( /#'{label'}/g, label ) ),
            //tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
                tabContentHtml = getComments();
        tabs.find( ".ui-tabs-nav" ).append( li );
        tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
        tabs.tabs( "refresh" );
        tabCounter++;
    }
function getComments(){
        $( "#success" ).load( "Comment.jsp", function( response, status, xhr ) {
              if ( status == "error" ) {
                var msg = "Sorry but there was an error: ";
                $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
              }
            });
    }
    // addTab button: just opens the dialog
    $( "#add_tab" )
        .button()
        .click(function() {
            dialog.dialog( "open" );
        });
    // close icon: removing the tab on click
    $( "#tabs span.ui-icon-close" ).live( "click", function() {
        var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
        $( "#" + panelId ).remove();
        tabs.tabs( "refresh" );
    });
});
    </script>
<body>
<div id="dialog" title="Tab data">
    <form>
        <fieldset class="ui-helper-reset">
            <label for="tab_title">Title</label> <input type="text"
                name="tab_title" id="tab_title" value=""
                class="ui-widget-content ui-corner-all" />
  <div id="tab_content" class="ui-widget-content ui-corner-all"></div>          
        </fieldset>
    </form>
</div>
<button id="add_tab">Add Tab</button>

<div id="tabs">
    <ul>    
        <div id="success"></div>
    </ul>

使用iframe解决了问题。代码的修改部分如下：脚本部分：

<script>
$(function() {
    var tabTitle = $( "#tab_title" ),
    tabContent = $( "#tab_content" ),
    tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
    tabCounter = 2;
    var websiteframe = '<iframe src="Comment.jsp" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
    var tabs = $( "#tabs" ).tabs();

然后将websiteframe包含在addTab函数中：

    function addTab() {
        var label = tabTitle.val() || "Tab " + tabCounter,
            id = "tabs-" + tabCounter,
            li = $( tabTemplate.replace( /#'{href'}/g, "#" + id ).replace( /#'{label'}/g, label ) ),
            websiteframe = '<iframe src="Comment.jsp" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
        tabs.find( ".ui-tabs-nav" ).append( li );
        tabs.append( "<div id='" + id + "'>" + websiteframe + "</div>" );
        tabs.tabs( "refresh" );
        tabCounter++;
    }

html部分：

<button id="add_tab">Add Tab</button>
<div id="tabs">
    <ul>
    </ul>   
</div>
相关文章：