Im a bit of a beginner when it comes to javascript constructs. Im trying in jquery, but not with much success. The following is a reduces version of my code:
var field1 = {
fieldId:"#field1",
field:"",
init:function(){
this.field = this;
$.ajax({
type:"GET",
url:'some/url/to/get/values/from',
cache:false,
success: function(data){
alert(field.fieldId);
}
});
}
};
field1.init();
Basically i want to be able to print out field.fieldid inside the success event but i end up with something most definetly not expected. I would hate having to write field1.field.fieldid everytime also since that would ruin when i figure out how to use extends and similar things.
Can anyone help me get "#field1" out when i do the alert(field.fieldId) ?
This is a classic case of You must remember this. The simplest answer in your case is a local variable in your init function:
var field1 = {
fieldId:"#field1",
field:"",
init:function(){
var self = this; // <=== change here
$.ajax({
type:"GET",
url:'some/url/to/get/values/from',
cache:false,
success: function(data){
alert(self.fieldId); // <=== and here
}
});
}
};
field1.init();
Or alternately, use the context argument of the ajax function:
var field1 = {
fieldId:"#field1",
field:"",
init:function(){
// <=== change here (no `this.field = this;`)
$.ajax({
type:"GET",
url:'some/url/to/get/values/from',
cache:false,
context: this, // <=== and here
success: function(data){
alert(this.fieldId); // <=== and here
}
});
}
};
field1.init();
Basically, in JavaScript, the value of this during a function call is defined entirely by how a function is called, not where it's defined as in some other languages (C++, Java, C#, ...). When jQuery calls the success callback of the ajax function, it has to set this to something. By default, it sets it to an object representing the settings of the ajax call, but using context you can tell jQuery to set it to something else, allowing you to use this within the callback to mean the same thing as this when you call ajax.
The first solution takes advantage of the fact that the success callback is a closure over the context of the call to init (don't worry, closures are not complicated), and so by creating a variable (self) and giving it the value of this, we can reliably refer to the object via self within the closure (the success callback).
Ways in which this is set in JavaScript:
When you call a function by getting the function reference from an object property as part of the same expression as the call, this within the function call will be the object from which you got the property. So given:
var obj = {
firstName: "Fred",
speak: function(msg) {
alert(this.firstName + " says " + msg);
}
};
then
obj.speak("hi"); // alerts "Fred says hi", because `this = obj` within the call
Note that it has to be part of the same expression as the call. This does not work:
var s = obj.speak; // Getting a reference to `obj`'s `speak`
s("hi"); // alerts "undefined says hi", because `this` is not
// `obj` during the call
Using call or apply. These are features of all JavaScript functions. They let you call the function and explicitly set what this will be during the call. So given the obj above:
var s = obj.speak; // Getting a reference to `obj`'s `speak`
s.call(obj, "hi"); // alerts "Fred says hi", we explicitly made `this = obj`
// within the call
The only difference between call and apply is that when you use call, if you want to pass arguments to the function, you include them as discrete arguments to call as above (note we just passed "hi" as a second argument to call, and call passed it on as the first argument to the function). With apply, rather than an unlimited number of discrete arguments, the second argument is an array of arguments to pass to the function.
// Example 1: Passing no arguments, no difference.
// These calls do the same thing.
func.call(obj);
func.apply(obj);
// Example 2: Passing one argument (these calls do the same thing).
func.call(obj, arg);
func.apply(obj, [arg]); // note that it's in an array
// Example 3: Passing two arguments (these calls do the same thing).
func.call(obj, arg1, arg2);
func.apply(obj, [arg1, arg2]); // Again, the args are in an array
Related
I have this piece of code below:
It makes a GET call to an URL, gets some object, and appends an image to an HTML tag.
function getDataFromApi(searchTerm, callback) {
const URL1 = `some url`;
const design = {
url: URL1,
data: {
"dog breed name": searchTerm
},
type: 'GET',
success: callback
};
$.ajax(design);
}
function displaySearchData(data) {
const allResultsLength = data.message.length;
const ranNum = Math.floor(Math.random() * allResultsLength);
const dogResults = data.message[ranNum];
$(`.js-search-results`).html(`<img src = ${dogResults}>`);
}
function watchSubmit() {
$('.js-search-form').submit(event => {
event.preventDefault();
let queryTarget = $(event.currentTarget).find('.js-query');
let query = queryTarget.val();
queryTarget.val("");
getDataFromApi(query, displaySearchData);
});
}
$(watchSubmit);
I get the getDataFromApi and watchSubmit but getDataFromApi(query, displaySearchData); isn't intuitive to me at all.
I've been writing Java, and it doesn't make sense to me how displaySearchData is getting called without the parameter - it seems that line should be getDataFromApi(query, displaySearchData(data));.
Can someone please explain how this is getting compiled & executed (basically how this is a legitimate syntax) in javascript?
Somewhere in the good'ol jquery, there lies this piece of code:
$.ajax = function(config){
...
// get the response from XHR request,
// and save it in, say, 'response'
...
// now check, if the response is OK 200
// and if so, execute next line
// which is basically - calling your displaySearchData method
config.success(response);
...
}
now, config is your design object, which has a property success which carries the reference to your displaySearchData method.
The data argument of method displaySearchData will now carry the reference to variable response passed in the method invocation config.success(response).
EDIT: the argument callback also carries forward the reference of the method displaySearchData to getDataFromApi
Concept to be noted:
functions can be passed in Javascript as arguments to another function, in which case we only need the referring variable to be passed as argument. Invocation parentheses () are not required.
function A(data){...};
function b(referenceToFunctionA){
...
referenceToFunctionA(someData);
...
};
// correct
b(A);
// wrong, because adding () after any function reference variable
// invokes the method immediately.
// in this particular case the returned value of the method A
// is passed as argument instead of the reference to method A itself.
b(A());
Welcome to JavaScript My Friend. Get ready to experience more magical weirdness as you continue to work on JS. Good luck.
What you need to look at is in the function getDataFromApi().
In that function, you have a "callback" parameter. This parameter is later added into $.ajax. This is a jQuery function that will provide some callback when a certain condition is matched (like before sending a request, when the response has been received,...). This $.ajax callback provide you with 3 parameters, one of them is data (which are being used, textStatus, and jqXHR. Usually, you only need to pay attention to the data since it contains the response from where you are requesting data.
So when the $.ajax success, the "callback" function will be called, which is the displaySearchData. And since $.ajax callback provides you with the data parameter, you can add them to the parameters of displaySearchData. Do note that you can add the extra 2 provided parameters if needed.
You can have a look at that function here: jQuery Ajax
I have a function, functionWithDifferentScope, that takes an object, myobject.options, as a parameter. One of the pairs in the options object is a callback which points to a function defined in myObject: myCallback.
What I'm trying to achieve is injection of the myObject namespace into the callback of a function that is defined (by a 3rd party) at the global level.
A simplified example:
var myObject = {
options: {
callback: this.myCallback(this),
...,
},
init: function() {
// functionWithDifferentScope operates in the 'window' context
functionWithDifferentScope(this.options);
},
myCallback: function(namespace) {
// 'this' is window
// 'namespace' is myObject
}
}
myObject.init();
When executing this script, this.myCallback(this) appears to be executed at definition (due to the parenthesis?); as well as once myObject.init(); is caled. During the first executions this is myObject, but subsequent calls through the functionWithDifferentScope identify this as window.
Is there a way to pass the myObject namespace to the myObject.options.callback value as a parameter?
Do you mean this?
var myObject = new (function() {
var t = this;
vac callback = function() {
// t equals to the myObject-instance
// this equals to window
}
this.init = function() {
funcWithDifferencScope(callback);
}
})();
myObject.init();
I think what you are looking for is prototype style "bind"
Basically "this.myCallback(this)" is a call to the function.
this.myCallback is the function itself. (It is an object with the type function).
You can call it using the method 'call' or 'apply' that you can use on functions. Which will call these functions.
See:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FFunction%2Fapply
The first argument is the object context to work in. What I think you mean by object namespace.
so: a.callback(5) is the same as a.callback.call(a,5)
However please note that these days if you are working with most javascript libraries you probably have a 'bind' function that will do the work for you.
http://prototypejs.org/doc/latest/language/Function/prototype/bind/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
the idea is that this.callback.bind(this) returns a Function object you can call that will inject the correct context automatically so you can pass the return value of bind alone as a callback and be assured that the method will be executed on the correct object.
I am trying to create a JavaScript object as follows.
var MyObject = function (parameters) {
this.parameters = parameters;
parameters.userFunction(this.MyObjectCallback);
}
MyObject.SOME_STATIC_VARIABLE = 21;
MyObject.prototype = {
myObjectCallback: function() {
console.log(this);
}
}
The MyObject object will accept a userFunction to which it will pass a handler. The user function will do some logic and pass the result back to the instance, for example:
new MyObject({userFunction: function(callback) {
$.post(
'http://localhost/~knyttl/source.php',
{},
callback,
'json');,
}});
Unfortunately, even though the callback is properly called, this gets an instance of the JQuery object and not of the MyObject instance as I would like. To conclude, I can not manage to keep the MyObject instance.
I am not even sure, whether this is a correct way of creating JavaScript objects. I will be grateful for any suggestion.
You can bind a specific this value using .bind. Also I corrected the capitalizing of My.
parameters.userFunction(this.myObjectCallback.bind(this));
When you call a function like a.b(), then inside b, this === a. However, if you do not directly call it but only pass the function (like a.b) and call it later, this binding is lost.
.bind returns a new function which now receives the jQuery ajax result as this. However, it ignores that and calls myObjectCallback with the predefined (bound) this.
.bind is not available on older browsers but there are shims available.
See apply() and call().
parameters.userFunction.call(this, this.MyObjectCallback);
jQuery allows you to set the context of your callback.
You are in a weird situation where you design has hurt you. Your MyObject can't be passed in as the context, because it is being created at the same time.
new MyObject({userFunction: function(callback) {
$.post(
'http://localhost/~knyttl/source.php',
{},
callback,
'json');,
}});
So instead:
var myObj = new MyObejct();
myObj.setCallback({userFunction: function (callback) {
$.ajax({
context: myObj,
url: 'http://localhost/what ever /',
success: callback,
dataType: 'json',
data: {}
}
});
Try this.
var myObject = {
obj1:function(paremeters){
this.Name = paremeters
return this},
};
I would suggest you read,
http://javascript.crockford.com/javascript.html
Using this in javascript has the potential to be very confusing. It is assigned the value of whatever is behind the dot when the function is called e.g.
window.doSomething();
will cause this to be set to window, whereas
myDOMElement.onClick();
will cause this to be set to myDOMElement.
In your case, it comes down to JQuery's internal workings, so have a look at this very thorough set of explanations to get an understanding of how JQuery handles this.
I have a following (simplified) code:
var myModule = {
submitDummyForm: function(){
console.log(this); // the right object is logged out
var that = this; // keep a reference
$.ajax({
type:'POST',
url: 'http://localhost/',
data: {dummyData: 'something'},
dataType: 'json',
success: that.dummyFormSuccess
});
},
dummyFormSuccess: function(data){
console.log(this); // 'this' is logged out as some foreign object, most probably jQuery.ajax object
}
}
It leads to 'this' being lost in the dummyFormSuccess, no matter if I use this.dummyFormSuccess or that.dummyFormSuccessfor as an argument for my ajaxSubmitForm().
But the following code gets executed as I need:
var myModule = {
submitDummyForm: function(){
console.log(this); // the right object is logged out
var that = this; // keep a reference
$.ajax({
type:'POST',
url: 'http://localhost/',
data: {dummyData: 'something'},
dataType: 'json',
success: function(data) {
that.dummyFormSuccess(data);
}
});
},
dummyFormSuccess: function(data){
console.log(this); // now 'this' is logged out correctly as the real myModule object
}
}
I'm still not very comfortable with advanced topics of Javascript but I already know, that 'this' may get redefined, depending on where it is used. I thought if I use 'that' to store the reference to 'this', it should also keep my 'this' inside the called function. It seems weird, that I can call that.dummyFormSuccess(data) in a wrap-around function and it gets correct 'this' inside, but if I just assign it to $.ajax success, my 'this' gets lost.
Can anybody explain, where is 'this' getting lost in my case and why it works OK in the second example? Is it a problem with jQuery (maybe jQuery.ajax() overwrites my 'this' somehow in my case) or just a feature of the language?
Everything is correct. Your this is lost in a first example because you are assigning function that.dummyFormSuccess to jQuery ajax object's success. So, this way, deep inside jQuery, it's called something like ajax.success. So, this is overwritten with ajax object.
With second approach you create an anonymous function and assgn it to success. So inside your anonymous function, this points to ajax object, but that variable is accessible and have not been overwritten.
You're misunderstanding this.
The value of this parameter is determined by the callsite – the code that calls your function.
When you pass that.dummyFormSuccess or this.dummyFormSuccess, you're just passing a function that happens to come from your object.
The this or that object is just used to retrieve the function instance; it isn't bundled with the function.
When jQuery calls your callback, it always calls it in the context of the jqXHR object.
When you pass function(data) { that.dummyFormSuccess(data); }, your function expression is called in the context of this jqXHR object.
However, your callback then calls dummyFormSuccess in the context of that, so its this is what you want it to be.
You can treat 'this' in JavaScript as additional argument in function argument list.
So each call of function will contain its own value in this argument. Here are all three ways of invoking function in JS
foo(); - inside the function this will be set to default
namespace object (window in case of browser environment).
obj.foo(); - this will get obj reference inside the foo().
foo.call(obj); - 'foo' will be called with this set to obj (same as above)
Since a function can also mean an object (and it is an object), this means that function. (different scopes)
What you need to do is put var that = this; outside of dummyForm : function (the line above it), and then do console.log(that).
var that = this;
dummyFormSuccess: function(data){
console.log(that); // now 'this' is logged out correctly as the real myModule object
}
Im trying to use this jQuery script and this is confusing me:
function CallService()
{
$.ajax({
type : varType, //GET or POST or PUT or DELETE verb
url : varUrl, // Location of the service
data : varData, //Data sent to server
contentType : varContentType, // content type sent to server
dataType : varDataType, //Expected data format from server
processdata : varProcessData, //True or False
success : function(msg) {//On Successfull service call
ServiceSucceeded(msg);
},
error: ServiceFailed// When Service call fails
});
}
The bit im confused about is the sucess object. The jQuery documentation says:
success(data, textStatus, jqXHR)Function, Array
A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.
But this method signature looks nothing like the:
success : function(msg) {//On Successfull service call
ServiceSucceeded(msg);
}
Object that we seem to be passing in.
Questions:
1) What does function(msg){ServiceSucceeded(msg)} mean?
2) What is 'msg' in this context?
3) How on earth am I meant to know how to structure the method sugnature for sucess?
Perfectly reasonable question. :-) In JavaScript, you don't necessarily have to call a function with as many args as it defines, and you don't have to define as many args as you may get called with. Which can be confusing if you're used to more constrained environments. :-)
Answering specifics:
1) What does function(msg){ServiceSucceeded(msg)} mean?
It defines a function (an anonymous one) that accepts one named argument (msg) and calls ServiceSucceded passing in that arg. jQuery will call the function with the three arguments defined by the jQuery documentation for the success function, but this particular success function is only using the first of those (data). More about named functions vs. anonymous functions here.
2) What is 'msg' in this context?
The first argument to the function. jQuery's docs call this first argument data, but you can call it whatever you like.
3) How on earth am I meant to know how to structure the method sugnature for sucess?
You did the right thing, it's in the jQuery documentation.
This thing about function arguments can be confusing, so let's do some examples:
function foo(arg) {
alert(arg);
}
That's perfectly clear, I'm defining a function called foo that takes a single named argument, arg. And thus:
foo("Hi there"); // alerts "Hi there"
But I can also do this:
foo(); // alerts "undefined"
There, I didn't give any arguments for foo, and so within foo, arg is undefined.
I can also do this:
foo("Hi there", "again"); // alerts "Hi there"
I'm calling foo with two arguments, but foo only makes use of one of them.
I could define foo to use as many arguments as you pass in:
function foo() {
var index;
for (index = 0; index < arguments.length; ++index) {
alert(arguments[index]);
}
}
arguments is an automatic thing all functions have, which is a pseudo-array (it's not really an Array) of the actual arguments the function was called with. And so:
foo("Hi there", "again"); // alerts "Hi there", and then alerts "again"
You can even mix named and unnamed arguments:
function foo(arg) {
var index;
alert(arg);
for (index = 1; index < arguments.length; ++index) {
alert("[" + arguments[index] + "]");
}
}
So now
foo("Hi there", "again"); // alerts "Hi there" and then alerts "[again]"
Note the [] around the second alert, because I started looping with index 1 rather than zero.
arguments and named args are connected:
function foo(arg) {
alert("arg = " + arg);
alert("arguments[0] = " + arguments[0]);
arg = "Updated";
alert("arg = " + arg);
alert("arguments[0] = " + arguments[0]);
}
If I do foo("Hi");, that shows these alerts:
arg = Hi
arguments[0] = Hi
arg = Updated
arguments[0] = Updated
(It goes the other way, too, if you update arguments[0].)
The function is passed 3 parameters: data, status, and the jqXHR object. data is what is returned from the AJAX call, status is the HTTP status code (I think), and jqXHR is a jQuery wrapped XHR object.
In this script, they only care about the data parameter, and not the other two.
So using success: function(msg), they only get the data parameter. The other two are sent, but ignored.
ServiceSucceeded is just a function that is being called with the data parameter sent to it.
success: ServiceSucceeded could have also worked here.
It means the success handler invokes ServiceSucceeded with the response of the request.
msg contains the response from the request. msg maps to data in the jQuery documentation.
You need to look into the jQuery documentation for finding the signature.
This is an anonymous function.
It's like a regular function, but without a name.
msg is the function's first parameter.
By reading the documentation.
jquery Ajax is a way for you to communicate with the server (PHP, ASP, whatever). Let's assume you use PHP. the function "callService()" send a request to "varUrl" (validation.php, i.e) and get (or POST -> varType) the content (varContentType -> valdation.php?id=1231&whatever=soemthing). The purpose of this is to get some server side data without reloading the page. If you want the validation.php to echo some html, then the dataType in the Ajax function must be "html". See jquery.com for more info on dataType.
The success parameter is a function handler for the server response. Success is called if you get a response from the server corresponding to the dataType you asked (html, json, text, whatever). In that perticular case, if the server respond correctly, the function "ServiceSucceeded" is called with the attribute "msg" which is the server response you asked for.
1) That function is called if the AJAX request is successful i.e. a success status code is returned by the server being contacted.
2) I would assume that 'msg' is the data returned from the server. The other two arguments are not supplied and therefore not used.
3) Use the Jquery documentation, and fiddle around until you get what you want.
Even though the success function is defined as taking three parameters (as per the documentation you quoted), those three parameters are not mandatory - Javascript is very forgiving about this sort of thing; if you miss a parameter from a function call, it simply gets set to underfined, so as long as you don't try to use it, JS won't throw any errors.
The code you've provided only gives one parameter - msg - but in JS, this is perfectly valid; it just means that msg will be the data parameter defined in the docs, and textStatus and jqXHR will be undefined.
This is fine, as long as in your success function you don't actually want to use either of those parameters. If you want to use them, then pass them, but if not, it's fine to drop them. You're writing the success function, so you get to decide which of the three parameters to use.