Question

I have a strange problem with the fetch of a backbone collection I am working with. In one particular instance of my code I perform a fetch (exactly how I do it in other areas of the code which all work fine), the fetch never seems to make it to the server and the developer tools shows the request as red with the word (canceled) in the status/text field.

I’ve walked this through into the backbone sync method and I see the $.ajax being built and everything looks fine. Has anyone run into this problem?

here is my code if it helps, this is a function that calls two .ashx services to first check for a file’s existence then to open it. The part that isn’t working for me is the “me.collection.fetch().

openDocument: function () {
        var me = this,
                fileId = me.model.get('id'),
            userId = Dashboard.Data.Models.UserModel.get("UserInfo").User_ID,
            fileRequest = '/genericHandlers/DownloadFile.ashx?id=' + fileId + '&userId=' + userId,
            fileCheck = '/genericHandlers/CheckFileExistance.ashx?id=' + fileId + '&userId=' + userId;

        //hide tooltip
        me.hideButtonTooltips();

        // Check for file existance
        $.ajax({
            url: fileCheck
        })
        .done(function (data) {
            if (data && data === "true") {

                document.location.href = fileRequest;

                me.collection.fetch();



            } else if (!!data && data === "false") {
                "This file is no longer available.".notify('error');
            }
        })
        .fail(function (data) {
            "Something went wrong during the File Existance check".notify('error');
            "Something went wrong during the File Existance check".log(userId, 'error', 'Docs');
        });
    },

my collection:

// docsCollection.js - The collection of ALL the documents available to a given user

// Document Collection
Dashboard.Collections.DocsCollection = Backbone.Collection.extend({

    model: Dashboard.Models.DocumentUploadModel,

    url: function () {
        return 'apps/docs/Docs/' + this.userId;
    },

    initialize: function (options) {
        this.userId = options.userId;
        this.deferredFetch = this.fetch();

    },

    comparator: function (model) {
        return -(new Date(model.get('expirationDate')));
    },

    getDaysSinceViewedDocuments: function () { 
        return this.filter(function (model) {
            return model.get('daysSinceViewed') !== null;
        });
    },

    getNewDocuments: function () { 
        return this.filter(function (model) {
            return model.get('isNew');
        });
    },

    getExpiredDocuments: function () { 
        return this.filter(function (model) {
            return model.get('isExpired');
        });
    }

});

and my model:

Dashboard.Models.DocumentUploadModel = Backbone.Model.extend({
    defaults: {
        fileArray: [],
        name: '',
        description: '',
        accesses: [],
        tags: [],
        expirationDate: ''
    },

    initialize: function () {

            this.set({
                userId: Dashboard.Data.Models.UserModel.get("UserInfo").User_ID,
                expirationDate: (this.isNew()) ? buildExpirationDate() : this.get('expirationDate')
            }, { silent: true });

        function buildExpirationDate() {
            var date = new Date((new Date()).getTime() + 24 * 60 * 60 * 1000 * 7),
                    dateString = "{0}/{1}/{2}".format(date.getMonth() + 1, date.getDate(), date.getFullYear());

            return dateString;
        }

    },

    firstFile: function () {
        return this.get('fileArray')[0];
    },

    validate: function (attributes) {
        var errors = [];

        if (attributes.name === '' || attributes.name.length === 0)
            errors.push({
                input: 'input.txtName',
                message: "You must enter a name."
            });

        if (attributes.description === '' || attributes.description.length === 0)
            errors.push({
                input: 'textarea.taDescription',
                message: "You must enter a description."
            });

        if (errors.length > 0)
            return errors;

        return;
    },

    sync: function (method, model, options) {
        var formData = new FormData(),
                files = model.get("fileArray"),
                $progress = $('progress'),
                success = options.success,
                error = options.error;

        // Nothing other than create or update right now
        if (method !== "create" && method !== "update")
            return;

        // Build formData object
        formData.append("name", model.get("name"));
        formData.append("description", model.get("description"));
        formData.append("accesses", model.get("accesses"));
        formData.append("tags", model.get("tags"));
        formData.append("expirationDate", model.get("expirationDate"));
        formData.append("userId", model.get("userId"));
        formData.append("isNew", model.isNew());

        // if not new then capture id
        if (!model.isNew())
            formData.append('id', model.id);


        for (var i = 0; i < files.length; i++) {
            formData.append('file', files[i]);
        }

        xhr = new XMLHttpRequest();

        xhr.open('POST', '/genericHandlers/UploadDocsFile.ashx');


        xhr.onload = function () {
            if (xhr.status === 200) {
                if (success)
                    success();
            } else {
                if (error)
                    error();
            }
        }

        if ($progress.length > 0) {
            xhr.upload.onprogress = function (evt) {
                var complete;

                if (evt.lengthComputable) {
                    // Do the division but if you cant put 0
                    complete = (evt.loaded / evt.total * 100 | 0);
                    $progress[0].value = $progress[0].innerHTML = complete;
                }
            }
        }



        xhr.send(formData);
    },

    upload: function (changedAttrs, options) {
        this.save("create", changedAttrs, options);
    }

});

Answer 1

You’re assigning a value to document.location.href before you try to fetch your collection:

document.location.href = fileRequest;
me.collection.fetch();

Changing document.location.href will change the whole page and in the process, any currently running JavaScript will get shutdown so I wouldn’t expect your me.collection.fetch() to ever get executed.