CODEWITHSUNDEEP
backbone.jsfetch
pelelive
pelelive

Reputation: 637

Backbone.js and ie fetch working only using dev tool

I am trying to build a small app using BB.js.

Of course everything work in FF, CHROME & Opera but not with IE.

I am just trying to fetch model using Restful (php back end) to get a collection of models.

In IE nothing happen even after multiple refresh. But when I open de dev tool to check the console and I do a refresh, suddenly it works.

model & collection

(function($) {


//a fact model
window.Fact = Backbone.Model.extend({

    defaults: {
        factContent: ''
    },


    initialize: function Fact(){
        console.log("just created a fact");

        this.url = "fact.php?fact="+this.id,

        this.bind("error", function(model, error){
            console.log(error);
        });
    },

    parse : function(resp, xhr) {

        //new fact added
        if(resp.type == "create")
            this.url = "fact.php?fact="+resp.id;

        return resp;
    }

});

//collection of models
window.Facts = Backbone.Collection.extend({

    model: Fact,

    url: "facts.php",

    initialize: function(){
        console.log('fact collection created');
    }
});


//facts view
window.FactsCollectionView = Backbone.View.extend({

    el: $("#factsCollectionContainer"),

    initialize: function(){
        this.template = _.template($('#factsCollectionTemplate').html());

        //binding
        _.bindAll(this, 'render');
        this.collection.bind('change', this.render);
        this.collection.bind('add', this.render);
        this.collection.bind('remove', this.render);
        this.collection.bind('reset', this.render); 

    },

    render: function(){
        var renderedContent = this.template({facts : this.collection.toJSON()});
        $(this.el).html(renderedContent);
        return this;
    }

});


$(document).ready(function(){
    //create a fact collection and populate it
    factsc = new Facts();


                //NOT WORKING IN IE (no alerts)
                //WORKING ONLY USING DEV TOOL
    factsc.fetch({success:function(){
        //create a view and show collection after fetch is done
        factsView = new FactsCollectionView({collection:factsc});
        factsView.render(); 

        alert("success fetch");
    }, error: function(){
        alert("error fetch");
    }});    
});





})(jQuery);

Fetch return this JSON: [{"id":"48","factContent":"Hello"},{"id":"47","factContent":"World"}]

Upvotes: 2

Views: 2373

Answers (4)

Mike Johnston
Mike Johnston

Reputation: 348

This precise situation had me absolutely apopleptic recently. The problem is indeed IE caching AJAX call results. Testing that theory, however, is devilishly hard. You see, Microsoft helpfully disables caching everywhere when the debugging console is opened. (When I write 'helpfully,' I mean it with the absolute maximum amount of sarcasm allowed by law.) By doing so, debugging any caching problem becomes an exercise in WTF.

Step #1: User reports problem, so you try it in IE and confirm the problem.

Step #2: You open the debugging console and step through it only to find the problem has mysteriously disappeared.

Step #3: You close the debugger and try it once more, only to find it is again failing.

Lather, rinse repeat.

My problem was complicated by the fact that the site in question is running in HTTPS, which shouldn't be cached in any way, shape or form. Microsoft even agrees with this:

https://msdn.microsoft.com/library/ie/dn265017%28v=vs.85%29.aspx

Note carefully, however, the statement "HTTPS pages are not cached for security reasons." This is, in fact, true. AJAX responses, however, don't seem to qualify as 'HTTPS pages.'

In short, disable caching in jQuery. For a Backbone app, putting the following near the top of your app's init() function should do the trick:

$.ajaxSetup({ cache: false });

Upvotes: 2

Fizer Khan
Fizer Khan

Reputation: 92875

We faced similar problem. We solved them by

Upvotes: 2

Leo Anbarasan
Leo Anbarasan

Reputation: 31

I too had similar problem. I have solved by removing console.log

You can also try same. It looks silly but it works.

Thanks.

Upvotes: 2

testpattern
testpattern

Reputation: 2498

I believe this is caused by IE caching ajax calls. Check this question: backbone.js fetch results cached. Basically, you can force IE to not cache your request like this:

factsc.fetch({
cache: false,
success:function(){ /* stuff */
},
error:function() {/* error message */
});

Upvotes: 4

Related Questions