We Keep Coding

Jquery passing a function to a function

OK, i need some help,
i have a function inside a jquery plugin
var LoadPage = function (page, location, func){
$.ajax({
url: page,
success: function(data){
$(location).html(data); //Insert data into location
func
return true
},
});
}
i want to use it like this
Loadpage(
"api/page.php",
"#div_id",
$("#calander td.clickable").click(function() {
var day = $(this).attr("calendar-day");
console.log("clicked TD" + day);
LoadPage('/api/view_event.php?d='+day, settings.eventContainer);
})
);
or
Loadpage(
"api/page.php",
"#div_id",
function() {
var day = $(this).attr("calendar-day");
console.log("clicked TD" + day);
LoadPage('/api/php/calander/view_event.php?d='+day+'&m='+SelectedMonth+'&y='+SelectedYear, settings.eventContainer);
}
);
and then have it run that in the success: where var func is in it but unsure how to get this to work. please help internet.

There are three separate issues in your code:
1) If you want to execute the callback func in your success handler, then you need to add parens () after it as in func() as that is javascript's method of signifying that you want to execute a function.
var LoadPage = function (page, location, func){
$.ajax({
url: page,
success: function(data){
$(location).html(data); //Insert data into location
// add parens here after func
func();
return true
},
});
}
If you want the func argument to be optional, you can test for it before executing it like this:
var LoadPage = function (page, location, func){
$.ajax({
url: page,
success: function(data){
$(location).html(data); //Insert data into location
// add parens here after func to actually execute it
if (func) func();
return true
},
});
}
2) Then, you need to change how you call LoadPage() to pass it an actual function reference like this:
Loadpage(
"api/page.php",
"#div_id",
function() {
$("#calander td.clickable").click(function() {
var day = $(this).attr("calendar-day");
console.log("clicked TD" + day);
LoadPage('/api/view_event.php?d='+day, settings.eventContainer);
})
})
);
What you were passing it was the result of executing the .click function which is a jQuery object, not a function. Instead, you can wrap that in an anonymous function so you're passing a reference to that function. This is the opposite of the func(). You don't want parens after what you pass because you want to pass a reference to a function, not the result of executing the function now.
So, to summarize these two issues:
The statement:
func
is just a reference to a function. It doesn't actually execute the function. It is useful when you want to pass a reference to a function which will then call it LATER.
The statement:
func()
executes the function immediately. If you pass func() as an argument, then it will execute immediately (parens always mean to execute it now) and then pass the return value of that function (which is not what you want here).
3) You may also want to understand that the return true statement in your success handler does NOTHING. Because the ajax function is asychronous, your LoadPage() function just starts the ajax function and then returns immediately. Sometime later, the internals of the ajax engine calls your success handler. That return statement returns back into the interior of that ajax engine. It does NOT return from your LoadPage() function since that has already long since completed and returned nothing.
4) Possible fourth issue. Every time you call LoadPage(), you are going to add a new click handler to whatever objects this selector matches: "#calander td.clickable". If some of those objects existed previously, you will end up with multiple click handlers. In that case, you would either want to use delegated event handling so you could just install the click handler once ahead of time or you would need to remove the exist click handlers before installing the new ones or you would need to isolate only the newly added objects and only call it on them. If all "#calander td.clickable" are replaced by the previous code, then this would not be a problem.

Try this:
var LoadPage = function (page, location, func){
$.ajax({
url: page,
success: function(data){
$(location).html(data); //Insert data into location
func && func(); // this will execute func if it is passed as parameter
return true;
}
});
}
And use it in the second way.

Listen for a function to be called JavaScript

I have the following functions that is called every 2 seconds to load some data. It registers the function [do] to do the stuff with the response. (the example is simplified).
function doRequest (){
$.ajax({ url: 'www.google.com.pe', success: function (response) {do(response)} });
}
function do (text){
var i = setInterval(doRequest, 2000);
}
I wonder if there is any way that I can create a function that is called every time the [do] function is called with out needing to add a call to the listener inside the do function. If there is any better way to do it with jQuery, like a plugin I'd appreciate the help.
[Edit] The idea is not whether it works or not. My question was about if I can add a custom listener to the "do" function which was already implemented. Something like addActionListener("do", "after", doSomeThingElse),sSo I could do some thing else just after the do function has finished.

First, your simplified version won't work, because you'd need to pass the do function instead of calling it.
function doRequest (){
$.ajax({ url: 'www.google.com.pe', success: _do });
}
But it sounds like you're asking how to run some other code every time do is invoked.
If do is only invoked inside the doRequest() function, then just add your other code to an anonymous function that invokes do at the right time.
function doRequest (){
$.ajax({ url: 'www.google.com.pe', success: function(response) {
// Run your other code
// or invoke another function.
_do(response);
} });
}
If you want it to be more generalized, you can create a function decorator that returns a function which invokes do after some other code.
function doFactory(fn) {
return function() {
fn.apply(this, arguments);
_do.apply(this, arguments);
}
}
then make functions like this:
var doFoo = doFactory(function() {
console.log("foo");
});
If your requirement is more specific of a pre-processing of response, you could rework it like this:
function doFactory(fn) {
return function(response) {
_do.call(this, fn.call(this, response));
}
}
Then have the fn manipulate and return response.
var doFoo = doFactory(function(response) {
return response + "foo";
});

If you want to keep existing code as it is, you could wrap do() in another function which in turn calls do() and your new function (say do_this_as_well()).
See the example below (I renamed do() to do_this() to avoid confusion around the reserved keyword do). This works because global functions are nothing but variables with function objects in them. These variables can be overwritten, in this case with a new function that calls the old one:
function do_this(response) { ... }
(function()
{
var previous=do_this;
do_this=function(response) { previous(response); do_this_as_well(); }
})();

Replace
success: do(response)
with
success: function(response) { do(response); do_this_as_well(); }

Correct way to wait for ajax to return (I don't want to use the success handler.) [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can I get jQuery to perform a synchronous, rather than asynchronous, AJAX request?
how to wait for an ajax call to return
Hear me out. I completely understand this code segment.
$.getJSON(someURL, function(data){
//do something with my data
})
.success(function () {
//Call what you want on success
})
This seems fine if I just need to take one action that is pretty static. However, what if I want to be less restricted, for instance this
function my_func(){
$.getJSON(someURL, function(data){
//do something with my data... like modify an array or the dom
})
}
Now the driver
my_func();
//Now I want to call a function that relies on the data that my_func brought into the script.
Is there something wrong with the way I'm coding my script if I want to do it like this? Or am I just missing some awesome built in method?

I see two possible jQuery-ish ways there.
The first would be to use another callback that can be passed to my_func:
function my_func(callback) {
$.getJSON(someUrl, function(data) {
// ...do stuff ...
if ($.isFunction(callback)) { callback(data); }
});
}
my_func(function(data) {
// ..do more stuff..
});
The second way would be to create a custom event that gets triggered inside my_func and can be listened to from the outside:
function my_func() {
$.getJSON(someUrl, function(data) {
$(document).triggerHandler('my_func:data-received', [data]);
});
}
$(document).on('my_func:data-received', function(event, data) {
// ...do stuff...
});
my_func();
I strongly recommend using async: false only if it is absolutely necessary.
Just another (very neat) way to deal with this is the jQuery.Deferred object:
function my_func() {
var d = new $.Deferred();
$.getJSON(someUrl, function(data) {
d.resolve(data);
});
return d;
}
my_func().done(function(data) {
// ...do stuff...
});
Your function returns an object that allows to register callbacks. Within the function you then just need to make sure to call resolve to invoke all registered done callback handlers.

Then there's the XHR object:
var jqXHR = $.getJSON(someURL);
You can access it anywhere after it is defined:
jqXHR.always(function() {
alert('JSON IS COMLETE');
});
jqXHR.done(function(data) {
//do something with the returned data if success!
});
jqXHR.fail(function(jqXHR, textStatus) {
alert('JSON FAILED : '+textStatus);
});
FIDDLE
You could even do something like this:
$("#button").on('click', Myfunc);
function Myfunc() {
var jqXHR = runAjax();
jqXHR.done(function(data) {
alert($.parseJSON(data));
$("#result").html('JSON IS DONE');
});
}
function runAjax() {
return $.getJSON(someURL);
}
FIDDLE

You'd probably pass your function that runs on the data to my_func().
// v--------receive a callback
function my_func(callback_fn){
$.getJSON(someURL, callback_fn); // use the callback as the getJSON callback
}
then...
my_func(function(data) {
// do something with data
})
...or if the function you wanted to call was a named function, then of course you'd pass it by name...
my_func(someOtherFunction)
Either way, your my_func() function will use it as the callback to the $.getJSON call, which will invoke it when the data arrives.

JS Object, how to access objects from within myself

So, i see no reason why this isn't working but i am at a wall and frustrated. Why can't i call this.myself from within the wyr.message.close function? Maybe my understanding of this is scewed but i was sure this is referring to the object itself, not the function.
this.myself is undefined
Code:
wyr.message = {
myself: $('.message'),
init: function() {
if(this.myself.is(':visible')){
setTimeout(this.close, 5000);
}
},
close: function(){
this.myself.fadeOut(1200,function(){
this.myself.remove();
});
}
}

wyr.message = {
myself: $('.message'),
init: function() {
var self = this;
if(this.myself.is(':visible')){
setTimeout(function(){
self.close();
}, 5000);
}
},
close: function(){
this.myself.fadeOut(1200,function(){
$(this).remove();
});
}
}
The issue is context. Within the callback function passed to fadeOut, this is bound to the element being worked on by jQuery, not to the wyr.message object.
EDIT:
There's also an issue with the init method. SetTimeout will bind the value of this to the global (window) object - so we save a reference to the this we want and use that to invoke the close method.
You could also look into Function.prototype.bind, but it's not supported in older browsers.

First, javascript object literal property expressions are evaluated at the time you create the object instance. myself will be whatever that selector grabs at that time, which is probably nothing. The myself property needs to be a function if you want it to return the value of $('.message') at the time of invocation. As a consequence you'll need to change all uses to function calls as well.
Second, during the execution of the setTimeout callback, this is bound to the window object, so you need to qualify it appropriately:
wyr.message = {
myself: function() { return $('.message'); },
init: function() {
if(this.myself().is(':visible')){
setTimeout(this.close, 5000);
}
},
close: function(){
message.myself().fadeOut(1200,function(){
$(this).remove();
});
}
};
(Note, this will fade out and remove everything matching the selector when the timeout fires.)

calling a javascript function (in original function) from called function?

Is there anyway to calling a function from another function .. little hard to explain. heres in example. One function loads html page and when ready it calls the original function.
I think i need to pass in a reference but unsure how to do this... if i set it to "this" - it doesn't seem to work
ANy ideas?
order.prototype.printMe = function(){
order_resume.loadthis("myTestPage.html", "showData");
}
order.prototype.testme= function(){
alert("i have been called");
}
//Then when in "loadthis" need to call
orderRsume.prototype.loadthis= function(){
// DO SOME STUFF AND WHEN LOADS IT ARRIVES IN OnReady
}
order.prototype.OnReady= function(){
/// NEED TO CALL ORIGINAL "testme" in other function
}

It's not clear for me what you really want to do. In JS functions are first-class objects. So, you can pass function as a parameter to another function:
Cook("lobster",
"water",
function(x) { alert("pot " + x); });
order.somefunc = function(){
// do stuff
}
order.anotherone = function(func){
// do stuff and call function func
func();
}
order.anotherone(order.somefunc);
And if you need to refer to unnamed function from it's body, following syntax should work:
order.recursivefunc = function f(){
// you can use f only in this scope, afaik
f();
};

I slightly changed the signature of your loadthis function aloowing it to be passed the order to actually load.
I also assumed that your doSomeStuff function accepts a callback function. I assumed that it may be an AJAX call so this would be trivial to call a callback function at the end of the AJAX call. Comment this answer if you need more info on how to fire this callback function from your AJAX call.
order.prototype.printMe = function(){
order_resume.load(this, "myTestPage.html", "showData");
}
order.prototype.testme= function(){
alert("i have been called");
}
//Then when in "loadthis" need to call
orderRsume.prototype.load = function(order, page, action){
// DO SOME STUFF AND WHEN LOADS IT ARRIVES IN OnReady
doSomeStuff(page, action, function()
{
order.OnReady();
});
}
order.prototype.OnReady= function(){
/// NEED TO CALL ORIGINAL "testme" in other function
this.testme();
}