I have a problem with my class where I set a callback function to fire after an ajax request, this works fine except for the callback then having this= window instead of this = the calling class. I have tried fiddling with the bindings etc to no avail. any help appreciated.
<?php
if (isset($_POST['id'])){
echo json_encode(array('key' => 'val'));
die;
}
?>
<script type="text/javascript" src="/linkup/js/mootools-core-1.4.3-full-compat-yc.js" charset="utf-8"></script>
<script type="text/javascript" src="/linkup/js/mootools-more-1.4.0.1.js" charset="utf-8"></script><script>
var myClass = new Class({
blah: function(){
console.log('this worked ok');
},
foo: function(){
this.blah(); // at this point it is failing with "unknown function"
},
bar: function(){
this.reqJSON({id:1,req:'grabpoints'},this.foo);
},
// data - an aray containing some data to post {id:1,req:'grabpoints'}
// onS - a function to fire on return of data
reqJSON: function(data,onS){
if (this.jsonRequest) this.jsonRequest.cancel();
this.jsonRequest = new Request.JSON({
url: 'test.php',
onRequest: function (object){
console.log('sending json');
},
onSuccess: function (object){
console.log('json success');
onS(object);
}
}
).post(data);
},
});
var o = new myClass();
o.bar();
this is never part of an inherited scope (i.e. the closure) for a function, but instead determined when the function is called, in this case by onS(object). Called this way, the function is just that - a function. You need to call this.onS(object), but this won't work in your case because the onSuccess function does not know about this either.
To call the foo/onS function with the outermost object as this you must save a reference to it in another variable, commonly called that:
reqJSON: function(data,onS){
var that = this;
...
onSuccess: function (object){
console.log('json success');
that.onS(object);
}
change this
bar: function(){
this.reqJSON({id:1,req:'grabpoints'},this.foo);
}
to :
bar: function(){
var self = this;
this.reqJSON({id:1,req:'grabpoints'},self.foo);
}
Related
Please refer the below example code
var report = {
chartTypes : null,
init: function () {
this.getChartTypes(function(data){
this.chartTypes = data;
});
},
getChartTypes: function(callback) {
$.ajax({
data:'',
url:'',
success:function(response){
chartTypes = JSON.parse(response);
callback(chartTypes);
}
});
},
getToolbar:function() {
this.chartTypes --------------- NULL
}
}
getChartTypes function load different chart types via AJAX. Therefore i put it as a callback function. Data is received successfully. But when i use this.chartTypes in a different function like getToolbar it says this.chartTypes is null. Even i have initialized the same in the starting. May be scope issue. Please advise.
You are assigning to a variable (probably global) called chartTypes, but that isn't the same as reoprt.chartTypes. You need to assign to this.chartTypes, but this in your anonymous function won't be the same as this outside it, so you need to remember that value using another variable:
getChartTypes: function(callback) {
var self = this;
$.ajax({
data:'',
url:'',
success:function(response){
callback( self.chartTypes = JSON.parse(response) );
}
});
}
With an OOP approach, most developers would use a method and use .bind() to maintain the proper scope when the asynchronous success method is triggered. This way you do not have to worry about closures and using variables to hold the scope of this.
var report = {
chartTypes : null,
init: function () {
this.getChartTypes();
},
getChartTypes : function(callback) {
$.ajax({
data:'',
url:''
}).done(this._setSuccessResponse.bind(this));
},
_setSuccessResponse : function(data){
this.chartTypes = data;
},
getToolbar : function() {
console.log(this.chartTypes);
}
}
You also need to make sure that when you call getToolbar that the Ajax call has also been completed.
I am using the modular design pattern for JS and I keep running into issues when using arguments bound functions. I have a particular function that I would like to bind to different events to keep from having to write the function for each bound event. The only difference in the function, or the argument, is the table that will be updated. The problem is that when I build a function with the arguments I need and pass those arguments to bound events, I get an undefined error, in the console, on load. Keep in mind, I want to stick with this design pattern for the security it offers.
Here is my JS:
var Users = (function(){
var $addRoleForm = $('#addUserRole');
var $rolesTableBody = $('#table-roles tbody');
$addRoleForm.submit(ajaxUpdate(event, $rolesTableBody));
function ajaxUpdate(event, tableName) {
event.preventDefault();
event.stopPropagation();
var url = this.action;
var data = $(this).serialize();
var $this = $(this);
$.ajax({
type: 'POST',
url: url,
dataType: 'json',
data: data,
success: function(data) {
if(data.st === 0){
$messageContainer.html('<p class="alert alert-danger">' + data.msg + '</p>');
setTimeout(function(){
$messageContainer.hide();
}, 7000);
} else {
$messageContainer.html('<p class="alert alert-success">' + data.msg + '</p>');
tableName.fadeOut().html('').html(data.build).fadeIn();
$this.find('input').val('');
setTimeout(function(){
$messageContainer.hide();
}, 7000);
}
},
error: function(xhr, status, error){
console.log(xhr.responseText);
}
});
}
})();
Here is the error I get in the console, on load:
Uncaught TypeError: Cannot read property 'preventDefault' of undefined
I have tried to bind the event like this: $addRoleForm.on('submit', ajaxUpdate(event, $rolesTableBody)); and receive the same results.
Any ideas how to fix this?
You're seeing that issue, because the way you have it written now, ajaxUpdateexecutes, returns undefined and THEN passes undefined to the event listener, so you're basically doing this: $addRoleForm.submit(undefined).
2 Choices here:
1) You can wrap it in an anonymous function:
$addRoleForm.submit(function(event) {
//pass the value of "this" along using call
ajaxUpdate.call(this, event, someValue);
});
$someOtherForm.submit(function(event) {
//pass the value of "this" along using call
ajaxUpdate.call(this, event, someOtherValue);
});
2) You can set the first argument in-advance using bind:
$addRoleForm.submit(ajaxUpdate.bind($addRoleForm, someValue));
$someOtherForm.submit(ajaxUpdate.bind($someOtherForm, someOtherValue));
Using this way, you're binding the value of this to be $addRoleForm, setting the first argument to always be someValue, so it's the same as:
ajaxUpdate(someValue, event) {
//value of "this" will be $addRoleForm;
}
To pass the event, and the custom argument, you should be using an anonymous function call
$addRoleForm.submit(function(event) {
ajaxUpdate(event, $rolesTableBody));
});
This is by far the easiest and most readable way to do this.
What you're doing right now equates to this
var $addRoleForm = $('#addUserRole');
var $rolesTableBody = $('#table-roles tbody');
var resultFromCallingFunction = ajaxUpdate(event, $rolesTableBody); // undefined
$addRoleForm.submit(resultFromCallingFunction);
Where you're calling the ajaxUpdate function, as that's what the parentheses do, and pass the returned result back to the submit callback, which in your case is undefined, the default value a function returns when nothing else is specified.
You could reference the function, like this
$addRoleForm.submit(ajaxUpdate);
but then you can't pass the second argument
The question refers to the Revealing Module pattern. Benefit of using this design is readability. Going with the anon function may work, but defeats the overall purpose of the module pattern itself.
A good way to structure your module to help maintain your scope is to setup helper functions first, then call a return at the end.
Example use case with events:
var User = function() {
// local VARS available to User
var addRoleForm = document.querySelector('#addUserRole');
var rolesTableBody = document.querySelector('#table-roles tbody');
// Helper function 1
function ajaxUpdate(tableName) {
...
}
// Helper function 2
function someFunc() {
...
}
function bindEvents() {
addRoleForm.addEventListener('submit', ajaxUpdate, false);
addRoleForm.addEventListener('click', someFunc, false);
}
function init() {
bindEvents();
}
return {
runMe:init
}
}().runMe();
Helps to "modularize" your workflow. You are also writing your revealing pattern as an IIFE. This can cause debugging headaches in the future. Editing the IIFE to instead invoke via the return is easier to maintain and for other devs to work with and learn initially. Also, it allows you to extend outside of your IFFE into another Module, example:
var Clothes = function() {
function anotherFunc() {
...
}
init() {
User.runMe();
anotherFunc();
}
return {
addClothes: init
}
}().addClothes();
I hope this helps to give you a better understanding of how/when/why to use the JS revealing pattern. Quick note: You can make your modules into IIFE, that's not a problem. You just limit the context of the scope you can work with. Another way of doing things would be to wrap the var User and var Clothes into a main module, and then make that an IIFE. This helps in preventing polluting your global namespace.
Example with what I wrote above:
// MAIN APPLICATION
var GettinDressed = (function() {
// MODULE ONE
///////////////////////////
Var User = function() {
// local VARS available to User
var addRoleForm = document.querySelector('#addUserRole');
var rolesTableBody = document.querySelector('#table-roles tbody');
// Helper function 1
function ajaxUpdate(tableName) {
...
}
// Helper function 2
function someFunc() {
...
}
function bindEvents() {
addRoleForm.addEventListener('submit', ajaxUpdate, false);
addRoleForm.addEventListener('click', someFunc, false);
}
function init() {
bindEvents();
}
return {
runMe:init,
style: someFunc
}
}();
// MODULE TWO
//////////////////////////
var Clothes = function() {
function anotherFunc() {
...
}
init() {
User.style();
anotherFunc();
}
return {
dressUp: init
}
}();
// Define order of instantiation
User.runMe();
Clothes.dressUp();
}());
I have a simple .html page like this :
</html>
<head>
<script type="text/javascript" src="jquery/jquery-1.8.2.js"></script>
...
<script type="text/javascript">
var obj;
function document_load() {
obj = new mySpace.myClass();
console.log("end document load");
}
</script>
</head>
<body onload="document_load()">
...
...
</body>
</html>
myClass is a TypeScript class with this constructor :
public constructor() {
console.log("begin constructor");
(<any>$).when(
jQuery.getJSON('path/myJson1.json', function (data) {
this.obj1 = data;
console.log("here1");
}),
jQuery.getJSON('path/myJson2.json', function (data) {
this.obj2 = data;
console.log("here2");
})
).then(function () {
if (this.obj1 && this.obj2) {
console.log("here3");
this.obj3 = new myClass3();
this.obj4 = new myClass4();
console.log("everything went ok");
}
});
}
Actually the console prints this :
begin constructor
end document load
here1
here2
The reason of this behaviour is (of course) cause of asynchronous jQuery calls (or at least I guess). How can I obtain the following behaviour?
begin constructor
here1
here2
here3
everything went ok
end document load
I clarify that the jsons are taken correctly (I tried to print them and they are correct).
That's because you're not returning a promise to jQuery.when, so the callback gets called and this.obj1 && this.obj2 are both null.
A better way to do this would be:
(<any>$).when(
jQuery.getJSON('path/myJson1.json'),
jQuery.getJSON('path/myJson2.json')
)
.then(function (obj1, obj2) {
// Code
});
Replace all functions with arrow functions (=>). This will ensure that "this" points to the correct thing in all function bodies.
More : https://www.youtube.com/watch?v=tvocUcbCupA
I have web application in Backbone.js that is using Stripe payment system.
This is part of the model code:
App.Models.Payment = Backbone.Model.extend({
defaults: {
id:null
},
url: function() {
// code
},
initialize:function(){
this.id='';
this.saveClicked= false;
this.saveDetailsChecked= true;
}
this model is used in this view:
App.Views.BillingView = Backbone.View.extend({
el: '#billing-fields',
events: {
'click #billing-footer-buttons .navigation .confirm-btn': 'saveCardClicked'
},
initialize:function(models, options) {
Stripe.setPublishableKey('**********************');
var self = this;
},
saveCardClicked:function(e) {
e.preventDefault();
if (this.model.saveClicked) return false;
this.model.saveClicked = true;
var $form = $('#payment-form');
Stripe.createToken($form, this.stripeResponseHandler);
},
cancelClicked:function() {
vent.trigger('showScreen', 'subscribe-container');
},
stripeResponseHandler:function(status, response) {
var $form = $('#payment-form');
self.saveDetailsChecked = document.getElementById("billing-checkbox").checked;
var atr1 = document.getElementById("billing-card-number").value;
var atr2 = self.model.savedCard;
if(document.getElementById("billing-card-number").value == self.model.savedCard){
self.model.set('use_saved_card','1');
vent.trigger('doPayment');
}else{
if (response.error) {
// code
} else {
// code
}
}
self.saveClicked = false;
}
});
In the saveCardClicked function I am able to access the variables from the model like the saveClicked variable.
But in the stripeResponseHandler I am not able to access the 'saveClicked' variable from the model, in this function this refers to window, and self variable that is defined in the initialize function cannot be accessed also.
stripeResponseHandler is called from the Stripe API.
Is there any way that I can access the savedCard variable in the stripeResponseHandler function or I should use global variable?
Try to use this:-
Stripe.createToken($form, this.stripeResponseHandler.bind(this));
Sure, you can use bind.
Bind works by binding parameters to a certain function call, and will return a function that, when invoked, will be passed the parameter that you declared when calling bind (plus, actually, any other expected parameter that you didn't declared). There is a special parameter to pass to bind. The first one, and it is the this object that will be used when the function is called.
So, what you would do is to call
Stripe.createToken($form, this.stripeResponseHandler.bind(this));
here you are declaring a callback (stripeResponseHandler) that when invoked, will have this as this object (I know the phrase is convoluted, but I think you got it).
Also, keep in mind that your line
var self = this;
is not working as well as it is scoped to the initialize function, thus not visible outside of it.
Say I have some code like this
function Chart(start, end, controller, method, chart)
{
console.log('Chart constructor called');
this.start = start;
this.end = end;
this.controller = controller;
this.method = method;
this.chart = chart;
this.options = {};
}
Chart.prototype.update = function()
{
console.log('update ' + new Date().getTime());
$.getJSON('index.php', {
controller: this.controller,
method: this.method,
START: this.start,
END: this.end },
function(json) { this.draw(json); }); //<-- Problem right here!
}
Chart.prototype.draw = function(json)
{
//lots of code here
}
I'm getting the error Uncaught TypeError: Object #<an Object> has no method 'draw'. Now, I'm the first to admit that I'm pretty new to Javascript. Am I supposed to call member functions in another way? Or am I supposed to do something different altogether?
edit: Here is how I'm creating my object:
chartObj = new Chart(start, end, 'OBF.RootCauses', 'ajaxRootCauses', chart);
The problem here is that this is changed because you are defining a new function - so this refers to the function you are in.
There are other ways how to get around this, but the simplest way would be to save this to a variable and call the function on that variable, something like this:
Chart.prototype.update = function()
{
console.log('update ' + new Date().getTime());
var self = this;
$.getJSON('index.php', {
controller: this.controller,
method: this.method,
START: this.start,
END: this.end },
function(json) { self.draw(json); });
}
See Chris's answer for a different approach for solving the same problem.
Since you're already using jQuery, you can change this line
function( json ) { this.draw( json ); });
to this:
$.proxy( this.draw, this ) );
That will preserve the context where the function was called (i.e., the this variable).