Simple Tomato Soup
I keep a fairly simple weekday dinner routine to keep time and costs down during the week and letting me have some downtime. In that spirit, every Tuesday in our house is grilled cheese and tomato soup night. It’s simple, quick to prepare, and (relatively) healthy, provided one goes easy on the butter. That said, as someone who has actively been trying to avoid processed foods, I have a certain soft spot in my heart for Campbell’s tomato soup. It reminds me of my childhood, and made with milk it’s creamy and oh so satisfying.
Well, a couple Tuesdays ago I went to make dinner and lo my usual stash of a few cans of Campbell’s was gone! I had forgotten to restock and was left with the possibility of no soup with our sandwiches. Necessity being what it is, I pulled out a few ingredents and hit up the internet to build a quick recipe for my own homemade tomato soup, and this was the result. It’s creamy buy not heavy, distinctly tomato-y, and made right, it can even be vegan!
The first time I made this I didn’t add any baking soda, and it was noticibly acidic, even after adding some sugar to attempt to balance the flavor a bit. The next time I used the baking soda and it brought it right in line. The amount can be varied to your taste.
Handling Errors using Select2's Custom Query Function
Recently I encountered an issue using Select2’s custom query feature to create a custom function to use
Backbone.js collection objects to handle fetching and parsing data to populate a dynamic search box. One
problem that arose from that was the need to properly handle any variety of errors that could occur during that AJAX
request. Select 2 handles this natively when using the built-in ajax option, but doing it with a custom query
is not well documented. Consider this example:
var collection = new MyBackboneCollection()
$('#myInput').select2({
query: function(options) {
collection.fetch().done(function() {
var data = { results: [] };
data.results = collection.map(function(obj) {
return {
id: obj.id,
text: obj.get('Name')
};
});
options.callback(data);
}).fail(function() {
var data = { results: [] };
options.callback(data);
});
},
});In this smple use case, we’re capturing any failures and presenting it as if no results were found, at a minimum, this is misleading to the user, and at worst, could be confusing if a user is expecting a result to be present.
There is nothing mentioned in the documentation, however after looking at the source for the Select2, we can see that in the built-in implementation of the AJAX handler, the way the native error handling is triggered:
$.extend(params, {
url: url,
dataType: options.dataType,
data: data,
success: function (data) {
// TODO - replace query.page with query so users have access to term, page, etc.
// added query as third paramter to keep backwards compatibility
var results = options.results(data, query.page, query);
query.callback(results);
},
error: function(jqXHR, textStatus, errorThrown){
var results = {
hasError: true,
jqXHR: jqXHR,
textStatus: textStatus,
errorThrown: errorThrown,
};
query.callback(results);
}
});The key component being hasError: true. So if we change our original example:
var collection = new MyBackboneCollection()
$('#myInput').select2({
query: function(options) {
collection.fetch().done(function() {
var data = { results: [] };
data.results = collection.map(function(obj) {
return {
id: obj.id,
text: obj.get('Name')
};
});
options.callback(data);
}).fail(function() {
var data = { hasError: true };
options.callback(data);
});
},
});The native error handling kicks in and we can easily imform the user that there was an error loading their search data!
From here we can use additional parameters in the results object and the native formatAjaxError to do anything we
might want to do to display a nicely formatted error.