0

我的 jqgrid 根本没有显示。我是新来的，所以任何解释都值得赞赏我的页面在下面，据我所知，我有所有必要的文件等，但在 Chrome 中没有一个是 404ed。我应该补充一点，我正在使用带有 Spring 的 Eclipse。我在 Chrome 中看到的错误遵循底部的页面信息。它们似乎只是几个语法错误，但我有一种欺骗性的感觉。

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" media="screen" href="resources/jqgrid/css/smoothness/ui-lightness/jquery-ui-1.10.0.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="resources/jqgrid/css/ui.jqgrid.css" />

<script type="text/javascript" src="resources/jqgrid/js/jquery/jquery-1.4.2.min.js"></script>
<!--  
<script type="text/javascript">
    var $jq = jQuery.noConflict();
</script>
-->
<script type="text/javascript" src="resources/js/jquery/jquery-ui-1.8.6.custom.min.js"></script> 
<script type="text/javascript" src="resources/jqgrid/js/grid.locale-en.js" ></script>
<script type="text/javascript" src="resources/jqgrid/js/jquery.jqGrid.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

 <script type="text/javascript">
$(function() {
    $("#grid").jqGrid({
        url:'/listgrid',
        datatype: 'json',
        mtype: 'GET',
        colNames:['Title', 'Description', 'Release Year'],
        colModel:[
            {name:'title',index:'title', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:true},
            {name:'description',index:'description', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'release_year',index:'release_year', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}
        ],
        postData: { 
        },
        rowNum:20,
        rowList:[20,40,60],
        height: 200,
        autowidth: true,
        rownumbers: true,
        pager: '#pager',
        sortname: 'title',
        viewrecords: true,
        sortorder: "asc",
        caption:"Movies",
        emptyrecords: "Empty records",
        loadonce: false,
        loadComplete: function() {
        },
        jsonReader : {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            cell: "cell",
            id: "id"
        }
    });


});
  </script>


<title>Home</title>
   </head>
   <body>


<h1>
Hello  world!  
</h1>

<P>  The time on the server is ${serverTime}. </P>

<p>JqGrid - Spring 3 MVC Integration Tutorial</p>
<div id="jqgrid">
<table id="grid"></table>
<div id="pager"></div>
</div>
</body>
</html>

我看到的错误是：

Resource interpreted as Script but transferred with MIME type text/html:
"http://localhost:8080/movies/resources/jqgrid/js/jquery.jqGrid.min.js". localhost:8
Resource interpreted as Stylesheet but transferred with MIME type text/html:
"http://localhost:8080/movies/resources/jqgrid/css/ui.jqgrid.css". localhost:6
Resource interpreted as Stylesheet but transferred with MIME type text/html:
"http://localhost:8080/movies/resources/jqgrid/css/smoothness/ui-lightness/jquery-ui-1.10.0.custom.css". localhost:5
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8080/movies/resources/jqgrid/js/jquery/jquery-1.4.2.min.js". localhost:8
 Uncaught SyntaxError: Unexpected token < :8080/movies/resources/jqgrid/js/jquery/jquery-1.4.2.min.js:3
  Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8080/movies/resources/js/jquery/jquery-ui-1.8.6.custom.min.js". localhost:8 Uncaught SyntaxError: Unexpected token < :8080/movies/resources/js/jquery/jquery-ui-1.8.6.custom.min.js:3
  Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8080/movies/resources/jqgrid/js/grid.locale-en.js". localhost:8
   Uncaught SyntaxError: Unexpected token < :8080/movies/resources/jqgrid/js/grid.locale-en.js:3
  Uncaught SyntaxError: Unexpected token < jquery.jqGrid.min.js:3
  Uncaught ReferenceError: $ is not defined localhost:21
4

2 回答 2

1

我自己不使用 Eclipse 或 Spring。所以我帮不了你太多。不过，您可以在您发布的代码中看到一些问题。例如，您使用类似的结构

<link ... />

和

<!-- ... -->

为什么您认为您的代码应该被解释为 XHTML？在quirks mode强制代码被解释为 XHTML 而不是 HTML之前，您必须包含额外的!DOCTYPE 。例如，您可以包括 <html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
          "http://www.w3.org/TR/html4/strict.dtd">

之后，我建议您始终将 JavaScript 代码放在//<![CDATA[ 和之间//]]>：

<script type="text/javascript">
//<![CDATA[
$(function() {
....
//]]>
</script>

在这种情况下，您将确信您可以在您的 XHTML 页面中包含任何JavaScript 代码。

此外，在不同版本的 jQuery UI 之间使用混合是非常糟糕的。您jquery-ui-1.10.0.custom.css与jquery-ui-1.8.6.custom.min.js. 此外，您使用的是非常旧版本的 jQuery ( jquery-1.4.2.min.js)。您应该准确阅读将支持哪个版本的 jQuery UI。例如 jQuery UI 1.10.0 和 jQuery UI 1.9.2 支持 jQuery 1.6 及更高版本。如果你真的需要使用旧的 1.4.2 版本的 jQuery，你必须使用 jQuery UI 1.8.x。在这种情况下，我建议您使用jQuery UI 1.8.24。

我自己不使用 Eclipse 或 Spring。因此，对于设置错误的 MIME 类型 text/html 的问题，我无法为您提供更多帮助。您应该更仔细地比较您正确工作的代码与当前存在问题的代码。或者，您应该在 stackoverflow 上提出新问题，但使用另一个标签。

于 2013-01-30T08:16:59.643 回答
0

你有一个语法错误，通常这会阻止其他脚本按预期运行，修复错误&你可能会有更多的运气。

于 2013-01-29T22:39:01.510 回答