We Keep Coding

Why does inner method's inside execute last?

At following method i'm trying to get grid selected row. By the way, i use syncfusion component library.
My question when i call the grid.rowSelected, function's inside works last. So i can't pass model in ajax.
What's the reason of it ?
function editPackage() {
var editPackageModel;
var grid = document.getElementById("Grid").ej2_instances[0];
grid.rowSelected = function(args) {
console.log(args.data);*// works last*
editPackageModel = args.data;*// works last*
}
$.ajax({
type: "GET",
url: "/Package/Edit",
contentType: "application/json; charset=utf-8",
datatype: "json",
data: editPackageModel,
success: function (result) {
$('#generalModal').html(result);
},
error: function () {
alert("Dynamic content load failed.");
}
});
}

I'm not sure exactly what is the situation with "grid", i assume you have that element ready before the function is called, so try this:
var grid = document.getElementById("Grid").ej2_instances[0];//Get node reference.
grid.rowSelected = function (args) {//Setup event listener.
editPackage(args.data);//Pass the data from the event to your function
}
function editPackage(editPackageModel) {//Get the "model" and send ajax
$.ajax({
type: "GET",
url: "/Package/Edit",
contentType: "application/json; charset=utf-8",
datatype: "json",
data: editPackageModel,
success: function (result) {
$('#generalModal').html(result);
},
error: function () {
alert("Dynamic content load failed.");
}
});
}

Call function after ajax load()

I initiate a function after an ajax load(), but the function I intimate calls upon an additional function, which isn't working. How do I initiate ajaxstuff() after load()?
function ajaxstuff(data) {
$.ajax({
type: "POST",
url: "do-it.php",
data: {data},
success: function() {
console.log('I got this far'); // this doesn't work / isn't called
}
});
}
function doit() {
$('form').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
console.log('I got this far'); // this works
ajaxstuff(formData);
}
}
$('.popup-loader').click(function() {
$(this).append('<div class="popup"></div>');
$('.popup').load('popup.php', function() {
doit(); // this works
}
});

Check for errors in your console, also, in your AJAX add an async option. set it to FALSE ("Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called"):
function ajaxstuff(data) {
$.ajax({
async: false,
type: "POST",
url: "do-it.php",
data: data,
success: function(result) {
console.log(result); //check in your console for errors
}
});
}

Syntax error in ajaxstuff function. data: {data}, , probably should be data: data,
Also when you're passing a FormData object to $.ajax, you have to specify processData: false and contentType: false
$.ajax({
type: "POST",
url: "do-it.php",
data: data,
processData: false,
contentType: false,
success: function() {
console.log('I got this far');
}
});

calling function from another function not working

I have 2 functions on a webpage, function A should be loaded at page generation (init), then after every 60 seconds OR when "Button1" is clicked and the Ajax Post is successful.
This is what I have so far:
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$(function A() {
$.ajax({
url: "url",
type: "post",
datatype: "html",
data: {var1: "123"}
},
complete: function() {
setTimeout(A, 60000);
}
});
});
$(document).ready(function() {
console.log( "ready!" );
$('#Button1').click(function() {
$.ajax({
url: "url",
type: "post",
datatype: "html",
data: {var2: "123"},
success: function(data){
console.log( "Function Successful!" );
A(); //CALL FUNCTION A - NOT WORKING
},
}); //End of AJAX
});
});
</script>
Function A alone works perfectly.
When I click on Button1 I got in the console a "Function Successful" message, BUT Function A is not being triggered.
How can I run function A when Button1 is clicked and Ajax is successful?

Define your function in same scope. Currently you have defined your function A in another scope.
$(document).ready(function() {
function A() {
$.ajax({
url: "url",
type: "post",
datatype: "html",
data: {var1: "123"},
// remove this},
complete: function() {
setTimeout(A, 60000);
}
});
}
$('#Button1').click(function() {
$.ajax({
url: "url",
type: "post",
datatype: "html",
data: {var2: "123"},
success: function(data){
console.log( "Function Successful!" );
A(); //CALL FUNCTION A
},
}); //End of AJAX
})
});

To have the function running once while initiated and then use it again later you could create an anonymous function that returns itself like this:
var A = (function A() {
// do the functions stuff
return A;
})();
When you want to run it again it can be called using A():
$(document).ready(function() {
var A = (function A() {
// stuff here
return A;
})();
$('#Button1').click(function() {
$.ajax({
url: "url",
success: function(data){
A(); //CALL FUNCTION A
}
});
})
});

Functions with Variable Arguments in javascript/jQuery

I need and advice.
This is my issue, I have "N" functions.
var FirstOne = function(){
return $.ajax({
type: "POST",
url: hrefUrl,
data: JSON2.stringify(option),
contentType: "application/json; charset=utf-8",
dataType: "json",
error: function(status){
},
success: function(data){
}
});
};
var SecondOne = function(){
return $.ajax({
type: "POST",
url: hrefUrl,
data: JSON2.stringify(option2),
contentType: "application/json; charset=utf-8",
dataType: "json",
error: function(status){
},
success: function(data){
}
});
};
.............
var NOne = function(){
return $.ajax({
type: "POST",
url: hrefUrl,
data: JSON2.stringify(optionn),
contentType: "application/json; charset=utf-8",
dataType: "json",
error: function(status){
},
success: function(data){
}
});
};
all these function arr pushed in an object which is this .
var funcObject= [FirstOne(), SecondOne(), ....... NOne() ];
after I am waiting when all Ajax functions are done with and and after I am fine.
$.when.apply($, funcObject).done(function (a1, a2, ...an) {
// ..... here already doesn't matter
});
my issue is here:
function (a1, a2, ...an)
I want to have instead function arguments an object because I do not know how many function is going to be.
So i can edit function object, which is cool $.when.apply($, fucArr), problem is to use variable numbers of arguments .
PS: Maybe I can use "apply" or "call" for these arguments as well?
Can someone give me an idea here. Thanks A lot guys!!!

You can access all arguments passed to a method using the arguments keyword eg:
function () {
Console.log(arguments); //arguments is an array
}
The apply method can be used to use these arguments in another function call:
function () {
someFunction.apply(this, arguments);
}

Jquery ajax: pass the scope to set it

I have this class with this ajax call:
Person = function () {
this.__type = "PersonDto:#Empower.Service.Common.Dto";
this.Name = undefined;
this.Surname = undefined;
this.GetById = function (id) {
return $.ajax({
type: "POST",
url: "/Services/PersonService.svc/GetPersonById",
data: JSON.stringify(id),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
...
this = data;
...
}
});
}
};
In success of ajax call i want to set the current instance of person, but "this" is not scope correct for setting.
There is a more elegant way than using a global variable?
Thank you in advance for your help, and I apologize for my bad English

The jQuery.ajax()[docs] method gives you a context property where you can set the value of this in the callbacks.
Just do:
context: this,
...in your call, as in:
this.GetById = function (id) {
return $.ajax({
type: "POST",
context: this, // <---- context property to set "this" in the callbacks
url: "/Services/PersonService.svc/GetPersonById",
data: JSON.stringify(id),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
// in here, "this" will be the same as in your "getById" method
}
});
}

You don't need a global.
Just put:
var self = this;
immediately before the return $.ajax(...) line, and then use self to reference the current instance inside the AJAX callback function.
This variable will only be in scope within the GetById() funciton.

Sure, you can put this to a variable and then use that variable in your callback
var self = this;
this.GetById = function (id) {
return $.ajax({
type: "POST",
url: "/Services/PersonService.svc/GetPersonById",
data: JSON.stringify(id),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
...
self = data;
...
}
});
}