CODEWITHSUNDEEP
jqueryjqgrid
srini
srini

Reputation: 89

jqGrid not rendered when the html page containing the grid is loaded through an ajax call

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.

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);   

            },
            });

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.

The grid page is as follows.

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

Kindly help.

Upvotes: 0

Views: 3291

Answers (1)

Oleg
Oleg

Reputation: 222017

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.

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

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

  • 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!

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

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

Upvotes: 1

Related Questions