Javascript 在没有AJAX的情况下更新剑道UI TabStrip的内容时出现问题？

我有一个小控制台，可以在我的网站上显示特定操作的输出，需要另一个控制台来显示不同类型的输出，这让我想将这两个控制台组合在一个剑道UI选项卡中，问题是，控制台上显示的信息不是通过AJAX接收的，所以当我像以前一样开始插入HTML元素时，选项卡没有更新

以下是我初始化选项卡的方式：

    $('#tabConsole').kendoTabStrip({
        animation: {
            open: {
                effects:'fadeIn'
            }
        }
    });

以下是我的HTML的外观：

<div id="tabConsole">
      <ul>
           <li class="k-state-active">Salida</li>
           <li id="notificacionTab">Notificaciones</li>
      </ul>
      <div id="userConsole"></div>
      <div id="notificationConsole"></div>
</div>

萨利达
通知人

以下是我尝试更新它的方式：

function appendToConsole(content, type, optional) {
//code to append to console
    var actualDate = new Date();
    var prevContent = $('#userConsole').html();
    if (typeof prevContent === 'undefined') {
        prevContent = '';
    }
    var strType = '';
    var iconType = '';
    var moreOutput = '';
    if (type == 1) {
        strType = 'infoConsole';
        iconType = 'infoIcon.png';
    } else if (type == 2) {
        strType = 'warningConsole';
        iconType = 'warningIcon.png';
        moreOutput = '<img id="viewDetails" value="' + optional + '" class="moreConsole" src="../Content/images/icons/arrow.png">';
    } else if (type == 3) {
        strType = 'errorConsole';
        iconType = 'errorIcon.png';
    }
    var iconOutput = '<img class="iconConsole" src="../Content/images/icons/' + iconType + '">';
    var dateOutput = '<div class="dateConsole">' + iconOutput + ' ' + actualDate.toLocaleDateString() + ', ' + actualDate.toLocaleTimeString() + ' : </div>';
    var consoleOutput = prevContent + '<div class="outputConsole">' + dateOutput + content + moreOutput + '</div>';
    $('#userConsole').html(consoleOutput.toString());
    var height = $('#userConsole')[0].scrollHeight;
    $('#userConsole').scrollTop(height);
//my try to update the tab
    var tabStrip = $('#tabConsole'),
        selectedIndex = tabStrip.data('kendoTabStrip').select().index(),
        clone = original.clone(true);
    clone.children('ul')
    .children('li')
    .eq(selectedIndex)
    .addClass('k-state-active')
    .end();
    tabStrip.replaceWith(clone);
    $('#tabConsole').kendoTabStrip({
        animation: {
            open: {
                effects: 'fadeIn'
            }
        }
    });
}

函数appendToConsole（内容、类型、可选）{
//要附加到控制台的代码
var actualDate=新日期（）；
var prevContent=$（'#userConsole'）.html（）；
如果（prevContent的类型==='undefined'）{
prevContent=''；
}
var strType=''；
var-iconType=''；
var moreOutput=''；
如果（类型==1）{
strType='infoConsole'；
iconType='infoIcon.png'；
}else if（类型==2）{
strType='warningConsole'；
iconType='warningIcon.png'；
moreOutput=''；
}else if（类型==3）{
strType='errorConsole'；
iconType='errorIcon.png'；
}
var-iconOutput=''；
var dateOutput=''+iconOutput+'+actualDate.toLocaleDateString（）+'，'+actualDate.toLocaleTimeString（）+'：'；
var consoleOutput=prevContent+''+dateOutput+content+moreOutput+''；
$（'#userConsole'）.html（consoleOutput.toString（））；
var height=$（'#userConsole'）[0]；
$（'#userConsole'）。滚动顶部（高度）；
//我将尝试更新选项卡
var tabStrip=$（“#tabConsole”），
selectedIndex=tabStrip.data（'kendoTabStrip'）.select（）.index（），
clone=original.clone（true）；
clone.children（'ul'）
.儿童（‘李’）
.eq（选择的索引）
.addClass（'k-state-active'）
.end（）；
tabStrip.replacetwith（克隆）；
$（'#tabConsole'）。kendoTabStrip({
动画：{
开放式：{
效果：“fadeIn”
}
}
});
}

如何更新TabStrip中DIV的内容

编辑

Kendo UI似乎将代表选项卡的DIV的id重命名为tabConsole-1和tabConsole-2，解释了为什么更新不起作用，仍然有很多奇怪的行为，我必须指定每个DIV的高度，以便溢出属性可以工作，当设置为绝对位置时，id为viewDetails和class moreConsole的图像也可以工作，在表示选项卡的DIV之外进行渲染，但如果我将“位置”属性更改为“相对”，则图像将保留在DIV内部，但不会像我希望的那样显示在DIV的末尾，而是相对于前面DIV的大小显示

---

对于如何设置样式以便正确显示内容，我真的很困惑。

向

选项卡添加内容可以通过以下方法实现：

$(tabConsole.contentElement(idx)).append(newContent)

其中：


idx
是选项卡索引
newContent
是要添加到现有内容和
tabConsole
是设置为
$（“#…”）的变量


您不需要创建新的tabStrip（此外，不应该重新创建KendoUI元素，因为这是一个非常昂贵的操作）

关于使用具有相同id的多个标记。。。您不应该使用它，而是使用
class
<代码>id

s应该是唯一的

---

我仍在试图理解您在样式设置方面的问题。

例如，当我在新内容中设置一个类类型为moreConsole、位置属性为absolute的图像时，所述图像位于TabStrip之外，而该图像应位于其各自的DIV父对象内。如果它是absolute，它是绝对的：-）我正在准备修改我提出的解决方案。请随意评论，我们可以改进它。添加此样式。moreConsole{position:absolute；right:5%}要了解我在说什么，剑道UI是否有办法尊重我分配给我的div的ID？我不这么认为：-（如果您知道选项卡的顺序，则可以使用索引，否则应找到与选项卡对应的索引。