Firefox trying to populate view before views are loaded

[Atul Kaushal]

Hi,

I am facing a weird issue in Firefox. We are loading a page and while calling Routers.initializeRouters(); request is sent to fetch the data and loadFormSuccessHandler function populate response into the views.

In case of Chrome and IE, Response waits for views to be initialized then data get populated into the view.

In case of Firefox, request fetch the data and start populating the view and it fails because some of the views still not initialized.

How can I notify request to wait for views to be initialized before populating data.

Any pointers will be helpful.

Main.js

var Main = {

    treeView : null,
    formView : null,
    mainTabBarView : null,
    currentFieldView : null,
    designModeViewPointer : null,
    carousel : null,
    advancedControlsView : null,

    renderUI : function() {
        Templates.loadTemplateList();
        Utility.initializeFieldHandlerMap();
        Views.showBody();
        Routers.initializeRouters();
        var form = new Models.Form();
        this.formView = Views.showForm('formDetailsDiv', form);
        this.treeView = new Views.TreeView({
            el : $('#controlsTreeDiv'),
            model : null
        });

        this.treeView.getTree().attachEvent("onDblClick",
                ControlBizLogic.formTreeNodeClickHandler);

        Main.mainTabBarView = new Views.TabBarView({
            el : $('#csdOperationsContainer'),
            model : null
        });
        Views.showControlTab('control');
        this.carousel = $('#controlTypesSlider');
        this.carousel.tinycarousel();
        Main.advancedControlsView = new Views.AdvancedPropertiesTabView({
            el : $('#advancedControlProperties'),
            model : null
        });
        // init design mode
        Main.designModeViewPointer = new Views.DesignMode({
            el : $("#design")
        });
        Routers.designModeOnBeforeDragEvent();
        Routers.designModeOnDragEvent();

    }
}

Main.renderUI();

Method with ajax call response
loadForm : function(_id, edit) {
                    $("#formWaitingImage").show();
                    if (Main.formView == null) {
                        Main.formView = Views.showForm('formTab',
                                new Models.Form({
                                    "id" : _id
                                }));

                    }
                    Main.formView.getFormModel().set({
                        id : _id
                    });
                    GlobalMemory.editForm = (edit == "true");
                    Main.formView.getFormModel().fetch({
                        url : 'csdApi/form/' + _id + "/" + edit,
                        success : this.loadFormSuccessHandler
                    });
                    // save as
                },

loadFormSuccessHandler : function(model, response) {
                    var formId = model.get('id');
                    if (formId != undefined && formId != null) {
                        GlobalMemory.editForm = true;
                    }
                    Routers.formEventsRouterPointer.updateUI(model);
                    Routers.formEventsRouterPointer.loadFormulae(Main.formView
                            .getFormModel(), "", "");

                    AdvancedControlPropertiesBizLogic
                            .loadSkipRules(Main.formView.getFormModel());
                    Main.formView.getFormModel().set({
                        skipRules : model.get('skipRules'),
                        id : model.get('id')
                    });
                    Main.advancedControlsView.setTableCss('formulaTable');
                    // Main.mainTabBarView.loadFormSummary();
                    Main.mainTabBarView.getFormSummaryView().displayFormInfo(
                            model.getFormInformation());

                    $("#formWaitingImage").hide();
                    // save form

                    if (!GlobalMemory.editForm) {

                        $('#saveForm').prop("value", " Save As ")
                    }
                },

[Jason Crawford]

The pattern I tend to use is that the View itself loads the data it needs, and then also handles the response (via change events from the model). That way it's impossible for the response to come back before the view is initialized.

(Unclear to me whether you're actually using Backbone Models and Views here or just the router? I recommend using Models and Views.)

Hope that helps,

Jason

--
The Unofficial Backbone.js Group
 
Job Board: https://groups.google.com/forum/#!topic/backbonejs/wHRdZczyOEc
---
You received this message because you are subscribed to the Google Groups "backbonejs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to backbonejs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Fieldbook: Create a database, as easily as a spreadsheet

[Atul Kaushal]

Thanks for the reply Jason. I liked the way you are loading data into views.  

The workflow I mentioned works fine in all browsers expect Firefox. It was even working properly in Firefox with JDK 6 + jboss 4.2.2.  It started failing after updating application to JDK8 + WildFly9 and HA Cluster. 

I have attached js files for reference.  

Thanks,

Atul

To unsubscribe from this group and stop receiving emails from it, send an email to backbonejs+...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.