Develop Reference

Passing a Javascript Function as Parameter - How Does This Logic Work?

I don't understand how the responseHandler function below is receiving a response from an API call, after a payment form submission. Here is a brief summary of the code:
var PaymentThing = function(e) {
this["clientCallback"] = e;
return {
createToken: function() {
// HTTP GET URL is generated and then an HTML script element is appended to the page head
var a = "https://example.com/securitytoken?creditcard=xxxx?callback=PaymentThing.callback";
var f = document.createElement("script");
f.src = a;
document.getElementsByTagName("head")[0].appendChild(f)
},
callback: function(e) {
this["clientCallback"](e.status, e.results)
}
}
}
var responseHandler = function(status, response) {
// How does this even work?
console.log(response, status);
}
// Form Submission
jQuery('#checkout_payment_form').submit(function() {
PaymentThing.createToken(responseHandler);
}
So my question is, how does the responseHandler function receive the response from the HTTP GET call? It looks to me like the HTTP call isn't even being made. I only see a URL being added to an HTML script element (with the createToken function), with the URL never even being called/executed (but somehow it is?). Also, how are the (status, response) parameters passed into the responseHandler function when I don't see them being passed into a responseHandler function call?
I don't understand the logic or order of operations here, can anyone please explain what's going on?
EDIT:
Ok I think I see now how the responseHandler function is receiving the status and response parameters. I edited the code above to show there's a callback function in the generated HTTP url. But still, how is that URL being called? It still looks to me like it's inert and being stuck into the HTML of the page and not activating.

I think if you run the responseHandler function and store the result in a variable that can be called as a parameter in the PaymentThing.createToken() it will take it in consideration.

None of the code there calls responseHandler. There is no point in passing it to the createToken method as it completely ignores all the arguments.
It is possible that the script which is added to the page attempts to call a global function named responseHandler, but there's no way to tell without inspecting the script.

Using GET method to get href attribute of an object

What i'm trying to do is what i thought would be quite easy, but it doesnt seem to be working. I want to get the href of an object and all the function is returning is undefined.
This is the page that i'm requesting and what i'm trying to retrieve is the href held in the element of the first seller (who's ClassName is ui-link-inherit)
var buy = $.get(
"http://m.roblox.com/items/24826737/privatesales/",
function (data){
alert($(data).find(".ui-link-inherit:eq(0)").attr('href'));
}
);
I thought it was a permissions issue at first but it still wont work even if you run that on the page.

Did you tried to just alert the data you get?
If there is no .ui-link-inherit ofc it wont work and since .ui-link-inherit seems to be a class of jqueryUI which adds the classes after the page is loaded via javascript, you wont get this class via GET
//EDIT: I dont get all this "you cant access the data cause ajax is asynchronus". He is using the get-fukction completely right. He can access data since data IS the returned stuff from the server. Did I miss something that you all get this that way?

You cannot return a value from that function, it is executed asynchronously. Instead just wait for the AJAX to finish and then do something with the result
// don't do this
// var buy = $.get(... etc...);
// the variable buy will never have any value
// do this instead
function getHREF(){
$.get(
"http://m.roblox.com/items/24826737/privatesales/",
function (data){
var buy = $(data).find(".ui-link-inherit:eq(0)").attr('href');
doSomething(buy);
}
);
)};
function doSomething(buy) {
// in here do whatever you want with the ajax data
}
$(document).ready(function () {
getHREF();
});

The site does not allow Cross-site HTTP requests. Read here: HTTP access control

Intercepting a Jquery AJAX request to insert additional variables?

Is there any way to intercept an ajax request being made via jquery, to insert additional variables into it?
I know that .ajaxStart() lets you register a callback which triggers an event whenever an ajax request begins, but what I'm looking for is a way to cancel that ajax request if it meets certain criteria (e.g url), insert some more variables into its content, and then submit it.
This is for a plugin for a 3rd party software whose own code can't be changed directly.
Edit: Seems like .ajaxSetup() lets you set some global variables related to ajaxRequests. If I registered a beforeSend function, would that function be able to cancel the request to make a different one on meeting certain criteria?

Figured it out, this was the code I used:
jQuery(document).ready(function()
{
var func = function(e, data)
{
//data.data is a string with &seperated values, e.g a=b&c=d&.. .
//Append additional variables to it and they'll be submitted with the request:
data.data += "&id=3&d=f&z=y";
return true;
};
jQuery.ajaxSetup( {beforeSend: func} );
jQuery.post('example.php', {a : 'b'}, 'json');
} );
To cancel the request, returning false from func seemed to work.

Modifying the DOM based on an AJAX result with jQuery

I'm unsure of the best practice for modifying the DOM based on an ajax response. I'll try to let the code do the talking because it's hard to explain.
// page has multiple checkboxes
$("input[type='checkbox']").live('click', function {
var cb = $(this); // for the sake of discussion i need this variable to be in scope
$("form").ajaxSubmit({ dataType: "script" });
}
The server sends a response back, and the js gets eval'd and that means "cb" is out of scope.
What I've done so far is create a couple of helper functions:
var target = undefined;
function setTarget(val) {
target = val;
}
function getTarget() {
return target;
}
And that turns the first snippet of code into this:
// page has multiple checkboxes
$("input[type='checkbox']").live('click', function {
setTarget($(this));
$("form").ajaxSubmit({ dataType: "script" });
}
Then on the server's response I call getTarget where I need to. This seems hackish... Any suggestions?

It's unclear what you're actually trying to do, but I feel like you want to be looking at the success parameter for that AJAX call. The success callback function should execute in parent scope and do what you're looking for.
See 'success' on this page in the jQuery docs.

So what you are trying to do is get the form to submit the content via ajax whenever the user checks/unchecks a checkbox? And because there are several checkboxes, you need to find out which one triggered the submit, so you can change its value to whatever is stored on the server?
If you submit the entire form everytime, why don't you reply with all the checkboxes values, and then change each and every one of them? If not, get the server to reply with the id and the value of the checkbox, then use jquery to find the checkbox with that ID and then change it's value.

How about:
jQuery(function($) {
// give it scope here so that the callback can modify it
var cb,
cbs = $('input[type="checkbox"]');
cbs.live('click', function {
// taking away var uses the most recent scope
cb = $(this);
// disable checkboxes until response comes back so other ones can't be made
cbs.attr('disabled', 'true'); // 'true' (html5) or 'disabled' (xhtml)
// unless you are using 'script' for something else, it's best to use
// a callback instead
$('form').ajaxSubmit({
success : function(response) {
// now you can modify cb here
cb.remove(); // or whatever you want
// and re-enable the checkboxes
cbs.removeAttr('disabled');
}
});
}
});

How to Force Javascript to Execute within HTML Response to Ajax Request

We're using Prototype for all of our Ajax request handling and to keep things simple we simple render HTML content which is then assigned to the appropriate div using the following function:
function ajaxModify(controller, parameters, div_id)
{
var div = $(div_id);
var request = new Ajax.Request
(
controller,
{
method: "post",
parameters: parameters,
onSuccess: function(data) {
div.innerHTML = data.responseText;
},
onFailure: function() {
div.innerHTML = "Information Temporarily Unavailable";
}
}
);
}
However, I occasionally need to execute Javascript within the HTML response and this method appears incapable of doing that.
I'm trying to keep the list of functions for Ajax calls to a minimum for a number of reasons so if there is a way to modify the existing function without breaking everywhere that it is currently being used or a way to modify the HTML response that will cause any embedded javascript to execute that would great.
By way of note, I've already tried adding "evalJS : 'force'" to the function to see what it would do and it didn't help things any.

The parameter is:
evalScripts:true
Note that you should be using Ajax.Updater, not Ajax.Request
See: http://www.prototypejs.org/api/ajax/updater
Ajax.Request will only process JavaScript if the response headers are:
application/ecmascript,
application/javascript,
application/x-ecmascript,
application/x-javascript,
text/ecmascript, text/javascript,
text/x-ecmascript, or
text/x-javascript
Whereas Ajax.Updater will process JS is evalScripts:true is set. Ajax.Request is geared toward data transport, such as getting a JSON response.
Since you are updating HTML you should be using Ajax.Updater anyways.

Does setting evalScripts: true as an option help?

You should be able to do something like this:
div.innerHTML = "<div onclick='someOtherFunctionTocall();'>";
If you need to execute something at the same time as injecting the HTML, can you modify the signature of ajaxModify() by passing another parameter, which will be the javascript function you're going to execute (if it's not null - which let's you keep it optional, as you surely won't want to execute something on EVERY AJAX response).

Just execute a custom my_function() after the ajax response
div.innerHTML=...ajax response text...
my_function()
then execute any function inside the custom my_function()
function my_function() {
function_1()
...
}
Note that my_function() should be somewhere outside the div.innerHTML.

you need to use eval() function to run the javascript in Ajax repose
this can be use full to separate the script and run it
function PaseAjaxResponse(somemixedcode)
{
var source = somemixedcode;
var scripts = new Array();
while(source.indexOf("<script") > -1 || source.indexOf("</script") > -1) {
var s = source.indexOf("<script");
var s_e = source.indexOf(">", s);
var e = source.indexOf("</script", s);
var e_e = source.indexOf(">", e);
scripts.push(source.substring(s_e+1, e));
source = source.substring(0, s) + source.substring(e_e+1);
}
for(var x=0; x<scripts.length; x++) {
try {
eval(scripts[x]);
}
catch(ex) {
}
}
return source;
}
alliteratively for more information see this
http://www.yasha.co/Ajax/execute-javascript-on-Ajax-return/article-2.html