jqxGrid hitting server twice on route change and refresh

[alphawwParticipant]

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’);
}
}

})();

[alphawwParticipant]

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 🙂

[alphawwParticipant]

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 🙂

[alphawwParticipant]

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)

[HristoParticipant]

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

[alphawwParticipant]

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 ?

[alphawwParticipant]

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……

[Author]

Posts