jquery多个jsp选项卡

时间:2013-03-13 15:34:05

标签: jsp jquery

我是jQuery的新手,我已经研究了足够的网络,但似乎无法找到解决这个问题的方法。 我有两个选项卡,每个选项卡都来自不同的JSP。主JSP(默认一个)包含所有脚本文件。但是当我从JSP2调用jQuery函数时,它们不会被触发。我的理解是,JSP2没有这些函数的可见性。 当我将所需的jQuery函数粘贴到jsp2上时,一切都按预期工作。但我不明白为什么我需要在两个地方拥有脚本文件。 每个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'为null或不是对象URI:localhost:7001 / imgRepository / js / jquery.jqGrid.min.js

当我将方法本地复制到JSP2时,一切正常。

1 个答案:

答案 0 :(得分:0)

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