jquery多个jsp选项卡

我是jQuery的新手，我已经研究了足够的网络，但似乎无法找到解决此问题的方法。我有两个选项卡，每个从不同的JSP加载。主要的JSP（默认的一个）包含了所有的脚本文件。但是当我从JSP2调用jQuery函数时，它们不会被触发。我的理解是，JSP2不具有这些函数的可见性。当我复制粘贴到jsp2所需的jQuery功能时，一切都按预期工作。但我不明白为什么我需要在两个地方有脚本文件。每个JSP在独立运行时按预期工作。jquery多个jsp选项卡

以下是代码中的一些片段，主要JSP：

<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Tab one</a></li> 
<li><a href="config.jsp" title="test">Tab two</a></li> 
</ul> 

<div id="tabs-1"> 
blah blah </div> 
</div>

JQuery的：

$(document).ready(function() { 

$('#tabs').tabs(); 
} 

function updateGrid(){ 
url = "www.google.com"; 
jQuery("#logGrid").clearGridData(); 
cache : false, 
$.post(url, 
function(data) { 
    if (data != null) { 
     var mygrid = jQuery("#logGrid")[0]; 
     for (var i = 0; i < data.length; i++) { 
      jQuery("#logGrid").addRowData(i, data[i]); 
     } 
    } 
}); 
    } 

    jQuery("#logGrid").jqGrid(
     { 
      url : '', 
      mtype : 'POST', 
      datatype : "json", 
      rownumbers : true, 
      colNames: ["Logger Name","Logger Parent ", "Current Log Level", "Update Log Level To"], 
      colModel: [ 
         { name: 'loggerName', index: "loggerName", width: 215, editable: true}, 
         { name: "loggerParent", index: "loggerParent", width: 100, editable: true }, 
         { name: "loggerEffectiveLevel", index: "loggerEffectiveLevel", width: 100, editable: true}, 
         { name: "changedLogLevel", index: "changedLogLevel", width: 35, editable: true, edittype:"select", editoptions:{value:"DEBUG:DEBUG;INFO:INFO;WARN:WARN;ERROR:ERROR;FATAL:FATAL"} } 
         ], 
      autowidth: true, 
      rownumWidth: 40, 
      height : $(window).innerHeight(), 
      viewrecords: true, 
      caption:"Log4j Configuration Log Level", 
      cellEdit: true, 
      cellsubmit: 'clientArray', 
      afterSaveCell: function (rowid, cellname, value) { 

        var targetLogLevel = jQuery('#logGrid').getCell(rowid, "changedLogLevel"); 
        var targetLogger = jQuery('#logGrid').getCell(rowid, "loggerName"); 
        updateLog(targetLogger, targetLogLevel); 

    }

}）;

而且JSP2是

<script type="text/javascript"> 
    updateGrid(); 
</script> 
<div id="test"> 
<form id="logGridForm"> 
    <table id="logGrid"></table> 
</form> 
</div>

我不想脚本功能复制到每个JSP ..它使多余的，看起来杂乱无章。有没有办法解决这个问题。我在这里做错了什么？

我已编辑我的问题，包括用于填充数据的jqGrid。在这种情况下，它会失败并产生以下异常：消息：'this.p.rownumbers'为空或不是对象URI：localhost：7001/imgRepository/js/jquery.jqGrid.min.js

当我复制该方法本地化为JSP2。

来源

2013-03-13 user2166045

当你点击第二个选项卡上会发生什么？您是否使用AJAX加载第二个标签内容？你刷新整个页面吗？ – 2013-03-13 15:44:02

第二个标签内容通过ajax加载..服务器显示该调用是一个制作好的数据，但是该页面是空白的，我在firefox控制台看到这个错误：未捕获异常：jQuery UI选项卡：不匹配的片段标识符。 – user2166045 2013-03-13 15:49:42

把

<script type="text/javascript"> 
    updateGrid(); 
</script> 

in your first jsp, as jsp compiles at runtime. your second jsp can call that script from first page also.

来源

2013-03-13 16:03:53

它没有帮助。 updateGrid从jsps的任一个被调用..它使Ajax调用并获取json数据..但是当使用jqGrid呈现Im时，我得到以下异常：消息：'this.p.rownumbers'为null或不是对象 URI：http：// localhost：7001/imgRepository/js/jquery.jqGrid.min.js – user2166045 2013-03-13 19:37:56

jquery多个jsp选项卡

回答

相关问题