Forum

November 2nd, 2014
A A A
Avatar
sp_LogInOut Log In

Lost password?
sp_Search Search
Advanced Search
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Search Search
Go to Bottom
The forums are currently locked and only available for read only access
This topic is locked No permission to create posts
sp_Feed Topic RSS sp_TopicIcon
How to install json jqGrid 4.6.0
16/05/2014
23:29
Avatar
tifischer
Member
Members
Forum Posts: 21
Member Since:
16/05/2014
sp_UserOfflineSmall Offline
Go to Top
1sp_EditHistory sp_Permalink sp_Print

I was running 3.5.3 with jQuery 1.7.1v and wanted to upgrade to 4.6.0. PHP 5.3, MySQL 5.1, Apache 2.2

My data loads from the server echo json_encode($response); produces the following output (with testing data):

{"page":null,"total":0,"records":"14518","rows":[{"id":"1","cell":["1","Matthew","TempName2","","tifischer@gmail.com",null,"1"]},{"id":"3","cell":["3","Jennifer","TempName1","","jfischer@gmail.com",null,"0"]},{"id":"1028","cell":["1028","Watts","TempName3","","bluebonnets@gmail.com",null,"0"]},{"id":"1029","cell":["1029","McKenna","TempName4","","star@gmail.com",null,"1"]},{"id":"1031","cell":["1031","Hoyt","TempName5,"","angels@gmail.com",null,"1"]}]}

However, no grid is displayed.  My jQuery code is as fallows:

    <link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.10.4.custom/css/redmond/jquery-ui-1.10.4.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="jqgrid.jqGrid-4.6.0/css/ui.jqgrid.css" />
    <script src="jquery.jqGrid-4.6.0/js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="jquery.jqGrid-4.6.0/js/jquery-ui-custom.min.js" type="text/javascript"></script>
    <script src="jquery.jqGrid-4.6.0/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script src="jquery.jqGrid-4.6.0/plugins/ui.multiselect.js" type="text/javascript"></script>
    <script src="jquery.jqGrid-4.6.0/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="jquery.jqGrid-4.6.0/plugins/jquery.tablednd.js" type="text/javascript"></script>
    <script src="jquery.jqGrid-4.6.0/plugins/jquery.contextmenu.js" type="text/javascript"></script>
 <!–   <script src="jqgrid.jqGrid-4.6.0/src/grid.loader.js" type="text/javascript"></script> –>
     <script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
    </script>

    <script type="text/javascript">
jQuery(document).ready(function(){
   
    jQuery("#person_list").jqGrid({       
           url:'server-update.php?q=1',
        datatype: "json",
           colNames:['ID','Type','Last','First','Email','Phone','Address','Custom','Registrations','Balance Due'],
           colModel:[
            //{name:'', sortable:true, index:'a.personType', width:25, hidden:false,search:false,hidedlg:true},
            //search ID on
            //{name:'', index:'a.personID', width:20, hidden:false,searchoptions:{sopt:['bw','cn','eq','ne','lt','gt','ew']}},
            //search ID off
            {name:'personID', index:'a.personID', width:20},
            {name:'isStudent', index:'isStudent', sortable:true, width:25},   
               {name:'lastName', index:'a.lastName', width:40},
               {name:'firstName', index:'a.firstName', width:30},
               {name:'email', sortable:true, index:'a.emailAddress', width:60},
               {name:'phone', sortable:false,index:'phone', width:35},
               {name:'address', sortable:false,index:'address', width:100},
           ],
           rowNum:7,
        autowidth: true,
           pager: '#pagerb',
           sortname: 'lastName',
           rowList:[10,20,50,100],
        viewrecords: true,
        sortorder: "asc",
        caption: "JSON Example",

    });
   
    jQuery("#person_list").jqGrid('navGrid','#pagerb',{edit:false,add:false,del:false});

</script>

…

                                                                 <table id="person_list" class="scroll" style="width:100% important!; font-family: Arial !important; font-size: 12px !important; color: #3a3a3a !important"></table>
                                                                     <div id="pagerb" class="scroll" style="text-align:center;"></div>

…

Can someone tell me why this does not display the data in the grid format?

Blessings!

19/05/2014
12:34
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline
sp_UserWebsite
Go to Top
2sp_Permalink sp_Print

Hello,

You have 2 errors in the example you provide:

1. The elements in colNames are diffrent from thise in colModel

2. In the response there is a error - a "is missed.

You have

...

{"id":"1031","cell":["1031","Hoyt","TempName5,"","angels@gmail.com",null,"1"]}

...

but it should be

...

{"id":"1031","cell":["1031","Hoyt","TempName5","","angels@gmail.com",null,"1"]}

...

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

19/05/2014
17:33
Avatar
tifischer
Member
Members
Forum Posts: 21
Member Since:
16/05/2014
sp_UserOfflineSmall Offline
Go to Top
3sp_Permalink sp_Print

Ok I updated the code to

           colNames:['personID','Type','lastName','firstName','email','middleName','address'],
           colModel:[
            //{name:'', sortable:true, index:'a.personType', width:25, hidden:false,search:false,hidedlg:true},
            //search ID on
            //{name:'', index:'a.personID', width:20, hidden:false,searchoptions:{sopt:['bw','cn','eq','ne','lt','gt','ew']}},
            //search ID off
            {name:'personID', index:'a.personID', width:20},
            {name:'Type', index:'isStudent', sortable:true, width:25},   
               {name:'lastName', index:'a.lastName', width:40},
               {name:'firstName', index:'a.firstName', width:30},
               {name:'email', sortable:true, index:'a.emailAddress', width:60},
               {name:'middleName', sortable:false,index:'middleName', width:35},
               {name:'address', sortable:false,index:'address', width:100},
           ],

But it still does not work.

20/05/2014
14:39
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline
sp_UserWebsite
Go to Top
4sp_Permalink sp_Print

Hello,

You should fix the second problem with the response. Do you have fix it.

I have a working demo with your json response, but fixed.

Kind Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

20/05/2014
14:43
Avatar
tifischer
Member
Members
Forum Posts: 21
Member Since:
16/05/2014
sp_UserOfflineSmall Offline
Go to Top
5sp_EditHistory sp_Permalink sp_Print

Yes, I did fix the second problem…it wasn't so much a problem because it was a typo that occurred after I changed the text so as to not give out person information.

{"page":null,"total":0,"records":"14518","rows":[{"id":"1","cell":["1","Matthew","Testing","","test@demo",null,"1"]},{"id":"3","cell":["3","Jennifer","Testing","","test@demo",null,"0"]},{"id":"1028","cell":["1028","Watts","Testing","","test@demo",null,"0"]},{"id":"1029","cell":["1029","McKenna","Testing","","test@demo",null,"1"]},{"id":"1031","cell":["1031","Hoyt","Testing","","test@demo",null,"1"]}]}

Would you kindly share the working demo : )

Blessings,

Tiffany

20/05/2014
14:51
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline
sp_UserWebsite
Go to Top
6sp_Permalink sp_Print

Hello,

Here you are - Look at this example

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

20/05/2014
16:32
Avatar
tifischer
Member
Members
Forum Posts: 21
Member Since:
16/05/2014
sp_UserOfflineSmall Offline
Go to Top
7sp_Permalink sp_Print

Thank you Tony.  That did it.  It must have been something about the install I downloaded.

Blessings,

TiffanyLaughLaughLaugh

27/05/2014
18:15
Avatar
tifischer
Member
Members
Forum Posts: 21
Member Since:
16/05/2014
sp_UserOfflineSmall Offline
Go to Top
8sp_EditHistory sp_Permalink sp_Print

I had to download 4.6.0 plus the example theme files that Tony provided above and then make sure the file names in the example are changed to match the files in the demo.  It works great. 

This topic is locked No permission to create posts
sp_Feed All RSS
Go to top
Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
37 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information