通过ajax调用加载包含网格的html页面时，jqGrid不呈现 [英] jqGrid not rendered when the html page containing the grid is loaded through an ajax call

查看：86 发布时间：2019/11/5 14:29:49 jquery jqgrid

本文介绍了通过ajax调用加载包含网格的html页面时，jqGrid不呈现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have a html page ( editor.php ) which contains a lot of html pages in the form of jquery tabs. Each tab is loaded through ajax.

其中一个选项卡(烤箱.php)内置有一个jqgrid.当我通过如下所示的ajax调用加载烤箱.

One of the tab ( oven.php ) has a jqgrid built inside. When i load oven.php through ajax call like below

$.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页面未显示烤箱.php中的网格.但是，如果单独查看烤箱.php页面，则可以查看jqgrid.

When i do the above the editor.php page doesn't show the grid from oven.php. However if see oven.php page separately, i am able to view the 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>

请帮助.

推荐答案

您误解了success中带有$("#oven").html(data)的$.ajax方法是如何工作的.按照您为windows.location设置新值的方式不能仅加载新的HTML页面.如果您按$.ajax加载页面，则至少由于安全原因，将不会运行任何脚本. .此外，您不能仅在HTML页面的另一部分内部设置整个 HTML页面，包括<html>，<head> <body>等.因此，对于$.ajax方法，您只能加载HTML片段，而不能加载整个HTML页面.

You misunderstand how the $.ajax method with $("#oven").html(data) inside of success work. In the way you can't load just new HTML page as per setting new value for windows.location. If you load the page per $.ajax no scripts will be run at least because of the security reason. Moreover you can't just set the whole HTML page inclusive <html>, <head> <body> and so on inside on another part of HTML page. So with respect of $.ajax method you can only load a HTML fragment and not the whole HTML page.

因此，您应该重新设计程序，而不要以这种方式使用$.ajax.

So you should redesign your program and not use $.ajax in such way.

另一句话.如果您在加载oven.php 页面时甚至看到了东西，则该页面有很多错误.这里只是最重要的:

Another remark. If you even seen something if you load oven.php the page have many errors. Here are only the most important:

您的页面必须以<!DOCUMENT html ...>语句开头.如果没有该语句，则您的HTML页面处于 quirks模式中，jQuery UI或jqGrid不支持该页面.您必须包括<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">这样的行(请参见此处)或HTML5 <!DOCTYPE html>
一次不能包含相同功能或对象的相同实现.您的代码首先包含jquery-1.6.2.min.js，然后包含jquery-1.4.2.min.js.这是一个严重的错误.您包含jqGrid代码 3次(!!! ???).请参见jquery.jqGrid.min.js，然后是grid.base.js，直到grid.jqueryui.js，然后再是一次jquery.jqGrid.min.js.你做不到！

Your page have to start with <!DOCUMENT html ...> statement. Without the statement you have HTML page in quirks mode which is not supported by jQuery UI or jqGrid. You have to include the line like <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> (see here) or HTML5 <!DOCTYPE html>
You can't include the same implementation of the same functions or objects more as one time. You code first include jquery-1.6.2.min.js, then jquery-1.4.2.min.js. It's heavy error. You include jqGrid code 3 times (!!!???). See jquery.jqGrid.min.js, then grid.base.js till grid.jqueryui.js and then one more time jquery.jqGrid.min.js. You can't do this!

定义jqGrid的其余代码包含一些错误和一些非最佳代码(非常古老的代码样式).

The rest code which define jqGrid contain some errors and some not optimal code (very old style of code).

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

you should replace the line var lastsel2 = to var lastsel2;, which should just define lastsel2 with undefined value.
the usage of addRowData after the grid definition is not good. It's very old style. Much better will be to move the definition of mydata2 before the jqGrid creation and use additional parameters data: mydata2 and gridview: true in the grid.

这篇关于通过ajax调用加载包含网格的html页面时，jqGrid不呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

通过ajax调用加载包含网格的html页面时，jqGrid不呈现 [英] jqGrid not rendered when the html page containing the grid is loaded through an ajax call

问题描述

推荐答案

相关文章

JavaScript最新文章

热门教程

热门工具

登录关闭

通过ajax调用加载包含网格的html页面时，jqGrid不呈现 [英] jqGrid not rendered when the html page containing the grid is loaded through an ajax call

问题描述

推荐答案

相关文章

JavaScript最新文章

热门教程

热门工具

登录 关闭

登录关闭