I would like to modify the $(document).ajaxStop function to set the localStorage variable when it is called (without actually changing the function that it calls). What I have tried is something like this:
origstop = $(document).ajaxStop;
$(document).ajaxStop = function(fun) {
localStorage.var = 'nice';
origstop(fun);
}
This did not work because it changes back right away, so when I run $(document).ajaxStop I get the same function as origstop.
Another way that I have found on StackOverflow is this:
(function($){
var jqAttr = $.fn.attr;
$.fn.attr = function( elem, name, value, pass ) {
if (name === 'ajaxStop') {
localStorage.var = 'nice';
jqAttr(elem, name, value, pass);
} else {
jqAttr(elem, name, value, pass);
}
};
}(jQuery));
This causes an error Uncaught TypeError: Cannot read properties of undefined (reading 'length') whenever the function is actually called. Also, I am also not sure how this works, so I have no idea how to fix this either...
What would be the correct way to approach this?
Related
Here is the relevant snippet of code:
$scope.newLike = LikeFactory.newLike;
$scope.newDislike = LikeFactory.newDislike;
$scope.updateLike = LikeFactory.updateLike;
$scope.updateDislike = LikeFactory.updateDislike;
$scope.vote = function(sockId, nnew, update) {
if (!$scope.verifyUser) $scope.alert("Please log in to like a sock!");
if (!$scope.like.like && !$scope.like.dislike) {
return nnew(sockId).then(function(vote) { $scope.vote = vote; });
} else {
return update(sockId).then(function(update) { $scope.vote = update; });
}
}
I call this function, $scope.vote, in the html with an ng-click="vote(sock.id, newLike, updateLike)" or ng-click="vote(sock.id, newDisike, updateDislike)" whether on an like vs dislike button. The call button works fine when first liking and updating once there is an instance of a 'like' for a particular unique sock/user combo but after one 'update' I get the error:
angular.js:13642 TypeError: v2.vote is not a function
Do I need to trigger a $digest for the function to continue to be in $scope? Does it somehow come off $scope after being used? It seems like a strange error to me.
Edit: duh! It's late, thanks for the answers!
You define $scope.vote as a function in your controller. After first invocation you assign a result that may not be a function to this variable, thus vote is no longer a function:
$scope.vote = function() {} // => 'vote' variable is holding a function
$scope.vote = vote / update // => 'vote' might not reference a function but a value
Log your result after the promise is resolved (in the then block), to understand what is the new assigned value.
It's normal, here : $scope.vote = update you use the same varaible that the function name
The issue must be with the following statement:
$scope.vote = vote;
The vote might not be function and so v2.vote is not a function
I'm trying to call getQuestions() inside the same object it is a method of. But when I try to read the quizz.config.allQuestions property, I get an error message reading "Uncaught TypeError: Cannot read property 'getQuestions' of undefined." Is there something I am missing here?
var quizz = {
config: {
urlJSON: 'questions.json',
allQuestions: quizz.getQuestions()
},
getQuestions: function() {
$.getJSON(quizz.config.urlJSON, function(questions) {
return questions;
});
}
};
When you're trying to assign to allQuestions the quizz object isn't done being initialized yet. So you'd have to do it after creating the object.
var quizz = {
config: {
urlJSON: 'questions.json'
// don't declare allQuestions
},
getQuestions: ...
};
quizz.allQuestions = quizz.getQuestions();
The problem with that though is that $.getJSON is an asynchronous function, meaning it won't return that value immediately. That's why it has a callback in it. Instead, you might try defining getQuestions like this:
getQuestions: function(callback) {
$.getJSON(quizz.config.urlJSON, callback);
}
Then you can get the values like this:
quizz.getQuestions(function(questions) {
quizz.config.allQuestions = questions;
});
I have some trouble with getting the name of a method stored in a variable... Here is an exemple of what I want :
Function MyObject(){
this.actualMethod = this.thatName;
}
MyObject.prototype.thatName = function(){}
MyObject.prototype.getActualMethodName = function(){
return this.actualMethod.name; /* This doesn't work since the function itself is anonymous, so this.actualMethod.name doesn't work... I want it to return "thatName" */
}
I tried to navigate through the prototype with my console, in vain... Is there a way to do this ?
You need to name the function:
MyObject.prototype.thatName = function thatName() {};
Or, as you mentioned, you can find its name in the prototype (but I wouldn't suggest you to do it):
for (var key in MyObject.prototype) {
if (MyObject.prototype[key] === this.actualMethod) {
return key;
}
}
But why do you need this? Maybe there could be a better solution.
I was just going through the source of transit.js and came across the following fucntion ::
$.cssHooks['transit:transform'] = {
// The getter returns a `Transform` object.
get: function(elem) {
return $(elem).data('transform') || new Transform();
},
// The setter accepts a `Transform` object or a string.
set: function(elem, v) {
var value = v;
if (!(value instanceof Transform)) {
value = new Transform(value);
}
// We've seen the 3D version of Scale() not work in Chrome when the
// element being scaled extends outside of the viewport. Thus, we're
// forcing Chrome to not use the 3d transforms as well. Not sure if
// translate is affectede, but not risking it. Detection code from
// http://davidwalsh.name/detecting-google-chrome-javascript
if (support.transform === 'WebkitTransform' && !isChrome) {
elem.style[support.transform] = value.toString(true);
} else {
elem.style[support.transform] = value.toString();
}
$(elem).data('transform', value);
}
};
I understand the latter part of the function, but its really hard to understand the initial part of the function, the function can be found on git too , HERE .
Initially I see this, $.cssHooks['transit:transform'] what is that line really saying?
After that we have the below line of code I.E. the getter and setter method,
set: function(elem, v) {
But who is passing the elem and v inside the function, I don't see anything being passed?
Read about cssHooks at jQuery cssHooks
Look at the source code (search for hooks.get and hooks.set)
.cssHooks is an array of objects that contains getter and setters tha will be executed by .css(). Thats all.
$.cssHooks['transit:transform'] = {set: function(elem,value){}, get: function(elem){}}
equal:
$.cssHooks['transit:transform'] = {};
$.cssHooks['transit:transform'].set = function(elem, value){};
$.cssHooks['transit:transform'].get = function(elem){};
$(element).css('transit:transform',value)
comes to:
$.cssHooks['transit:transform'].set(element,value)
$(element).css('transit:transform')
comes to:
$.cssHooks['transit:transform'].get(element)
$.cssHooks['transit:transform'] = {set:function(){}, get: function(){} }
{...} is an object creation.get and set not executed at this moment.
They created {set:function(){}, get: function(){} }
So. Simply: .css() will execute set and get functions for hooked property.
If you want to know how real getters and setters works:
Object.defineProperty()
In Javascript, you can add/access to a property with this syntax :
myObject.myProperty
or with this syntax :
myObject['myProperty']
This is the same result
So your line
$.cssHooks['transit:transform']
just mean that we want to store an object (code between {} in your original post) inside the 'transit:transform' property which is inside the cssHooks property which is inside the $ object
This is the same things :
$['cssHooks']['transit:transform']
The reason why they use the [''] syntax is that transit:transform contains the ':' char which is not allowed if you want to access it this way :
$.cssHooks.transit:transform //doesn't work
EDIT:
To answer to your second question, i don't know...the code you are showing is just the 'description' of the "transit:transform' property
I'm getting an error when using jquery and I would like to know its cause:
here is part of my code
function Wbook(name){
this.name = name;
}
Wbook.prototype.GetHTML = function() {
Object.defineProperty(this, "GetHTML", {enumerable : false,
configurable : true});
var html ='<h1>TEST1</h1>';
return html;
};
var rs = {};
rs.WB = new Wbook('test1');
var foo = rs.WB.GetHTML();
$(foo).appendTo('div#id1'); // This works
$(rs.WB.GetHTML()).appendTo('div#id1');
// This doesn't work >> TypeError: rs.WB.GetHTML is not a function
I can also getting to work if I comment the Object.defineProperty section, so I'm suspecting this might have to do with the enumerability, but I'm not sure of it
//Edit: While creating Jfiddle, I notice rs.WB.GetHTML() is always failing the second time it runs :-/. (It works fine if I comment the Object.defineProperty section)
The first time you call .GetHTML() it's returning some HTML, but in the process the Object.defineProperty call is overwriting the .GetHTML method with a new property that has no value.
It's therefore unsurprising that on the second invocation you get an error because the value of .GetHTML by then is undefined.
If the intent of your code is to ensure that GetHTML is not enumerable, use the following code which directly adds the method to Wbook.prototype and (automatically) sets it non-enumerable:
Object.defineProperty(Wbook.prototype, 'GetHTML', {
value: function() {
...
}
});