Develop Reference

angular $timeout redirect after 3secs

I'm trying to redirect back to the previous page using $timeout and $window.history.back(). So when form is submitted a message will show saying (thank you... bla bla) all good from here, but when redirecting back the $timeout doesn't seems to kick in.
<div class="thankyou" data-ng-show="vm.hideEnquiryForm">
<h3><i class="fa fa-envelope fa-x2"></i> Thank you for enquiring, we will get back to you as soon as possible.</h3>
Return
</div>
vm.submitForm = function () {
enquireService.postEnquireForm(vm)
.then(function (response) {
//$location.path(vm.returnUrl);
//console.log($location.path() + ' '+ vm.returnUrl);
if (!vm.hideEnquiryForm) {
vm.hideEnquiryForm = true;
}
$timeout(function () {
$window.history.back;
}, 3000);
})
}

The are many way to do what you want...
The best way, in my opinion, could be using the interface exposed by your router (assuming that you are using a router)...
this is a useful post based on top of UI.Router Angular - ui-router get previous state, so, you need just to go to the previous state using $state.go;
If you cannot do something like that, the only way is using the real history object...
vm.submitForm = function () {
var returnUrl;
enquireService
.postEnquireForm(vm)
.then(function (response) {
var returnUrl = response.returnUrl;
if (!vm.hideEnquiryForm) {
vm.hideEnquiryForm = true;
}
return $timeout(window.history.back.bind(window), 3000);
});
};

angular watch causing looping Iligal invocation error

I have a modal dialog where the user can select files to be uploaded. The actual file select/upload is handled by ng-file-upload. When the user selects one or more file, they are added to a list in the dialog, showing progress, completion and failure statuses for each element. The list of items are handled inside a custom directive, since it's used other places as well.
I need to prevent the user from dismissing the dialog while files are still uploading, and that's a challenge for me, cause the button for closing the dialog is in one controller, while the list of uploads is in another (the directive controller). I have solved that by giving and empty list to the directive like this:
//extract from directive:
var directive = {
...
scope: {
'files': '='
}
}
//extract from usage
<uploadFiles files="files" />
Now the outer controller and the inner controller shares the list of files uploading.
So when the user tries to dismiss the dialog by clicking the Close button, I first check if the list contains files still uploading, and if so, I disable the button and display a spinner and a 'please wait'-text.
//from the outer controller
function onModalOk() {
if (uploadInProgress()) {
waitForCompletionBeforeClosingDialog();
} else {
closeDialog();
}
}
the waitForCompletionBeforeClosingDialog() is implemented by setting up a deep watch on the files array. Each time the watch is triggered, I loop through to see if every file has completed. If so, I delete the watch and dismiss the dialog.
function waitForCompletionBeforeClosingDialog() {
$scope.showWaitText = true;
var unregisterWatchForCompletion = $scope.$watch('files', function(files) {
if (allCompleted(files)) {
unregisterWatchForCompletion();
closeDialog();
}
}, true);
}
Everything is working ok, except for one little thing...
In the console, I get this error:
TypeError: Illegal invocation
at equals (angular.js:931)
at equals (angular.js:916)
at Scope.$digest (angular.js:14302)
at Scope.$apply (angular.js:14571)
at angular.js:16308
at completeOutstandingRequest (angular.js:4924)
at angular.js:5312
and it's fired in a tight loop.
I have tried debugging this error, but with no luck..
Do anyone have any ideas?
Is there better ways of doing this all together?

What about using an $httpInterceptor to keep count of the amount of active requests?
something like:
angular.module('someModule').provider('httpStatus', ['$httpProvider', function ($httpProvider) {
var currentRequestCount = 0;
var interceptor = ['$q', function ($q) {
return {
request: function (config) {
currentRequestCount++;
return config;
},
response: function (response) {
currentRequestCount--;
return response;
},
responseError: function (rejection) {
currentRequestCount--;
return $q.reject(rejection);
}
}
}];
$httpProvider.interceptors.push(interceptor);
this.$get = function () {
return {
isWaiting: function () {
return currentRequestLength > 0;
}
}
};
}]);
You could inject the httpStatus service into your dialog and use it to disable the buttons if there are any active requests. May need to add the requestError handler also.
https://docs.angularjs.org/api/ng/service/$http

ng-table not working for dynamic data

I have created a table and I am using http to load the data in the tables. So, in every click, my table data is changing, but I don't see the updated data in the table.
I had created a sample Plunker for the reference. In my project, WHen I click on Reload New Data, the data in table get's changed, but after 2-3 click it doesn't change. DId anyone know, how to fix it..

It is a problem with the ngTable directive. It updates only when data.length changes. Take a look at this plunk. I set $scope['tableParams1'] to null and inside the $timeout I set the new data. This forces angularJs to do a new cycle. So in the first cycle the ngTable sees the data.length changed to 0 and in the new cycle the ngTable sees the data.length changed again. If you don't use the $timeout, the ngTable will see that the data.length remains the same as before and won't do nothing.

With some trial and error I found a seemingly better solution to the issue than indicated in the plunkrs. For clarity, I am using $resource in a service to fetch my data. When I add a record via a modal, at first it wouldn't upload the ng-table after closing the modal. I figured out a way that works for me:
// Get data from factory
var data = dataFactory.query();
//Use promise to load data to table, note the replacing of the second tableParams
//object parameter with a function
data.$promise.then(function (data){
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10,
sorting: {
name: 'asc'
},
filter: {
name: undefined
}
}, resetTableParams()
);
});
//The function that replaces the tableParams param
var resetTableParams = function(){
return {
total: data.length,
getData: function($defer, params) {
var filteredData = params.filter() ? $filter('filter')(data, params.filter()) : data;
var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData;
params.total(orderedData.length);
$defer.resolve($scope.data = orderedData.slice((params.page() -1) * params.count(), params.page() * params.count()));
}
}
}
//A method to update the table that can be called when closing a modal
var updateTable = function(){
data = dataFactory.query();
data.$promise.then(function (data){
$scope.tableParams.reload();
});
}
// Add table row to table in modal and call updateTable() on closing modal
$scope.addRow = function(){
var modalInstance = $modal.open({
templateUrl: 'resources/partials/newrecord.html',
controller: NewRecordModalCtrl
})
modalInstance.result.then(function(){
updateTable();
});
}
Unfortunately, I can't give a clear explanation as to why this works and other methods don't. For instance, if you would not use the resetTableparams() function but leave it hardcoded, the table does not update. Somehow, Angular's digest cycle likes this better :) If somebody has a good explanation, please share!

You can directly use the provided method $scope.tableParams.reload();

I'm not sure about the exact cause of the incorrect incrementing, but the problem here may be more due to the approach. You should attach the count to the scope via $scope.count, and then use the ng-click directive to increment it: <button type="button" ng-click="count++;".
It would also make it easier for you/others to read and debug if you externalized the $scope.tableParams and the data from $scope.table1 conditional thing:
$scope.count = 0;
var dataCollections = [
[//.. first collection],
[//.. second collection],
[//.. third collection],
[//.. fourth collection]
];
$scope.data = dataCollections[0];
$scope.$watch('count', function () {
$scope.data = $scope.count < 4 ? dataCollections[$scope.count] : dataCollections[3];
});
I'm also not sure what you've got going on there with the $compile inside of the controller. It might make your task easier if you investigated some stuff about writing Angular controllers before delving into using a third-party module.

I was working on ng-tables with dynamic data as well (adding/removing),
I was using an ajax call to make changes to the database, and the success: function() {} property make changes to the tableParams
but changes wouldn't show on the page unless i refreshed it, with a few console.log()'s, I found out that the success: function() {} actually never executes
but there's another function that always executes, complete: function() {}
I know it's logically wrong to put the code that's supposed to work only after a successful call into complete: function() {} but if my success: function isn't working, this fix isn't that bad, especially knowing that the change is always successfully made to the database
it's strange because the success call works on other pages of the website, but it doesn't on some others.
EDIT:
well, this fix still doesn't solve the problem when the length of the data doesn't change "editing the text in the data" as mentioned above,, frustrating...
$.ajax({
type: "POST",
url: /*some url*/,
data: JSON.stringify({ /*some variable*/ }
}),
contentType: "application/json; charset=utf-8",
dataType: "Json",
success: function () { // would never execute even if it's a successful call
console.log("success");
},
error: function() { // optional, personally didn't try it
console.log("error");
}
complete: function () { //always executes regardless of the result
console.log("complete");
}
});

To solve the issue, make sure you have set the ng-controller="yourController" only once in your page.
Code below will not update data:
<div ng-controller="yourController">
<table ng-table = "tableParams" ng-controller = "yourController">
</table>
</div>
Solve the issue by removing extra ng-controller in your html page:
<div ng-controller="yourController">
<table ng-table = "tableParams">
</table>
</div>

prototype AJAX loading blank page onSuccess

I'm working on a magento project, and I'm trying to load more products on the click of the more button.
I can see them loading but then it will just load a blank page after it.
I have no idea what is happening or why.
This is the code I have
var loadMore = Class.create({
initialize: function (list, href, pattern) {
var that = this;
this.list = list;
this.list.insert({ after : '<div class="more"><span id="more_button" class="more-button">More</span></div>'});
this.href = href.readAttribute('href');
this.button = $('more_button');
this.holder = new Element('div', { 'class': 'response-holder' });
this.button.observe('click', function () {
if ( !that.button.hasClassName('loading') ) {
new Ajax.Request(that.href, {
onCreate: function () {
that.button.addClassName('loading');
},
onSuccess: function(response) {
if (200 == response.status) {
that.holder.update(response.responseText).select(pattern).each(function(elem) {
that.list.insert({ bottom : elem });
}),
that.href = that.holder.select('.next-page')[0].readAttribute('href');
that.button.removeClassName('loading');
if ( !that.href ) {
that.button.up().remove();
}
}
}
});
}
});
}
});
If anyone can help me out that would be awesome!
Thanks in advance.

I've having the same problem in my magento Iphone orginal theme, but the error is because of code injection, mostly "script" tags from google analytics, clicktale and similar stuff.
what i've done to fix it was to "parse" the ajax response and modify the opening "script" tag with the html entity:
below the line 117 (aprox in iphone.js)
if (200 == response.status) {
that.holder.update(response.responseText).select(pattern).each(function(elem) {
replace with this:
str = response.responseText;
str = str.replace(/<script/gi, '<script');
that.holder.update(str).select(pattern).each(function(elem) {

Might I suggest you rewrite your code and use thiz for that? Your code is extremely hard to read.
I do not see any reason to use the onCreate event of the Ajax Request, which by the way is reserved for Ajax Responders (per spec: http://prototypejs.org/doc/latest/ajax/Ajax/Request/)
Instead, you can add this classname at the moment you enter into !that.button.hasClassName('loading') ...
if ( !that.button.hasClassName('loading') ) {
that.button.addClassName('loading');
new Ajax.Request(that.href, {
....
There is a lot more going on behind the scene, like your CSS, magento of course, but also containing and parent html elements so it is very difficult to give any sound advice. What have you done in order to debug this?
Karl..

jasmine-fixtures - DOM changes never seen

I've got two RequireJS modules, one for fetching data from an external service, one in charge of passing a callback to the first module.
Here is the first very basic module:
define(["jquery"], function($) {
return {
/**
* Retrieves all the companies that do not employs the provided employee
* #param employeeId ID of the employee
* #param successCallback callback executed on successful request completion
* #return matching companies
*/
fetchCompanies: function(employeeId, successCallback) {
var url = '/employees/' + employeeId + '/nonEmployers';
return $.getJSON(url, successCallback);
}
};
});
And the most interesting one, that will generate a new drop-down and inject it into the specified DOM element (this is the one under test):
define([
'jquery',
'vendor/underscore',
'modules/non-employers',
'text!tpl/employeeOption.tpl'], function($, _, nonEmployers, employeeTemplate) {
var updateCompanies = function(selectedEmployeeId, companyDropDownSelector) {
nonEmployers.fetchCompanies(selectedEmployeeId, function(data) {
var template = _.template(employeeTemplate),
newContents = _.reduce(data, function(string,element) {
return string + template({
value: element.id,
display: element.name
});
}, "<option value='-1'>select a client...</option>\n");
$(companyDropDownSelector).html(newContents);
});
};
return {
/**
* Updates the dropdown identified by companyDropDownSelector
* with the companies that are non employing the selected employee
* #param employeeDropDownSelector selector of the employee dropdown
* #param companyDropDownSelector selector of the company dropdown
*/
observeEmployees: function(employeeDropDownSelector, companyDropDownSelector) {
$(employeeDropDownSelector).change(function() {
var selectedEmployeeId = $(employeeDropDownSelector + " option:selected").val();
if (selectedEmployeeId > 0) {
updateCompanies(selectedEmployeeId, companyDropDownSelector);
}
});
}
};
});
I'm trying to test this last module, using Jasmine-fixtures and using waitsFor, to asynchronously check that the set-up test DOM structure has been modified. However, the timeout is always reached.
If you can spot what's wrong in the following test, I'd be most grateful (gist:https://gist.github.com/fbiville/6223bb346476ca88f55d):
define(["jquery", "modules/non-employers", "modules/pages/activities"], function($, nonEmployers, activities) {
describe("activities test suite", function() {
var $form, $employeesDropDown, $companiesDropDown;
beforeEach(function() {
$form = affix('form[id=testForm]');
$employeesDropDown = $form.affix('select[id=employees]');
$employeesDropDown.affix('option[selected=selected]');
$employeesDropDown.affix('option[value=1]');
$companiesDropDown = $form.affix('select[id=companies]');
$companiesDropDown.affix('option');
});
it("should update the company dropdown", function() {
spyOn(nonEmployers, "fetchCompanies").andCallFake(function(employeeId, callback) {
callback([{id: 42, name: "ACME"}, {id: 100, name: "OUI"}]);
});
activities.observeEmployees('#employees', '#companies');
$('#employees').trigger('change');
waitsFor(function() {
var companiesContents = $('#companies').html(),
result = expect(companiesContents).toContain('<option value="42">ACME</option>');
return result && expect(companiesContents).toContain('<option value="100">OUI</option>');
}, 'DOM has never been updated', 10000);
});
});
});
Thanks in advance!
Rolf
P.S.: replacing $(employeeDropDownSelector).change by $(employeeDropDownSelector).on('change', and/or wrapping the activities.observeEmployees call (and $('#employees').trigger('change');) with a domReady yields the same result
P.P.S.: this error is the cause -> SEVERE: runtimeError: message=[An invalid or illegal selector was specified (selector: '[id='employees'] :selected' error: Invalid selector: *[id="employees"] *:selected).] sourceName=[http://localhost:59811/src/vendor/require-jquery.js] line=[6002] lineSource=[null] lineOffset=[0].
P.P.P.S.: it seems HtmlUnit doesn't support CSS3 selectors (WTF?), and even forcing the latest published version as jasmine-maven-plugin dependency won't change anything...
Is there any way to change jasmine plugin runner ?

OK guys.
Solution found:
upgrade (if not already) to jasmine-maven-plugin v1.3.1.1 (or later)
configure phantomjs instead of this crappy HtmlUnit (add PhantomJS binaries to your project)
if you've got use of ':focus' selector in your code, beware of this bug, replace it with $(mySelector).get(0) == document.activeElement
also, do not forget to wrap your code blocks by run(function() { /* expect */ }) if they are positioned after and depend on your waitsFor condition.
Finally, all should be well.
See how is the test now:
define(["jquery",
"modules/nonEmployers",
"modules/pages/activities"], function($, nonEmployers, activities) {
describe("activities test suite", function() {
var $form, $employeesDropDown, $companiesDropDown;
beforeEach(function() {
$form = affix('form[id=testForm]');
$employeesDropDown = $form.affix('select[id=employees]');
$employeesDropDown.affix('option[selected=selected]');
$employeesDropDown.affix('option[value=1]');
$companiesDropDown = $form.affix('select[id=companies]');
$companiesDropDown.affix('option');
spyOn(nonEmployers, "fetchCompanies").andCallFake(function(employeeId, callback) {
callback([{id: 42, name: "ACME"}, {id: 100, name: "OUI"}]);
});
});
it("should update the company dropdown", function() {
$(document).ready(function() {
activities.observeEmployees('#employees', '#companies');
$('#employees option[selected=selected]').removeAttr("selected");
$('#employees option[value=1]').attr("selected", "selected");
$('#employees').trigger('change');
waitsFor(function() {
var dropDown = $('#companies').html();
return dropDown.indexOf('ACME') > 0 && dropDown.indexOf('OUI') > 0;
}, 'DOM has never been updated', 500);
runs(function() {
var dropDown = $('#companies').html();
expect(dropDown).toContain('<option value="42">ACME</option>');
expect(dropDown).toContain('<option value="100">OUI</option>');
});
});
});
});
});

Creating modules this way is really difficult. I'd recommend not using fixtures and not rendering anywhere actually. Instead using detached DOM elements to do all the work is much easier.
Imagine if your code looked closer to this:
define([
'jquery',
'vendor/underscore',
'modules/non-employers',
'text!tpl/employeeOption.tpl'], function($, _, nonEmployers, employeeTemplate) {
return {
init: function() {
this.$companies = $('<select class="js-companies"></select>');
},
render: function(data) {
var template = _.template(employeeTemplate),
newContents = _.reduce(data, function(string,element) {
return string + template({
value: element.id,
display: element.name
});
}, "<option value='-1'>select a client...</option>\n");
this.$companies.empty().append(newContents);
return this;
});
observeEmployees: function(employeeDropDownSelector) {
$(employeeDropDownSelector).change(function() {
var selectedEmployeeId = $(employeeDropDownSelector + " option:selected").val();
if (selectedEmployeeId > 0) {
nonEmployers.fetchCompanies(selectedEmployeeId, function(data) {
this.render(data);
}
}
});
}
};
});
The above is not complete. It is just to give you an idea of another way to approach your problem. Now instead of a fixture all you need to do is inspect this.$companies and you will be done. I think the main problem though is that your functions are not simple enough. The concern of each function should be extremely specific. Your updateCompanies function is doing things like creating a template, fetching data then passing it to an anonymous function, which can't be spied on, that anonymous function iterates on an object, then you change some already existing DOM element. That sounds exhausting. All that function should do is look at some precompiled template send it an object. The template should loop on the object using {{each}} then return. Your function then empties and append the newContents and returns it self so the next function down can choose what it should do with this.$companies. Or if this.$companies has already been append to the page nothing needs to be done at all.