Question

我有一个html页面（editor.php），其中包含许多以jquery选项卡形式的html页面。每个选项卡都通过ajax加载。

其中一个标签（oven.php）内置了一个jqgrid。当我通过ajax调用加载oven.php时如下

$.ajax({
            type: "GET",
            url: "oven.php",
            data: "method=" +method+"&mode="+mode,
            cache: false,
            async: true, 
            success: function(data){    
               htdata = data;      
               $("#oven").html(data);   

            },
            });

当我执行上述操作时，editor.php页面不会显示来自oven.php的网格。但是，如果单独看到oven.php页面，我可以查看jqgrid。

网格页面如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Oven</title>
<link type="text/css" href="../../css/cupertino/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />    
<link rel="stylesheet" type="text/css" media="screen" href="./jquery/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./jquery/css/ui.jqgrid.css" />
<script type="text/javascript" src="../../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="./jquery/src/i18n/grid.locale-en.js" type="text/javascript"></script> 
<script src="./jquery/js/jquery.jqGrid.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="./jquery/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript"> 
    $.jgrid.no_legacy_api = true; 
    $.jgrid.useJSON = true; 
    var lastSelection; 
    </script> 
 <script type="text/javascript" src="./jquery/src/grid.base.js"></script>
    <script type="text/javascript" src="./jquery/src/grid.common.js"></script>
    <script type="text/javascript" src="./jquery/src/grid.formedit.js"></script>
    <script type="text/javascript" src="./jquery/src/grid.inlinedit.js"></script>
    <script type="text/javascript" src="./jquery/src/grid.custom.js"></script>
    <script type="text/javascript" src="./jquery/src/jquery.fmatter.js"></script>
    <script type="text/javascript" src="./jquery/src/jquery.searchFilter.js"></script>
    <script type="text/javascript" src="./jquery/src/grid.jqueryui.js"></script>
    <script type="text/javascript" src="./jquery/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="./jquery/js/jquery.jqGrid.min.js"></script>   
<script type="text/javascript">

function() {



     var lastsel2 =
jQuery("#tempset").jqGrid({
    datatype: "local",
    height: 260,
    width:300,
       colNames:[ ' ','Rate *C/Min','Value *C', 'Hold Time min', 'Run Time min'],
       colModel:[
           {name:'id',index:'id', width:60, sorttype:"int", editable: true},
           {name:'rate',index:'rate', width:40,editable: true,editoptions:{size:"20",maxlength:"30"}},
           {name:'value',index:'value', width:40, editable: true,editoptions: {size:"20",maxlength:"30"}},
           {name:'holdtime',index:'holdtime', width:50, editable: true,editoptions:{size:"20",maxlength:"30"}},        
           {name:'runtime',index:'runtime', width:100,editable: false}        
       ],
    onSelectRow: function(id){
        if(id && id!==lastsel2){
            jQuery('#tempset').jqGrid('restoreRow',lastsel2);
            jQuery('#tempset').jqGrid('editRow',id,true);
            lastsel2=id;
        }
    },
    //editurl: "server.php",
    caption: "Temperature Settings",
    pager: "#tempset_pager",
});
var mydata2 = [
        {id:"initial",rate:"",value:"50",holdtime:"60",runtime:"60"},
        {id:"Ramp 1",rate:"15",value:"67 ",holdtime:"5",runtime:"66.133"},
        {id:"Ramp 2",rate:"20",value:"89",holdtime:"10",runtime:"77.233"},
        {id:"Ramp 3",rate:"25",value:"123",holdtime:"3",runtime:"81.593"}
        ];

for(var i=0;i < mydata2.length;i++)
{
//alert(mydata2[i].id);
 jQuery("#tempset").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
 }

 jQuery("#tempset").navGrid("#tempset_pager", {});

 }



</script>
</head>

<body>
<
<div style = "margin-left:240px; top: 15px; position:absolute;">
 <table id="tempset"></table>
        <div id="tempset_pager"> </div>
 </div>



<script>


grid();


</script>

</body>
</html>

请帮助。

Answer 1

您误解了$.ajax内$("#oven").html(data) success方法的工作原理。按照<{1}}的新值设置无法加载新的HTML网页的方式。如果按windows.location加载页面，则至少会因the security reason而无法运行脚本。此外，您不能只在HTML页面的另一部分内部设置整个 HTML页面$.ajax，<html> <head>等内容。因此，对于<body>方法，您只能加载HTML片段而不是整个HTML页面。

所以你应该重新设计你的程序，而不是以这种方式使用$.ajax。

另一个评论。如果您在加载$.ajax 时看到了某些内容，则该页面会出现很多错误。这里只是最重要的：

您的网页必须以oven.php语句开头。如果没有该语句，则quirks mode中的HTML页面不受jQuery UI或jqGrid的支持。您必须包含<!DOCUMENT html ...>行（请参阅here）或HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
您不能一次性包含相同功能或对象的相同实现。您的代码首先包括<!DOCTYPE html>，然后是jquery-1.6.2.min.js。这是一个很大的错误。你包括jqGrid代码 3次（!!! ???）。请参阅jquery-1.4.2.min.js，然后jquery.jqGrid.min.js至grid.base.js，然后再一次grid.jqueryui.js。你不能这样做！

定义jqGrid的其余代码包含一些错误，而某些不是最佳代码（非常旧的代码样式）。

您应该将行jquery.jqGrid.min.js替换为var lastsel2 =，这应该只定义var lastsel2; lastsel2值。
在网格定义之后undefined 的使用情况不佳。这是非常古老的风格。更好的方法是在创建jqGrid之前移动addRowData的定义，并在网格中使用其他参数mydata2和data: mydata2。

当通过ajax调用加载包含网格的html页面时，不呈现jqGrid

1 个答案: