CODEWITHSUNDEEP
jqgrid
papr
papr

Reputation: 1

jqgrid is not displaying in html page

it is my page code in this page jqgrid is not displaying output.please why this error will cal you send me the code with explain..

    <link rel="stylesheet" href="css/boilerplate.css" />
    <link rel="stylesheet" href="css/global.css" />    
    <link rel="stylesheet" href="css/splash.css" />    

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/redmond/jquery-ui.css">    
    <link rel="stylesheet" href="css/redmond/jquery.ui.theme.css">
    <link rel="stylesheet" href="css/ui.jqgrid.css"> 

    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
    <script src="js/grid.locale-en.js" type="text/javascript"></script>    
    <script src="js/grid-search.js" type="text/javascript"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>

//Jqgrid Script code here

   <script>
var mydata =[
{id:"LST 0456",employe:"praveesha",role:"employee",department:"developer",joinedate:"june12th",gender:"female",description:"fdggf",gender:"female",description:"fdggf",joinedate:"june12th"},
{id:"LST 0457",employe:"naveena",role:"employee",department:"developer",joinedate:"june12th",gender:"female",description:"fdggf",gender:"female",description:"fdggf",joinedate:"june12th"},
{id:"LST 0458",employe:"anil",role:"employee",department:"developer",joinedate:"june12th",gender:"male",description:"fdggf",gender:"female",description:"fdggf",joinedate:"june12th"}]



$(document).ready(function() {
        setupGrid();
       option();
        attachDeleteButton();
    });     

    //Build radio button
function radioelem(value, options) {
    var receivedradio = '<input type="radio" name="receivednaradio" value="Female"';
    var breakline = '/>Female<br>';
    var naradio = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="receivednaradio" value="Male"';
    var endnaradio = '/>Male<br>';
    if (value == 'Male') {
        var radiohtml = receivedradio + 'checked="checked"' + breakline + naradio + endnaradio;
        return radiohtml;
    }
    else if (value == 'Female') {
        var radiohtml = receivedradio + breakline + naradio + ' checked="checked"' + endnaradio;
        return radiohtml;
    }
    else {
        return receivedradio + breakline + naradio + endnaradio;
    }
};

function radiovalue(elem, operation, value) {
    if (operation === 'get') {
        return $(elem).val();
    } else if (operation === 'set') {
        if ($(elem).is(':checked') === false) {
            $(elem).filter('[value=' + value + ']').attr('checked', true);
        }
    }
};





function dataSentOK(){
    jQuery("#navgrid4").jqGrid().trigger("reloadGrid");
}

 function option() {
$(this).find("table.group td.operators>select.selectopts")
    .append("<option value='xx'>xxx</option>");

}

function setupGrid(){
jQuery("#navgrid4").jqGrid({
url:'editing.php?q=1',
data:mydata,
postData: sopt,
datatype:"local",
colNames:['Id','EmployeeName','gender','Role','Department','JoineDate','Description','gender','description','joinedate'],

    colModel:[
    {name:'id',index:'id', width:55, editable:false,editrules:{required:true},searchoptions:{sopt: ['eq', 'ne']}},            
    {name:'employe',index:'employe', width:90,editable:true,formoptions:{rowpos:2,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"},editrules:{required:true}},
    {name:'gender',index:'gender', width:55,editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue},formoptions:{rowpos:4,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"}},
    {name:'role',index:'role', width:100,editable:true,edittype:"select",
        editoptions:{dataUrl:'test.txt', defaultValue:'Intime'},
        formoptions:{rowpos:3,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;" }},
    {name:'department',index:'department', width:80, align:"right",editable:true,edittype:"select",
        editoptions:{dataUrl:'test.txt', defaultValue:'Intime'},
        formoptions:{rowpos:5,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;" }},
    {name:'joinedate',index:'joinedate', width:80,
        editable:true,
        editoptions:{size:12,
            dataInit:function(el){
                $(el).datepicker({dateFormat:'yy-mm-dd '});
            },
            defaultValue: function(){
                var currentTime = new Date();
                var month = parseInt(currentTime.getMonth() + 1);
                month = month <= 9 ? "0"+month : month;
                var day = currentTime.getDate();
                day = day <= 9 ? "0"+day : day;
                var year = currentTime.getFullYear();
                return year+"-"+month + "-"+day;                
            }
        },
        formoptions:{ rowpos:6,elmsuffix:"  yyyy-mm-dd", elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"},
        editrules:{required:true}
    },      
    {name:'description',index:'description', width:55, editable:true,editrules:{required:true},formoptions:{rowpos:7,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"}},
    {name:'gender',index:'gender', width:55,editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue},formoptions:{rowpos:8,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"}},
    {name:'description',index:'description', width:55, editable:true,editrules:{required:true},formoptions:{rowpos:9,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"}},

{name:'joinedate',index:'joinedate', width:80, editable:true, editoptions:{size:12, dataInit:function(el){ $(el).datepicker({dateFormat:'yy-mm-dd '}); }, defaultValue: function(){ var currentTime = new Date(); var month = parseInt(currentTime.getMonth() + 1); month = month <= 9 ? "0"+month : month; var day = currentTime.getDate(); day = day <= 9 ? "0"+day : day; var year = currentTime.getFullYear(); return year+"-"+month + "-"+day;
} }, formoptions:{ rowpos:10,elmsuffix:" yyyy-mm-dd", elmprefix:"    "}, editrules:{required:true} },
], rowNum:10, rowList:[10,20,30], pager: '#pagernav4', sortname: 'employe', mtype: 'GET', viewrecords: true, sortorder: "desc",
caption:"Navigator Example", editurl:"someurl.php", multiselect:true, height:350,
width:600 }); jQuery("#navgrid4").jqGrid('navGrid','#pagernav4',{view:true,add:true,search:true, multipleSearch: true,edit:true}, {jqModal:true,checkOnUpdate:true,savekey: [true,13], navkeys: [true,38,40], checkOnSubmit : true, reloadAfterSubmit:false, closeOnEscape:true,bottominfo:"Fields marked with (*) are required"} ); }

//body part code

<section>       <!--SLODER SECTION STARTS HERE-->
       <div class="content">    <!--CONTENT STARTS HERE-->
         <div class="content-left">      <!--CONTENT-LEFT STARTS HERE-->
            <div id="sub-content-left">
               <ul id="sub-contentul">
                 <li id="empmgmt"><a href="#" id="empmgmt">Employee Management</a></li>
                 <li id="rolemgmt"><a href="#">Role Management</a></li>
                 <li id="deptmgmt"><a href="#">Department Management</a></li>
                 <li id="holidays"><a href="#">Holidays</a></li>
                 <li id="updates"><a href="#">Updates</a></li>
                 <li id="reports"><a href="#">Reports</a></li>
                 <li id="attendence"><a href="#">Attendence</a></li>
               </ul> 
            </div> 
            <div id="sub-content-right">
               <div id="empmgmt-div">
                  <div class="centreDiv">    
                    <!-- jqGrid will be injected into this DIV-->    
                    <div>
                        <table id="navgrid4"></table>
                        <div id="pagernav4"></div>          
                    </div>
                </div>  
               </div>
               <div id="rolemgmt-div">
                  <p>Role Management</p>
               </div>
               <div id="deptmgmt-div">
                  <p>Department Management</p>
               </div>
               <div id="holidays-div">
                  <p>Holidays</p>
               </div>
               <div id="updates-div">
                  <p>Updates</p>
               </div>
               <div id="reports-div">
                  <p>Reports</p>
               </div>
               <div id="attendence-div">
                  <p>Attendence</p>
               </div>
            </div>
         </div>       <!--CONTENT-LEFT ENDS HERE-->
         <div class="content-right">       <!--CONTENT-RIGHT STARTS HERE-->
            <div class="bday-box">
              <p class="bday-name">Birthdays List</p>
            </div>
            <div class="scroll-box">
              <p class="bday-name">Scrolling Updates</p>
            </div>
            <div class="calender-box">
              <p class="bday-name">Calender Box</p>
            </div>
         </div>      <!--CONTENT-RIGHT ENDS HERE-->

       </div>        <!--CONTENT ENDS HERE-->

    </section>      <!--SLIDER SECTION ENDS HERE-->

Upvotes: 0

Views: 437

Answers (1)

Tech Mahesh
Tech Mahesh

Reputation: 392

Try in firefox browser with firebug plugin, So that you get the root cause of the issue.

http://www-scf.usc.edu/~csci571/Special/Tutorials/firebug-571.pdf

Upvotes: 0

Related Questions