在所有的jQuery標籤

我想包括在所有的jQuery標籤具有獨特的標籤的ID相同的JSP頁面，即同一Comment.jsp文件中的所有jQuery的標籤CommentTab.html包含相同的JSP頁面。當我運行下面的代碼時，我可以創建新的選項卡，但JSP頁面內容不顯示在任何選項卡中。在所有的jQuery標籤

<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>

來源

2015-12-03 Dhaval Simaria

由於您正在創建指向Comment.jsp頁面的鏈接，因此不會加載其內容。請參閱[jQuery.load（）]（http://api.jquery.com/load/）函數。 –

@JozefChocholacek這爲我工作。感謝你的幫助。 –

@JozefChocholacek它沒有顯示我創建的每個標籤。如果你能幫助我。我用_jQuery.load（）_函數編輯了代碼。 –

的問題是使用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>

來源

2015-12-03 09:22:18

在所有的jQuery標籤

回答

相關問題