jQuery UI Widgets Forums Plugins AngularJS jqxGrid hitting server twice on route change and refresh

This topic contains 6 replies, has 2 voices, and was last updated by  alphaww 6 years, 1 month ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • alphaww
    Participant

    Hi,

    Whenever a route changes ( user leaves route, grid on that route reloads ). On refresh grid is reloaded twice.
    How can I solve this? What am I doing wrong?

    controller:

    (function (app) {
    ‘use strict’;

    app.controller(‘customersController’, customersController);

    function customersController($scope, $uibModal, customerTypes) {

    $scope.customerTypes = customerTypes;

    $scope.openUpdateDialog = openUpdateDialog;
    $scope.openDeleteDialog = openDeleteDialog;

    $scope.gridSettings =
    {
    width: ‘100%’,
    source: {
    autoBind: false,
    datatype: “json”,
    beforeSend: function (jqXHR) {
    jqXHR.setRequestHeader(“Authorization”, ‘Basic YWRtaW46YWRtaW4=’);
    },
    beforeprocessing: function (data) {
    this.totalrecords = data.totalRows;
    },
    datafields:
    [
    { name: ‘id’ },
    { name: ‘companyName’ },
    { name: ‘oib’ },
    { name: ‘address’ },
    { name: ‘contactName’ },
    { name: ‘tel’ },
    { name: ‘user.email’ },
    { name: ‘customerType’ },
    { name: ‘rebate’ },
    { name: ‘user.username’ },
    { name: ‘user.password’ },
    { name: ‘margin’ }
    ],
    id: ‘id’,
    url: ‘/api/customer/search2/’
    },
    filterable: true,
    showfilterrow: false,
    columnsresize: true,
    sortable: false,
    columnsreorder: true,
    pageable: true,
    virtualmode: true,
    rendergridrows: function (obj) {
    return obj.data;
    },
    columns:
    [
    { text: ‘Naziv tvrtke’, datafield: ‘companyName’ },
    { text: ‘Oib’, datafield: ‘oib’ },
    { text: ‘Adresa’, datafield: ‘address’ },
    { text: ‘Odg. osoba’, datafield: ‘contactName’ },
    { text: ‘Telefon’, datafield: ‘tel’ },
    { text: ‘Telefon’, datafield: ‘user.email’ },
    { text: ‘Email’, datafield: ‘customerType’ },
    { text: ‘Rabat’, datafield: ‘rebate’ },
    { text: ‘Kor. ime’, datafield: ‘user.username’ },
    { text: ‘Lozinka’, datafield: ‘user.password’ },
    { text: ‘Marža’, datafield: ‘margin’ }
    ]
    }
    }

    })(angular.module(‘app’));

    app.js:

    (function () {
    ‘use strict’;

    angular.module(‘app’, [‘module.core’, ‘module.ui’]).config(config).run(run);

    config.$inject = [‘$routeProvider’, ‘showErrorsConfigProvider’, ‘$httpProvider’];
    function config($routeProvider, showErrorsConfigProvider, $httpProvider) {

    configureHttp($httpProvider)
    configureShowErrors(showErrorsConfigProvider);
    configureRoutes($routeProvider);

    }

    function configureShowErrors(showErrorsConfigProvider) {
    showErrorsConfigProvider.showSuccess(true);
    }

    function configureRoutes($routeProvider) {
    $routeProvider
    .when(“/”, {
    templateUrl: “scripts/app/customer/customers.html”,
    controller: “customersController”,
    resolve: {
    customerTypes: function (customerTypeService) { return customerTypeService.get(); }
    }
    })
    .when(“/login”, {
    templateUrl: “scripts/app/account/login.html”,
    controller: “loginController”
    })
    .when(“/register”, {
    templateUrl: “scripts/app/account/register.html”,
    controller: “registerController”
    })
    .when(“/customers”, {
    templateUrl: “scripts/app/customer/customers.html”,
    controller: “customersController”,
    resolve: {
    customerTypes: function (customerTypeService) { return customerTypeService.get(); }
    }
    })
    .when(“/customers/register”, {
    templateUrl: “scripts/app/customer/register.html”,
    controller: “customerRegisterController”,
    resolve: {
    customerTypes: function (customerTypeService) { return customerTypeService.get(); }
    }
    })
    .when(“/products”, {
    templateUrl: “scripts/app/product/products.html”,
    controller: “productsController”,
    resolve: {
    variantTypes: function (variantTypeService) { return variantTypeService.get(); },
    variantValues: function (variantValueService) { return variantValueService.get(); },
    packTypes: function (packTypeService) { return packTypeService.get(); }

    }
    })
    .when(“/product/add”, {
    templateUrl: “scripts/app/product/add.html”,
    controller: “productAddController”,
    resolve: {
    packTypes: function (packTypeService) { return packTypeService.get(); }
    }
    })
    .when(“/variants”, {
    templateUrl: “scripts/app/variant/variants.html”,
    controller: “variantsController”,
    })
    .when(“/variant/add”, {
    templateUrl: “scripts/app/variant/add.html”,
    controller: “variantAddController”,
    resolve: {
    variantTypes: function (variantTypeService) { return variantTypeService.get(); }
    }
    })
    .when(“/orders”, {
    templateUrl: “scripts/app/order/orders.html”,
    controller: “ordersController”,
    })
    .otherwise({ redirectTo: “/” });
    }

    function configureHttp($httpProvider) {
    }

    run.$inject = [‘$rootScope’, ‘$location’, ‘$cookieStore’, ‘$http’];

    function run($rootScope, $location, $cookieStore, $http) {
    // handle page refreshes
    authenticate($rootScope, $location, $cookieStore, $http);
    $rootScope.$on(‘$routeChangeStart’, function (event) {
    authenticate($rootScope, $location, $cookieStore, $http);
    });
    }

    function authenticate($rootScope, $location, $cookieStore, $http) {
    $rootScope.repository = $cookieStore.get(‘repository’) || {};
    if ($rootScope.repository.loggedUser) {
    $http.defaults.headers.common[‘Authorization’] = $rootScope.repository.loggedUser.authdata;
    } else {
    event.preventDefault();
    $location.path(‘/login’);
    }
    }

    })();


    alphaww
    Participant

    Forgot to show view file. So here it is.

    customers.html

    <div class=”row”>
    <div class=”row container-fluid margin_top5″>
    Registriraj kupca
    <button type=”button” ng-click=”openDeleteDialog()” class=”btn btn-sm btn-danger”>Briši odabrane <i class=”glyphicon glyphicon-remove”></i></button>
    </div>
    <div class=”panel panel-primary margin_top5″>
    <div class=”table-responsive col-lg-12 col-md-12 col-sm-12 col-xs-12 margin_top20″>
    <jqx-grid jqx-settings=”gridSettings”></jqx-grid>
    </div>
    </div>
    </div>

    Also worth mentioning. Server side paging is working just fine.
    However, grid gets loaded twice on refresh and gets loaded when route is changed.
    Thank you in advance, hope I didn’t forget anything this time 🙂

    • This reply was modified 6 years, 1 month ago by  alphaww.

    alphaww
    Participant

    Also worth mentioning. Server side paging is working just fine.
    However, grid gets loaded twice on refresh and gets loaded when route is changed.

    Thank you in advance, hope I didn’t forget anything this time 🙂


    alphaww
    Participant

    Also this exception happens whenever route is changed.

    jqx-all.js:7 Uncaught TypeError: Cannot read property ‘length’ of undefined(…)refresh @ jqx-all.js:7q @ jqx-all.js:7l @ jqx-all.js:7callDownloadComplete @ jqx-all.js:7success @ jqx-all.js:7fire @ jquery.js:3187fireWith @ jquery.js:3317S @ jqx-all.js:7H @ jqx-all.js:7
    jqx-all.js:7 Uncaught TypeError: Cannot read property ‘length’ of undefined
    at b.jqx.dataview.refresh (http://localhost:46802/Scripts/jqx-all.js:7:1764177)
    at q (http://localhost:46802/Scripts/jqx-all.js:7:1754797)
    at Object.l [as func] (http://localhost:46802/Scripts/jqx-all.js:7:1754866)
    at i.jqx.dataAdapter.callDownloadComplete (http://localhost:46802/Scripts/jqx-all.js:7:119887)
    at Object.success (http://localhost:46802/Scripts/jqx-all.js:7:110218)
    at fire (http://localhost:46802/Scripts/vendor/jquery/dist/jquery.js:3187:31)
    at Object.fireWith [as resolveWith] (http://localhost:46802/Scripts/vendor/jquery/dist/jquery.js:3317:7)
    at S (http://localhost:46802/Scripts/jqx-all.js:7:152336)
    at XMLHttpRequest.H (http://localhost:46802/Scripts/jqx-all.js:7:158769)


    Hristo
    Participant

    Hello alphaww,

    Is it possible to invoke additional times “controller” file?
    You could try to isolate initial generation of the Grid in ‘if’ block to escape second loading of it.
    Another thing that I would like to suggest you is to look our article for integration with Angular.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    alphaww
    Participant

    Hi Hristo,

    Thank you for answering.
    Will check out that, thanx!

    I couldn’t find any examples of server side filtering, sorting , paging with angular1 could you create those examples ?

    • This reply was modified 6 years, 1 month ago by  alphaww.
    • This reply was modified 6 years, 1 month ago by  alphaww.

    alphaww
    Participant

    Checked everything out.
    Controller is not called twice.
    I need grid’s server side filtering capabilities, so none of your angular1 tutorial examples work for me……

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.