Dom elements not updated when accessed inside backbone afterRender()

Question

Here is my render() function:

initialize: function() {
    this.selectDivView = new SelectView({
        url: '/ir/secure/api/v40/myvariants/myVariantDBs',
        method: 'POST',
        template: myVariantDBFilterTemplate
     });
},

render: function() {
    this.$el.html(template()); //has div for "select drop down"
    this.selectDivView.setElement(this.$(this._selectDivId)).render();
    this.afterRender();
},

afterRender: function() {
    this.$(this._selectEl).val();
    //Expected to get some value but the select control is not yet rendered in dom
}

I tried doing it in the way mentioned at this link Backbone.js event after view.render() is finished but was not able to access DOM elements.

Here is my Select control's handlebar template selectDiv.html

{{#each filters}}
<option value="{{id}}">{{name}}</option>
{{/each}}

I guess the DOM is not refreshed by the time I am in afterRender(). What can be done here ?

My render function of SelectDivView

render: function(selectedValue) {
    this.selectedValue = selectedValue;
        $.ajax({
            url: this.url,
            method: this.method,
            async: false,  // THIS IS THE DECIDING PROPERTY.
            success: function(data) {
                    that.filters = data;
                    that._doRender.call(that);
            }
        });
}

Maybe you're doing something asynchronous in `selectDivView`'s `render` method..?We can't tell for sure unless we see the code. Please share [mcve] — T J, Jan 08 '16 at 17:37
@t-j Thank you so much. Your statement "Maybe you're doing something asynchronous in selectDivView's render method"gave me the answer. — ashy143, Jan 11 '16 at 18:28

score 0 · Answer 1 · answered Jan 11 '16 at 18:48

Adding ajax property

async: false

in render function of selectDivView solved the problem.

Here is how the render function of select div will look like

render: function(selectedValue) {
    this.selectedValue = selectedValue;
        $.ajax({
            url: this.url,
            method: this.method,
            async: false,  // THIS IS THE DECIDING PROPERTY.
            success: function(data) {
                    that.filters = data;
                    that._doRender.call(that);
            }
        });
}

Hi, synchronous ajax requests are deprecated... You should be seeing a warning in the developer tools if yo're using latest versions of browsers like chrome... Better return the xhr object and access the value once the request succeeds — T J, Jan 12 '16 at 05:49

GAntoine · Answer 2 · 2016-01-07T22:05:06.260

-1

Did you bind afterRender manually?

initialize: function(options) { 
  _.bindAll(this, 'beforeRender', 'render', 'afterRender'); 
  var _this = this; 
  this.render = _.wrap(this.render, function(render) { 
    _this.beforeRender(); 
    render(); 
    _this.afterRender(); 
  });
},

render: function() {
    this.$el.html(template()); //has div for "select drop down"
    this.selectDivView.setElement(this.$(this._selectDivId)).render();
    return this;
},

afterRender: function() {
    this.$(this._selectEl).val();
}

edited Jan 07 '16 at 22:05

answered Jan 07 '16 at 21:55

GAntoine

1,265
2
16
28

This is what exactly I did. But inside after render the select control was not yet rendered with the options. – ashy143 Jan 07 '16 at 21:57
I see. When you stop inside of afterRender, can you find the select control using the console? Or is it just not rendered at all? – GAntoine Jan 07 '16 at 22:00
I can see the select control in console. But it is not rendered with options. But once I am out of the afterRender() on my browser I can see the select control properly with all values. – ashy143 Jan 07 '16 at 22:02
Tried. It's not working. I guess this is what you suggested before also. – ashy143 Jan 07 '16 at 22:12

Dom elements not updated when accessed inside backbone afterRender()

2 Answers2