I am making an ajax call that returns XML. This XML needs to be handled differently based upon the section of the page within the site the user is on. Thus, I would like to implement 1 ajax function that makes the calls, and has a variable success function... I'm sure it is simple but I've searched for a while and cannot figure it out..
function makeAjaxCall(variableSuccessFunction) {
$.ajax.... (ajax stuff goes here)...
success: variableSuccessFunction(xml)
}
function ViewOne(xml) {
//take the XML and update the dom as appropriate
}
function ViewTwo(xml) {
//take the XML and update the dom as appropriate
}
$(document).ready(function() {
//be able to call either one of these functions
makeAjaxCall(ViewOne);
makeAjaxCall(ViewTwo);
}
You've basically got it! Just one tweak:
function makeAjaxCall(variableSuccessFunction) {
$.ajax.... (ajax stuff goes here)...
success: variableSuccessFunction // no (xml)
}
You're passing around function references. success is passed a reference to variableSuccessFunction (whatever that may be) and will call it just like it would if you had supplied an anonymous function to it. No need to invoke it inside of makeAjaxCall.
Related
I am displaying a throbber when I do an ajax post. Below is how I am doing it. I would like to make the code more concise. Could I extend $.post to do so? Other options? Thanks
//myThrobber is an object that displays a throbber in the center of the page
myThrobber.start();
$.post('somePage.php',myData,function (json){
myThrobber.stop();
//do whatever
},'json');
Here is how I'd write a postThrob function wrapped around $.post.
$.fn.postThrob = function (throbber, url, data, callback) {
throbber.start();
$.post(url, data, function (response) {
callback(response);
throbber.stop();
});
};
So now you can use $.postThrob instead of $.post. Just pass your throbber object in as the first argument.
If you don't want to pass your throbber obj in, you can use a global variable, though less preferable. Just don't create the object inside the function itself.
I still don't see much value in doing this though ;(
I have a separate HTML file that I am loading in via $.get() and then turning into a Bootstrap modal dialog:
$.get("src/html/foobar.html", function (data) {
var md = $(data).modal({
backdrop:'static',
keyboard: false
});
});
However, before I turn this into a modal dialog and show it, I want to load in some content from the server. We know from jQuery's documentation that $.get() returns a jqXHR object. Is there a way to somehow change the content of the HTML returned in the data before I show it as a modal?
EDIT: I should be a little more specific and ask what operations can I perform on the object to edit its contents.
You could, of course, just modify data inline within your callback function before passing it to .modal
However a neater mechanism is to just chain a .then call from the Promise that is the jqXHR object:
$.get(url).then(function(data) {
// modify the data here
...
return modified_data;
}).then(function(data) {
// show data modally
});
NB: this assumes jQuery 1.8 or later, with the improved (i.e. corrected) semantics for .then
To avoid writing lots of inline functions, make the modifier function and the modal function separate named functions, then you can write:
$.get(url).then(modify).then(display);
Promises are the "new" way (since jQuery 1.5) to allow for separation of responsibility - as you can see from the example above the Promise chain allows you to completely detangle the three separate acts of retrieving, modifying and subsequently displaying the remote data.
I have a function defined within $(document).ready() which arranges some JSON into HTML using DoT.js:
$(document).ready(function() {
function arrangeResults(jsonObject, templateFunc) {
$(jsonObject).each(function(i, item) {
$.each(item, function(i2, item2) {
$('#ajax-article-list .col-left').append( templateFunc(item2) );
});
});
};
I have an AJAX call on page load which executes this function to display the data:
$.post(ajaxRequestURL, function(data) {
arrangeResults(ajaxData.pages, projectTemplate);
}
and this works fine.
However I have a set of links which requests more/different JSON data using the click() handler, which should execute arrangeResults again with the returned data, but the function isn't executed:
$('nav.filters a').click(function(ev) {
ev.preventDefault();
$.post(ajaxRequestURL, function(data) {
ajaxData = parseJSON(data);
arrangeResults(ajaxData.pages, projectTemplate);
}
}
This doesn't work. The data is all valid, and everything works if I take the contents of arrangeResults and put them directly within the script, but I was hoping to follow DRY and have an external function that I could call upon both on pageload and when one of the filters is clicked.
I guess it's because the AJAX call is asynchronous but since the function call is within success I presumed this wouldn't cause a problem.
If I understand it right, you have first AJAX call inside $(document).ready() block.
So it could be because you have arrangeResults function inside your $(document).ready() block. Because of that you are unable to call the function from other part of JScript.
Define it like that:
function arrangeResults(jsonObject, templateFunc) {
...
}
$(document).ready(function() {
...
);
and so on.
Correct me if I wrong, please.
I have a page with multiple flash objects which are written by a third party and thus can't be changed. They call a JS function but don't seem to pass any identifying parameters. Is there any way to determine inside the function which flash object called it?
This may not be cross-browser compatible, and in the end you may find only that "Flash" is calling the function, rather than a specific movie, but this is the only way I can think of:
function myFunction() {
if (myFunction.caller) {
console.log("This function's caller is " + myFunction.caller);
}
else {
console.log("This function was called directly");
}
/* rest of function */
}
This should run in Firefox and will log to the console.
Unfortunately the only information a function gets from the place that called it is whatever parameters are passed in with the call.
I want to call a Javascript function from Flash, which I can do with ExternalInterface, but the Javascript function takes a callback. Is there a way to give it a Flash callback?
I've thought of something like this:
ExternalInterface.addCallback("foo", function(){...});
ExternalInterface.call("theFunction", "foo");
But that wouldn't work since theFunction would attempt to do foo(), while it should really do swfObject.foo(). The problem is the page and its Javascript are not under my control (though I can request changes if really needed).
This is closely related to the first question in the related questions section.
Along the same lines as the answer to that question, you can do:
ExternalInterface.addCallback("foo", function() { /* ... */ }); // The callback
ExternalInterface.call("theFunction(function() { swfObject.foo(); })");
You're misunderstanding the documentation, I think. callback in this instance is just a reference to a function inside Flash, not a callback to something you call.
Basically, you use .call() to call a JS function from AS; and you use .addCallback() to tell the Flash Player which AS function should be called based on the name.
On your example, theFunction would get one parameter as being 'foo', which is the name that references your anonymous AS function. Not sure why you would want to pass the function like that, but if you need, you could just call it from JavaScript with
function theFunction(callback) {
// .. do something...
swfObject[callback]();
}
Now, if you don't have control over the JS/HTML side, I'm not sure if you can do that. Not sure why you'd need, anyway - JS calls are synchronous, as if they were running on the same thread, meaning the Flash Player will execute the JS code and only then return to the Flash Player... you don't have to wait for execution or anything.
Also, if you really need to control the page without touching the JS/HTML side, remember you can inject entire pieces of JS code via .call - it doesn't need to be a simple function call. You can create your entire functions from inside the SWF. For example,
var js:XML = <script><![CDATA[
// Javascript code...
]]></script>;
ExternalInterface.call(js);
Or, if you need the return data, you don't need a callback either - just do a simple call as in
// JS
function isNumberZero(__num) {
return __num == 0;
}
// AS
trace ("Is number zero = " + ExternalInterface.call("isNumberZero", 10));
Not sure if this helps at all. If not, it'd be good to have more information on what exactly you're trying to do.