Why isn't my exception caught?
I am writing a jQuery plugin that allows users to add links to their article. Basically, when the enter key is pressed while the user is focused on the pivot entry, the script checks the URL through my AJAX script to make sure it's a working URL. If valid, the button is added to the list of links that the user can see. It will also update the hidden input containing a comma separated list of urls.
I am very new to the concept of JS exceptions ... I am currently getting an error The Uncaught [object Object].
error occurs when I throw the variable "info". Any ideas?
(function($){
$.fn.extend({
references : function(options) {
var defaults = {
sample_div : '#sample-ref',
remove_button : '#removereference',
update_div : '#references',
hidden_input : 'input[name="references"]',
saved_input : 'input[name="saved-refs"]',
ajax_url : 'ajax.php',
search_input : '#reference'
};
var options = $.extend(defaults, options);
var count = 0;
function addReferenceBlock(ref_title){
var replacements = {
ref_title : ref_title,
ref_url : ref_url
};
var block = $(options.sample_div).html();
$.each(replacements, function(index, value){
block.replace(new RegExp('{'+index+'}', 'g'), value);
});
$(options.update_div).append(block);
}
function checkReference(url){
var postData = 'reference='+url;
$.ajax(
{
dataType: "xml",
type: "POST",
data : postData,
cache: false,
url: options.ajax_url
})
.done(function(xml, textStatus, jqXHR){
if(textStatus === 'success'){
$(xml).find('success').each(function(){
console.log('checking '+url+'...');
var info = $(this).find('pagetitle');
throw info;
});
$(xml).find('error').each(function(){
throw false;
console.log($(this).find('message').text());
});
} else {
console.log(jqXHR);
}
});
}
function init(element, options){
$(options.search_input).enterKey(function(e){
try {
checkReference($(options.search_input).val());
} catch($status){
if($status !== false){
addReferenceBlock($status);
updateReferenceInput($(options.search_input).val());
} else {
alert($status);
}
}
e.preventDefault();
});
}
return $(this).each(function(){ init(this, options); });
}
});
})(jQuery);
source to share
Your block try
is calling a function checkReference
. The function checkReference
calls done
. done
does not call the anonymous function that throws your error; it sets up an event handler so that it can be called later by the system. So your stack trace is not what you think it is.
EDIT
Why doesn't "done" call the code inside?
Because if it were, it wouldn't be asynchronous. Let's mock this with setTimeout
, not AJAX, apply the same principles:
function foo(how) {
throw("In foo " + how + " (look at the stack trace by clicking on the triangle)");
}
function callFooAsynchronously() {
console.log("calling foo asynchronously");
setTimeout(function() {
foo("asynchronously");
}, 1000);
console.log("finished calling foo asynchronously");
}
function callFooSynchronously() {
console.log("calling foo synchronously");
foo("synchronously");
console.log("finished calling foo synchronously");
}
function main() {
callFooAsynchronously();
callFooSynchronously();
}
main();
The output looks like this:
calling foo asynchronously js:18
finished calling foo asynchronously js:22
calling foo synchronously js:26
Uncaught In foo synchronously (look at the stack trace by clicking on the triangle) js:14
foo js:14
callFooSynchronously js:27
main js:34
(anonymous function) js:37
Uncaught In foo asynchronously (look at the stack trace by clicking on the triangle) js:14
foo js:14
(anonymous function)
The synchronous call will start and then throw the exception. Due to the exception, "completed call to foo synchronously" is never displayed. The stack trace shows a call from the fragment runtime, the caller main
, which is called callFooSynchronously
, which is ultimately called foo
.
The asynchronous call will display the initial message, attach a timeout handler, then display the finished message, then exit. This completes callFooAsynchronously
. After a second, the browser will remember that it needs to do something, and this is reflected in the stack trace: the anonymous function passed to is executed setTimeout
, which, in turn, is launched foo
. Note that main
both callFooAsynchronously
are not part of the stack trace: they set the alarm and then left the building. callFooAsynchronously
despite his name, never arouses foo
as well setTimeout
.
The browser calls the anonymous function in setTimeout
directly, just as it directly calls the function onreadystatechange
on XMLHttpRequest
(the function that ultimately calls the function you passed on done
) that is attached but not called jQuery.ajax
.
If done
your function is called, it will be executed immediately after the call ajax
, not when the response arrives, because that is when it is executed done
.
source to share