I just wrote a very simple snippet to understand how jQuery data() functions and the code is as follows:
$(function () {
carousel = function() {
this.prop1 = 1;
this.prop2 = 'two';
this.prop3 = 3;
}
var _str = $('#test'),
$str_data = _str.data();
console.log($str_data);
data = _str.data('carousel');
if (!data) _str.data('carousel' , new carousel());
console.log(data);
if (!data) {
console.log('no data');
}
});
Now, the objective of this code was to add data() to the div element using the new operator and then checking if that piece of data was added, however in my snippet of code in-spite of me adding data to the div element using the below line of code:
if (!data) _str.data('carousel' , new carousel());
When I checked again to see on the next line if data is actually added:
if (!data) {
console.log('no data');
}
The test passes, which means no data was added. So what am I missing?
If there is no data, you are updating the data associated with the element but the value referred by the data variable is not updated that is why it is still giving undefined as its value.
$(function () {
var carousel = function () {
this.prop1 = 1;
this.prop2 = 'two';
this.prop3 = 3;
}
var _str = $('#test'),
$str_data = _str.data();
console.log($str_data);
var data = _str.data('carousel');
if (!data) {
//create a new carousel and assign it to data so that it gets a new value
data = new carousel();
//store the new carousel value
_str.data('carousel', data);
}
console.log(data);
if (!data) {
console.log('no data');
}
});
Demo: Fiddle
The problem is that you are not updating the data variable's value. You need either to set again the data value after setting the carousel or to call directly the jquery function .data() as the example bellow:
data = _str.data('carousel');
// this condition is not updating the variable defined above
if (!data) {
_str.data('carousel' , new carousel());
}
console.log(data);
// you have to update the variable value or to call as
if (!_str.data('carousel')) {
console.log('no data');
}
Related
i have understand that i need to change the global scope of this, because in the loop this refers to the window object. But if i try to define a variable in my foreach loop via a function its not working and i dont know why although my functio returns the correct value :(
// simple class for xml import
function io() {
this.vertexes = [];
this.getVertexByID = function(id) {
this.vertexes.forEach(function(entry) {
if (id == entry.id) {
// correct element found, displayed and returned
console.log(entry);
return entry;
}
});
}
this.importXML = function(xmlString) {
cells = this.xmlToJson(xmlString);
var parent = graph.getDefaultParent();
var _this = this;
graph.getModel().beginUpdate();
try {
// addEdges
cells.XMLInstance.Edges.Relation.forEach(function(entry) {
// both will be empty but i dont understand why :(
fromVertex = _this.getVertexByID(entry.fromNode);
toVertex = _this.getVertexByID(entry.toNode);
var e1 = graph.insertEdge(parent, null, '', fromVertex, toVertex);
});
} finally {
graph.getModel().endUpdate();
}
}
Returning a value in a forEach callback has no effect. It certainly is not the return value of the function that the forEach is part of.
So change this:
this.vertexes.forEach(function (entry) {
if(id==entry.id){
//correct element found,displayed and returned
console.log(entry);
return entry;
}
});
to this:
return this.vertexes.find(function (entry) {
return id==entry.id;
});
I'm trying to get either options or, ideally, dynamicTable passed from initializeTable to the applyTableFilters function and I'm having problems getting the expected values. I'm using List.js to make a table dynamic and I need to pass or recreate the dynamicTable object so I can go ahead and use it to filter the table.
Here is the function that creates the List.js object from the HTML table:
function initializeTable(options) { // initializes table to be dynamic using List.js functions
var dynamicTable = new List("table-content", options);
dynamicTable.on("updated", function (list) { // writes a message to the user if no results are found
if (list.matchingItems.length == 0) {
document.getElementById("no-results").style.display = "block";
}
else {
document.getElementById("no-results").style.display = "none";
}
});
console.log(dynamicTable);
console.log(options);
console.log(arguments.length);
applyTableFilters.bind();
}
I've tried different methods to pass the variables to the function below. I tried .call, applyTableFilters(args), and .apply, but the problem is that I do not want the function to execute from inside here, only when the click event from the button goes off (not shown in these functions).
This is the function I want to pass the object to and proceed to make the filter functions using it:
function applyTableFilters(dynamicTable) {
var form = document.getElementById("filter-form");
//console.log(options);
//var dynamicTable = new List("table-content", options);
console.log(dynamicTable);
var filters = form.querySelectorAll('input[type="checkbox"]:checked');
dynamicTable.filter(function (item) {
console.log(item);
console.log(item._values);
if (item.values().id == 2) {
return true;
}
else {
return false;
}
//var filterStrings = [];
//console.log(filters);
//for (var i = 0; i < filters.length; i++) {
// var filterVal = filters[i].value;
// var filterString = "(" + item.values().column == filterVal + ")"; // filterVal.contains(item.values().column) ||
// filterStrings.push(filterString);
// console.log(filterVal);
// console.log(filterString);
//}
//console.log(filterStrings);
//var filterString = filterStrings.join(" && ");
//console.log(filterString);
//return filterString;
});
}
I've used:
applyTableFilters.bind(this, dynamicTable/options);
applyTableFilters.bind(null, dynamicTable/options);
applyTableFilters.bind(dynamicTable/options);
Switching between the two since I don't need both passed if one ends up working, etc. I always get a mouse event passed in and that's not even the right type of object I'm looking for. How can I get the right object passed? Also all the values in the first function are not empty and are populated as expected so it's not the original variables being undefined or null. Thanks in advance.
From your initializeTable function return a function that wraps the applyTableFilters function with the arguments you want.
Then assign the returned function to a var to be executed later.
function initializeTable(options) {
var dynamicTable = new List("table-content", options);
// other stuff
return function () {
applyTableFilters(dynamicTable)
}
}
// other stuff
var applyTableFiltersPrep = initializeTable(options)
// later, when you want to execute...
applyTableFiltersPrep()
JSFiddle example
I've an object called 'sheet1'
var nr = 1;
function Sheet(title){
this.div = document.createElement('div');
this.div.dataset.sheetNr = nr;
this.div.dataset.sheetTitle = title;
document.getElementById("sheets").appendChild(this.div);
nr++;
}
Sheet.prototype = {
constructor: Sheet,
get : function(data){
return this.div.dataset.data;
}
}
var sheet1 = new Sheet("Title1");
now when I call the function
sheet1.get("sheetNr");
it returns 'undefined' !...how can I solve this problem?
// console.log(data); outputs sheetNr
but when I change my function like
Sheet.prototype = {
constructor: Sheet,
get : function(){
return this.div.dataset.sheetNr;
}
}
and then call
sheet1.get();
it returns the number of the sheet...1 in this case...
http://codepen.io/anon/pen/rOXZjq?editors=101
You don't have a data attribute defined on the div you are creating sot it doesn't exist as called. When you call this.div.dataset.sheetNr you are actually hitting a defined attribute. To use the variable data as an index you need to call:
this.div.dataset[data] instead.
I have this behavior which I can't understand:
Cart.prototype.getCouponsCount = function() {
// Loop through all rows of coupons currently available in the cart
ele.cartCouponsList.count().then(function(count) {
console.log("Amount of items in cart:", count);
return count;
});
};
When called like this:
var Cart = require("../../../../lib/cartlib");
var cart = new Cart();
expect(cart.getCouponsCount()).toBe(2);
Returns undefined, but in console I can see the correct coupon amount being printed. So it's just not returning the count back.
Similarly I have this working for the getText() method, therefore why I can't understand why the count() method would behave differently.
Working method:
Cart.prototype.getEvent = function(row) {
var cartHistory = new Cart();
var parent = cartHistory.getCartCoupon(row);
var child = parent.element(by.binding("selection.event.name"))
.getText().then(function(e) {
console.log(e);
return e;
});
};
Anyone can point me in the right direction?
There is no return from the function, add it:
Cart.prototype.getCouponsCount = function() {
// HERE
return ele.cartCouponsList.count().then(function(count) {
console.log("Amount of items in cart:", count);
return count;
});
};
I can't seem to get this right: I've got an array with categories (objects) and a post object:
var categories = $http.get('/api/categories').success(function (data) {
$scope.categories = data;
});
// The code below uses a Rails gem to transport data between the JS and Rails.
$scope.post = gon.post;
// Suffice to say the $scope.post is an object like so:
...
_id: Object { $oid="54f4706f6364653c7cb60000"}
_slugs: ["first-post"]
author_id: Object { $oid="54ef30d063646514c1000000"}
category_ids: [Object, Object]
...
As you can see the post object has a property category_ids which is an array whit all categories associated with this post. In my view (haml) I have the following:
%label
%input{"type" => "checkbox", "ng-model" => "cat.add", "ng-change" => "addCategory(cat)", "ng-checked" => "currentCat(cat)"} {{cat.name}}
As you can see, the ng-checked fires the currentCat() function:
$scope.currentCat = function (cat) {
for (var i = 0; i < cat.post_ids.length; i++){
if (cat.post_ids[i].$oid == $scope.post._id.$oid) {
return true;
}
}
};
The function above loops through the categories in the post (the category_ids property of the post object) and compares it with the parameter given. It works fine with existing categories. The problem appears when I dynamically add a new category and push it in the categories array:
$scope.addCatBtn = function () {
var category = $scope.cat;
$http.post('/api/categories', category).success(function (data) {
$scope.categories.push(data.category);
$scope.cat = '';
$scope.addCategory(data.category);
});
};
The new category does not appear 'checked' in the view. What am I missing?
Any thoughts would be appreciated.
EDIT: Adding addCategory function:
$scope.addCategory = function (cat) {
var found = false;
for (var i in $scope.post.category_ids) {
if (cat._id.$oid === $scope.post.category_ids[i].$oid) {
$scope.post.category_ids.splice(i, 1); // splice, not slice
found = true;
}
}
if (!found) { // add only if it wasn't found
$scope.post.category_ids.push(cat._id);
}
console.log($scope.post);
}
ngModel and ngChecked are not meant to be used together.
You should be fine to just use ngModel.