Author Topic: Refresh Not working  (Read 7847 times)

sudo

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 12
    • View Profile
Refresh Not working
« on: May 13, 2014, 03:30:25 am »
Here is a skinny sample:  the refresh does not work  - also what version of jquery to use with PRO purchase.  Thanks

Here is the TestRefresh.js Class;
(function (window) {

    // Constructor
    function TestRefresh() {
    }


    TestRefresh.prototype.init = function (dataSet) {

        if (dataSet == 'setone') {
            var title = '';
            var data = [
                [1, 'Exxon Mobil', '339,938.0', '36,130.0'],
                [2, 'Wal-Mart Stores', '315,654.0', '11,231.0'],
                [3, 'Royal Dutch Shell', '306,731.0', '25,311.0'],
                [4, 'BP', '267,600.0', '22,341.0'],
                [5, 'General Motors', '192,604.0', '-10,567.0'],
                [6, 'Chevron', '189,481.0', '14,099.0'],
                [7, 'DaimlerChrysler', '186,106.3', '3,536.3'],
                [8, 'Toyota Motor', '185,805.0', '12,119.6'],
                [9, 'Ford Motor', '177,210.0', '2,024.0'],
                [10, 'ConocoPhillips', '166,683.0', '13,529.0'],
                [11, 'General Electric', '157,153.0', '16,353.0'],
                [12, 'Total', '152,360.7', '15,250.0'],
                [13, 'ING Group', '138,235.3', '8,958.9'],
                [14, 'Citigroup', '131,045.0', '24,589.0'],
                [15, 'AXA', '129,839.2', '5,186.5'],
                [16, 'Allianz', '121,406.0', '5,442.4'],
                [17, 'Volkswagen', '118,376.6', '1,391.7'],
                [18, 'Fortis', '112,351.4', '4,896.3'],
                [19, 'Crédit Agricole', '110,764.6', '7,434.3'],
                [20, 'American Intl. Group', '108,905.0', '10,477.0']
            ];
            title = "Data Set One"

        }

        if (dataSet == 'settwo') {

            var data = [
                [1, 'Go Mobil', '339,938.0', '36,130.0'],
                [2, 'Lowes Stores', '315,654.0', '11,231.0'],
                [3, 'Shell Gas', '306,731.0', '25,311.0'],
                [4, 'BP Me Please', '267,600.0', '22,341.0'],
                [5, 'Specific Motors', '192,604.0', '-10,567.0'],
                [6, 'Peter Pan', '189,481.0', '14,099.0'],
                [7, 'never a Chrysler', '186,106.3', '3,536.3'],
                [8, 'Toyota Fails again', '185,805.0', '12,119.6'],
                [9, 'Ford Motor', '177,210.0', '2,024.0'],
                [10, 'American Intl. Group', '108,905.0', '10,477.0']
            ];
            title = "Data Set Two"

        }


        var obj = { width: 700, height: 300,
            title: title,
            numberCell: {resizable: true, title: "#"},
            editable: false,
            flexWidth: true,
            showBottom: false,
            resizable: true };
        obj.colModel = [
            { title: "Rank", width: 100, dataType: "integer" },
            { title: "Company", width: 200, dataType: "string" },
            { title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right" },
            { title: "Profits ($ millions)", width: 150, dataType: "float", align: "right" }
        ];
        obj.dataModel = { data: data };

        var $grid = $("#grid_array").pqGrid(obj);
        $grid.pqGrid('refresh');

    }

    // Expose the class to the window
    window.TestRefresh = TestRefresh;


})(window);



And here is the HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" media="all" href="../css/pqgrid.min.css">
    <title></title>
    <script src="jquery-1.10.2.js"></script>
    <script src="jquery-ui-1.10.4.js"></script>
    <script src="pqgrid.min.js"></script>
    <script src="TestRefresh.js"></script>

    <script>
        var testRefresh = new TestRefresh();
        function init() {
            testRefresh.init('setone');
        }

        function loadSetOne() {
            testRefresh.init('setone');
        }


        function loadSetTwo() {
            testRefresh.init('settwo');
        }


    </script>


</head>
<body onload="init()">
<div id="grid_array" style="margin:auto;"></div>
<a href="#" onclick="loadSetOne();" >Load Set One</a>
<a href="#" onclick="loadSetTwo();" >Load Set Two</a>
</body>
</html>

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Refresh Not working
« Reply #1 on: May 13, 2014, 03:39:41 pm »
Changing the reference to dataModel.data calls for refreshDataAndView instead of refresh.

Another point: There is no need to pass the whole obj to pqGrid constructor when you change the data only. obj is to be passed only once during initialization.

So when you want to change to new data, please use this:

$grid.pqGrid( "option", "dataModel.data", newdata );
$grid.pqGrid( "refreshDataAndView" );

Dependencies: jQuery >= 1.7, jQueryUI >= 1.9.2
« Last Edit: May 13, 2014, 04:59:18 pm by paramquery »

sudo

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 12
    • View Profile
Re: Refresh Not working
« Reply #2 on: May 13, 2014, 07:12:02 pm »
Thanks you that worked for data....  but how do you refresh the entire dataModel?  Your API documentation only shows how to set the data in the data in the data model. 
Get or set the dataModel option, after initialization:

//getter
var dataModel=$( ".selector" ).pqGrid( "option", "dataModel" );           
 
//setter
$( ".selector" ).pqGrid( "option", "dataModel", { data: dataSales } );   <= Data not the dataModel





I am using remote data model: 
        obj.dataModel = {
            dataType: 'JSON',
            location: "remote",
            method: 'POST',
            sorting: "local",
            sortIndx: "id_studies",
            sortDir: "up",
            url: 'php/TransactionHandler.php?transActionID=listStudies&country=' + country,
            getData: function (dataJSON) {
                return { data: dataJSON.data };
            }
        };

        // How to set entire datamodel with the new data and the new parameters(sorting, sortDir, etc)?
        ?????? => studyGrid.pqGrid( "option", "dataModel.getData", dataJSON.data );
        studyGrid.pqGrid( "refreshDataAndView" );



paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Refresh Not working
« Reply #3 on: May 13, 2014, 08:16:43 pm »
you can set entire new dataModel like this:


Code: [Select]
  $grid.pqGrid( 'option', 'dataModel', newdataModel );
  $grid.pqGrid( 'refreshDataAndView' ); //to see the result of dataModel changes.

sudo

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 12
    • View Profile
Re: Refresh Not working
« Reply #4 on: May 14, 2014, 12:42:36 am »
Thanks for the responses.  quotes were left off the dataModel option: $grid.pqGrid( "option", "dataModel", 'newdataModel');

So now another issue has surfaced:  the getData Post does not occur, not sure what is the catalyst for firing that off...  the console.log('getData fired"); Never shows up the console log when this method gets called..  the console.log('Refresh called'); does show up...  so the method is firing.  So what is the catalyst for the firing off the getData?   Should I just move to a ajax request for the data and use it's features to assure it's fired and the data has been returned?

  StudyGrid.prototype.loadData = function (country, teamName) {

        studyObjTbl.dataModel = {
            dataType: 'JSON',
            location: "remote",
            method: 'POST',
            sorting: "local",
            sortIndx: "id_studies",
            sortDir: "up",
            url: 'php/TransactionHandler.php?transActionID=listStudies&country=' + country,
            getData: function (dataJSON) {
                console.log ('getData fired');
                return { data: dataJSON.data };
            }
        };

        studyGrid.pqGrid( "option", "dataModel", 'newdataModel');
        studyGrid.pqGrid( "refreshDataAndView" );
        console.log('Refresh called');

        studyGrid.pqGrid('option', 'title', teamName + ' Studies');

    }

 

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Refresh Not working
« Reply #5 on: May 14, 2014, 12:47:34 am »
there are no quotes around newdataModel. It's not a string but a plain js object.

var  newdataModel = {
            dataType: 'JSON',
            location: "remote",
            method: 'POST',
            sorting: "local",
            sortIndx: "id_studies",
            sortDir: "up",
            url: 'php/TransactionHandler.php?transActionID=listStudies&country=' + country,
            getData: function (dataJSON) {
                console.log ('getData fired');
                return { data: dataJSON.data };
            }
        };

studyGrid.pqGrid( "option", "dataModel",  newdataModel );
studyGrid.pqGrid( "refreshDataAndView" );
« Last Edit: May 14, 2014, 07:36:53 am by paramquery »

sudo

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 12
    • View Profile
Re: Refresh Not working
« Reply #6 on: May 14, 2014, 01:50:03 am »
So without the quotes - this error get thrown:  Uncaught ReferenceError: newdataModel is not defined -  Here the whole thread:

Uncaught ReferenceError: newdataModel is not defined StudyGrid.js:204
StudyGrid.loadData StudyGrid.js:204
$.selectable.selected index.html:173
$.Widget._trigger jquery-ui-1.10.4.js:785
(anonymous function) jquery-ui-1.10.4.js:11356
jQuery.extend.each jquery-1.10.2.js:657
jQuery.fn.jQuery.each jquery-1.10.2.js:266
$.widget._mouseStop jquery-ui-1.10.4.js:11350
(anonymous function) jquery-ui-1.10.4.js:401
$.widget._mouseUp jquery-ui-1.10.4.js:957
(anonymous function) jquery-ui-1.10.4.js:401
_mouseUpDelegate jquery-ui-1.10.4.js:913
jQuery.event.dispatch jquery-1.10.2.js:5095
elemData.handle jquery-1.10.2.js:4766

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Refresh Not working
« Reply #7 on: May 14, 2014, 07:38:49 am »
sudo

looks like you haven't followed the instructions precisely.

Please check the newdataModel highlighted in bold in previous post, they should match.
« Last Edit: May 14, 2014, 08:11:37 am by paramquery »