3

I want to display data in a JQGrid on visualforce page. I am not getting any error but i can't also see any data. By looking into the debug logs i came to know that my java script is not at all calling the controller method. Below is my visualforce page code & Controller code

Visualforce page:

   <apex:page controller="GridController" showHeader="true" standardStylesheets="false" id="page1" >

<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="http://www.trirand.net/aspnetmvc/Content/themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/JavaScript"></script>
<script src="http://www.trirand.net/aspnetmvc/Scripts/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://www.trirand.net/aspnetmvc/Scripts/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
     var gridData;
     var obj;  

    function search(jsonString) {        
        $("#pdata").jqGrid("GridUnload");

        gridData = JSON.stringify(jsonString);    
        obj = JSON.parse(gridData);      

        jQuery("#pdata").jqGrid({
        data&colon; jsonString,
        datatype: 'local',
        colNames:['Id','Name'],
        colModel:[
            {name:'Id',index:'Id', width:40},
            {name:'Name',index:'Name', width:40}],
        rowNum:10,
        rowList:[5,10,20,30,50,100, 1000],
        pager: '#ppdata',
        sortname: 'name',
        viewrecords: true,
        sortorder: "desc",
        caption:"Contact Data",
        width: 800,
        height: 180,   
    });   
   $("#pdata").trigger("reloadGrid");
 }

function showDataInJqGrid(){
    var accName = document.getElementById("query").value;    
    contactSearch(accName);
}

function contactSearch(name) {
    var jsonString;
    Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.GridController.showContacts}',
            name,
            function (result, event) {
                if(event.type == 'exception'){
                    alert(event.message);
                } else{        
                    jsonString = result;        
                    search(jsonString);
                    gridData = JSON.stringify(jsonString);
                }
            },
            {escape: true}
        );

      // I first tried this below option also to call controller method but same results i got
     /*GridController.showContacts(name, function (result, event) {
                if(event.type == 'exception'){
                    alert(event.message);
                } else{        
                    jsonString = result;        
                    search(jsonString);
                    gridData = JSON.stringify(jsonString);
                }
          }); */
}

</script>

<apex:sectionHeader title="Contact Search using AccountID" subtitle="Search Contact" />
  <apex:pageBlock mode="maindetail">
    <apex:form id="qform" >
            <apex:pageBlockSection title="Search Contact for the Account" collapsible="false" columns="1" >
                <table width="100%">
                    <tr>
                        <td><h3>Enter Account Name </h3>&nbsp;&nbsp;<input type="text" id="query" />&nbsp;&nbsp;&nbsp;
                            <input type="button" value="Show Contacts " class="btn" onclick="showDataInJqGrid();" />&nbsp;&nbsp;&nbsp;
                        </td>
                    </tr>
                </table>
            </apex:pageBlocksection>
    </apex:form>

    <apex:pageBlockSection title="Contacts in Response" collapsible="false" rendered="true">               
        <div id="response" style="font-size: 16px;width: 300px;font-family: monospace; font-stretch: expanded" />               
        <table id="pdata"></table>
        <div id="ppdata"></div>
    </apex:pageBlocksection>
  </apex:pageblock>
</apex:page>

Controller:

global class GridController {

public GridController() {

}

@RemoteAction
global static List<Contact> showContacts(String accName){
    system.debug('inside method: '+accName);
    accName = '%'+ accName+'%';
    List<Contact> lst_contacts = new List<Contact>([select id, name from contact where Account.Name LIKE : accName]);
    return lst_contacts;
}
}

Any help or quick suggestions??

2
  • 1
    Nothing jumps out. Start to sprinkle a healthy number of console.log() calls to find out what is going on. Are you certain the remoting call is not being made? Have you done a dump of the result object...there is much information contained in there to find out what salesforce is returning to you.
    – pchittum
    Commented Sep 17, 2014 at 8:01
  • @Peter, Please see my comments in answer. I am able to make a remote call but having some issues in handling callback it seems. Commented Sep 17, 2014 at 10:12

2 Answers 2

2

In Chrome I get a complaint about linking to scripts via http rather than via https using your Visualforce.

So changing to these:

<link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/JavaScript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js" type="text/javascript"></script>

and also replacing the spurious &colon; with : results in a working page.

Both these problems were visible in Chrome's Developer Tools Console; that (or the equivalent in other browsers) is the first place to look when using JavaScript.

5
  • thanks for quick response. Well i tried what you suggested but didn't work out for me. Then after some other reference i changed this line in my code: data&colon; jsonString, to data: jsonString, after that it is calling my controller method but in callback method its showing error in handling result. Uncaught TypeError: undefined is not a function search (anonymous function) and by tracking logs its showing error in this line $("#pdata").jqGrid("GridUnload"); Commented Sep 17, 2014 at 9:58
  • @mast0r,@Keith C, please see my comments. Commented Sep 17, 2014 at 10:07
  • @vikram.fartyal I've just repeated the two changes I listed (which included the &colon; change) starting from the Apex and Visualforce you have posted here and it works a second time for me on Chrome. I suggest you follow exactly the same steps.
    – Keith C
    Commented Sep 17, 2014 at 10:23
  • sorry i didn't notice in your previous reply that you have not only replaced http with https but changed few urls it self. this time i just copied and pasted in my code and am able to see the grid. Thanks for your patience. However, i am not abe to see any data in grid its showing in remote request though. Any idea about this? Commented Sep 17, 2014 at 10:47
  • @vikram.fartyal Cut and paste beats reading and re-typing...
    – Keith C
    Commented Sep 17, 2014 at 10:49
0

Add JQGrid to Visualforce Page

I think this article will help you a lot. It will give you complete guide how to add jqgrid to visualforce page.

1
  • It's better to describe what your link explains and not just display it. If this URL is not available in future, your answer won't help anymore !
    – SF_user
    Commented Oct 27, 2016 at 9:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .