Archive for May, 2013

Downloading files with Javascript with post data without using ajax calls

May 21st, 2013

IF you have been using javascript for a while you will know real quick that you cannot use $.ajax calls to receive a file from your server, which is a real bummer due to the fact that ajax calls just stream down the text data. I searched the web far and wide trying to find a solution to this and if you just simply need to download a file from your server, there is a really simple way to get it accomplished, just simply write this line into your javascript:

location.href = “path/to/api/call”

That will simply go out to your server and execute that on the server and get your file, as long as the response on the other side has headers marked up correctly with the “Content-Disposition” of “attachment: filename=file.whateverext”.

That is fine for simple file download, but you know at some point you are gonna want to pass parameters to your web server so I found a great jQuery plugin here: jQuery Download plugin This will allow you to post your data to the server as a hidden form submit and it works great minus one little issue, it doesn’t handle nested array’s at all, it just wraps them into the post string, so I modified it a little and create a git repo for it enjoy: My Modified jQuery plugin

Backbone collection sorting.

May 14th, 2013

Recently I had a need to sort a list of records in a list by the Date it was created and I wanted to do so using backbone, well it turns out there is a very simple and slick way to get this done, I have included the code snippets below:

The collection:

define([
  'backbone',
  'Models/YourModel'
], function (backbone, model) {
    return backbone.Collection.extend({
        url: '/your_url/',
        model: model,
        sort_key: 'id', // default sort key
        comparator: function (item) {
            return -item.get(this.sort_key);
        },
        sortByField: function (fieldName) {
            this.sort_key = fieldName;
            this.sort();
        }
    });
});

As you can see you just use the comparator: function built into the backbone collections and in my example I am passing a negative so that it will sort descending, the default is ascending so just leave the minus sign off if you want it to work that way. I included the sortByField function here as a convenient way to call it in the code off the collection, it uses the sort_key field in the comparator to organize your collection. Below I have the usage, as you can see, its just a simple call to the string name of the field you want to sort by.

The usage:

new collection().fetch({
                data: { data: "whatever" },
                success: function (r) {
                        r.sortByField("FieldToSortBy");
                },
                error: function (c, r) {
                    alert("Error retrieving the data.");
                },
            });

Be very careful when you set the id of a Backbone model

May 10th, 2013

I have been scratching my head all morning today trying to figure out why a collection I had on my backbone model was getting reset anytime I passed it to my views.  I tried everything, passing the collection to my view in functions, instantiating it in the initialize(), and a few other things that I can’t even remember right now, lol.  Anyways, I noticed down where we were adding items to the collection there was a line that looked like this:

that.model.set(“id”, evt.val, { silent: true });

Notice the lowercase “id” there.  What that is telling backbone is to actually set the id of the model instead of just setting the id to something we had planned to reference down the road, which would be fine in most situations, although I think backbone will do a PUT in those situations because it thinks the model has been saved before.  Anyways, when this was set in my app, it was clearing the collection whenever I passed it around, which was not cool.  All I had to do was change that to an uppercase “Id” and update any reference I had to it and all is well again, my collection stays intact.  I hope this helps someone.