0

Question: I have a container called dashboard that loads different child views into it. All of the child views have a header element with an id of sub-header What I want to do is update the class associated with that element from the parent dashboard JavaScript but since sub-header is not loaded yet I am having a hard time accessing it.

It was recommended that I look into using the _.defer function. Below is my example of code that is associated with the dashboard. Is there a way for me to check if the sub-header element has been loaded into the DOm yet?

Example:

                    onRender: function () {

            var self = this;
            this.resizeMenu(this.model);
            this.listenTo(this.model, 'change:menuState', function () {
                self.resizeMenu(self.model);
            });

            _.defer(function(){

                console.log("Dashboard On Show Function");

                if ($('#dashboardBody').hasClass('minimized')) {

                    $("#sub-header").removeClass("mobile-subheader");
                    $("#sub-header").removeClass("full-subheader");
                    $("#sub-header").addClass("minimized-subheader");
                    console.log("DashboardBody Minimized");
                } else if ($('#dashboardBody').hasClass('mobile')) {

                    $("#sub-header").removeClass("full-subheader");
                    $("#sub-header").removeClass("minimized-subheader");
                    $("#sub-header").addClass("mobile-subheader");
                    console.log("DashboardBody Mobile");
                } else if ($('#dashboardBody').hasClass('expanded')) {

                    $("#sub-header").removeClass("mobile-subheader");
                    $("#sub-header").removeClass("minimized-subheader");
                    $("#sub-header").addClass("full-subheader");
                    console.log("DashboardBody Expanded");
                }
            })


        },

Results: I am seeing the console log that I am getting into the defer function and into the if statement but the header with the id sub-header is not being updated with the new classes.

Should I move this defer statement outside of the onRender function possibly into an onShow?

Denoteone
  • 4,043
  • 21
  • 96
  • 150
  • Try logging `$("#sub-header")` to see if it finds the element correctly. – bigblind Dec 28 '16 at 18:44
  • jQuery.fn.init context : document selector : "#sub-header" __proto__ : Object[0] – Denoteone Dec 28 '16 at 18:47
  • Is what is returned when I log the elements id – Denoteone Dec 28 '16 at 18:47
  • Check this [Link](http://stackoverflow.com/questions/1027104/how-to-verify-an-element-exists-in-the-dom-using-jquery) for checking the DOM element existence. and it looks like that "#sub-header" is not loaded before execution of this code. So may be you should move the function into an onShow. – hasnayn Dec 28 '16 at 19:01
  • @hasnayn using the link you provided I was able to confirm that the sub-header is not in the DOM but when I wrap my defer in an onShow function I am still getting the same results. Is it possible to listen for when an object loads and then fire a function once loaded? – Denoteone Dec 28 '16 at 20:32
  • Please check this [link](http://stackoverflow.com/questions/17071697/how-to-call-a-function-after-a-div-is-ready) for firing a function after loading an object. – hasnayn Dec 29 '16 at 05:51

0 Answers0