0
我在樹形視圖中單擊鏈接時創建選項卡。在選項卡中還有兩個其他選項卡已創建，其中有textareas，它們轉換爲CodeMirror。在創建CodeMirror實例時，我遇到了很多困難，通常我的問題是.refresh()事件。jQuery，引導選項卡和CodeMirror.refresh（）
CodeMirror沒有完全加載在沒有激活的標籤中，因此我在創建實例時添加了一些更改，並將它們全部收集到數組中，稍後在代碼循環中使用.refresh()，以便CodeMirror編輯器完全加載。
在我這樣做之前，CodeMirror被添加到我在點擊創建的所有選項卡中的所有textareas中，但是我總是刷新所有CodeMirror實例，而不是新選項卡中的那些實例。這導致在另一個選項卡中輸入的值被清除。
因此，對於新更改，我只刷新在新選項卡中創建的當前CodeMirror實例。但是現在，所有仍然打開的舊標籤中的CodeMirror（btw標籤可以被關閉）消失。所以現在我想知道，CodeMirror.refresh()刷新整個頁面？
下面是我的代碼的一部分，它是創建CodeMirror實例的部分。我不認爲創建選項卡上的代碼有什麼用此功能失調：
/*添加CodeMirror所有的文本框轉換，需要超時，直到所有的DOM元素加載*/
setTimeout(function() {
var textAreaId = 0;
$(".AI-textarea").each(function() {
$(this).attr("id", "text" + textAreaId);
++textAreaId;
});
var queryArr = [];
var dimensionArr = [];
var queryBuilder = $(tabPanelDiv).find(".QueryBuilder");
queryBuilder.each(function (index, el) {
var editorQuery = CodeMirror.fromTextArea(el, {
lineNumbers: true,
tabMode: "indent",
mode: "text/x-sql",
theme: "eclipse"
});
queryArr.push(editorQuery);
});
var dimensionBuilder = $(tabPanelDiv).find(".DimensionBuilder");
dimensionBuilder.each(function (index, el) {
var editorQuery = CodeMirror.fromTextArea(el, {
lineNumbers: true,
tabMode: "indent",
mode: "text/x-sql",
theme: "eclipse"
});
dimensionArr.push(editorQuery);
});
for (var i = 0; i < queryArr.length; i++) {
queryArr[i].refresh();
}
for (var a = 0; a < dimensionArr.length; a++) {
dimensionArr[a].refresh();
}
}, 100);
我必須讓setTimeout函數中的代碼等待textareas被創建。該功能在點擊事件中。
任何人都可以指出什麼可能導致CodeMirror從舊標籤中的Dom消失？這可能是CodeMirror.refresh()事件，還是點擊事件做了一些我不知道的事情？在創建新選項卡時，最後一個CodeMirror實例是否會丟失？
下面是兩個選項卡的屏幕截圖，第一個顯示了全新選項卡的外觀。第二個顯示了較舊的選項卡應如何看起來相似。
編輯
這裏是整個點擊事件，有沒有什麼幫助，也許早在造成這種代碼的東西嗎？我很抱歉混合JavaScript和jQuery，可能會做一些重寫。
$(".treeviewLinks").click(function (e) {
e.preventDefault();
var targetElement = e.target || e.srcElement;
/*** Create everything for the upper tabs that open when tree view link is clicked ***/
if ($(".tabHelper").find("#upperTab").length == 0) {
var ul = document.createElement("ul");
ul.className = "nav nav-tabs";
ul.id = "upperTab";
ul.setAttribute("role", "tablist");
$(".tabHelper").append(ul);
}
var ul = $("#upperTab");
var id = $('#upperTab li').size() + 1;
var li = document.createElement("li");
var a = document.createElement("a");
var span = document.createElement("span");
li.setAttribute("role", "presentation");
a.href = "#" + id;
a.setAttribute("aria-controls", id);
a.setAttribute("role", "tab");
a.setAttribute("data-toggle", "tab");
span.className = "glyphicon glyphicon-remove pull-right exit";
a.innerHTML = targetElement.innerHTML;
if ($(".tabHelper").find(".tab-content").length == 0) {
var tabContentDiv = document.createElement("div");
tabContentDiv.className = "tab-content";
}
$(".tabHelper").append(tabContentDiv);
var tabContentDiv = $(".tabHelper").find(".tab-content").first();
var tabPanelDiv = document.createElement("div");
tabPanelDiv.className = "tab-pane"
tabPanelDiv.id = id;
tabPanelDiv.setAttribute("role", "tabpanel");
ul.append(li);
li.appendChild(a);
a.appendChild(span);
tabContentDiv.append(tabPanelDiv);
var upperTab = document.getElementById("upperTab");
var tabContent = document.getElementsByClassName("tab-content")[0];
var cId = $(tabContent).size() + 1;
if (id == 1) {
var tmpLi = upperTab.firstChild;
tmpLi.className = "active";
}
else if (id > 1) {
$(li).siblings().removeClass("active");
li.className = "active";
}
if (cId == 1) {
var tmpTabPane = tabContent.firstChild;
tmpTabPane.className += " active";
}
else if (cId > 1) {
$(tabPanelDiv).siblings().removeClass("active");
tabPanelDiv.className += " active";
}
/*** Create ul for nav-tabs and tab-content for query and dimension builder tabs ***/
var qdUl = document.createElement("ul");
qdUl.className = "nav nav-tabs query-dimension-tabs";
qdUl.setAttribute("role", "tablist");
var qdDiv = document.createElement("div");
qdDiv.className = "tab-content query-dimsension-tabs-content";
for (var i = 0; i < tabContent.childNodes.length; i++) {
var item = $(tabContent.childNodes[i]);
if (item.children().length < 1) {
item.append(qdUl);
item.append(qdDiv);
}
}
/*** Create li in nav-tabs and tab-panel in tab-content for query and dimension builder tabs ***/
var qLi = document.createElement("li");
var dLi = document.createElement("li");
qLi.setAttribute("role", "presentation");
qLi.className = "active";
dLi.setAttribute("role", "presentation");
var navTabs = $(".query-dimension-tabs");
var qA = document.createElement("a");
var dA = document.createElement("a");
qA.setAttribute("role", "tab");
qA.setAttribute("data-toggle", "tab");
qA.innerHTML = "Query Builder";
dA.setAttribute("role", "tab");
dA.setAttribute("data-toggle", "tab");
dA.innerHTML = "Dimension Builder";
for (var i = 0; i < navTabs.length; i++) {
var item = $(navTabs[i]);
if (item.children().length < 1) {
item.append(qLi);
item.append(dLi);
qLi.appendChild(qA);
dLi.appendChild(dA);
}
}
var qdId = 0;
$(".query-dimension-tabs").each(function() {
$(this).find("a").each(function() {
$(this).attr("href", "#tab" + qdId);
$(this).attr("aria-controls", "tab" + qdId);
++qdId;
});
});
var tabPane1 = document.createElement("div");
var tabPane2 = document.createElement("div");
tabPane1.className = "tab-pane active";
tabPane1.setAttribute("role", "tabpanel");
tabPane2.className = "tab-pane";
tabPane2.setAttribute("role", "tabpanel");
$(".tab-content:not(:first)").each(function() {
$(this).append(tabPane1);
$(this).append(tabPane2);
});
var pId = 0;
$(".query-dimsension-tabs-content").each(function() {
$(this).find(".tab-pane").each(function() {
$(this).attr("id", "tab" + pId);
++pId;
});
if (!($.contains($(this), "form"))) {
var firstPane = $($(this).children()[0]);
var secondPane = $($(this).children()[1]);
firstPane.load("/Webfront/QueryBuilder");
secondPane.load("/Webfront/DimensionBuilder");
}
});
//var url = '@Url.Action("QueryDimensionTab", "Webfront")';
/*** Add CodeMirror to convert all textboxes, needs timeout until all dom elements are loaded ***/
setTimeout(function() {
var textAreaId = 0;
$(".AI-textarea").each(function() {
$(this).attr("id", "text" + textAreaId);
++textAreaId;
});
var queryArr = [];
var dimensionArr = [];
var queryBuilder = $(tabPanelDiv).find(".QueryBuilder");
queryBuilder.each(function (index, el) {
var editorQuery = CodeMirror.fromTextArea(el, {
lineNumbers: true,
tabMode: "indent",
mode: "text/x-sql",
theme: "eclipse"
});
queryArr.push(editorQuery);
});
var dimensionBuilder = $(tabPanelDiv).find(".DimensionBuilder");
dimensionBuilder.each(function (index, el) {
var editorQuery = CodeMirror.fromTextArea(el, {
lineNumbers: true,
tabMode: "indent",
mode: "text/x-sql",
theme: "eclipse"
});
dimensionArr.push(editorQuery);
});
for (var i = 0; i < queryArr.length; i++) {
queryArr[i].refresh();
}
for (var a = 0; a < dimensionArr.length; a++) {
dimensionArr[a].refresh();
}
}, 100);
});