CODEWITHSUNDEEP
javascriptjqueryinternet-explorerbackbone.jscross-browser
Rosseyn
Rosseyn

Reputation: 72

backbone.js IE8 appendChild() error

Typical 'works in Chrome/FF but not IE' story. IE9 seems to handle it fine though.

The only thing that appears in the IE console is:
SCRIPT65535: Unexpected call to method or property access.
jquery.min.js, line 3 character 32461

Here's screenshot of the IE Profiler tracing the error.

And here is the code from my Nav.js file:

    // Build nav menu array
    var navLinks =  [ {"style" : "home"         ,"page" : ""                    ,"name" : "Home"                ,"tier" : 1     ,"icon" : "home"}, 
              {"style" : "job-trans"    ,"page" : "view/jobTransaction" ,"name" : "Job Transactions"    ,"tier" : 1     ,"icon" : "barcode"},
              {"style" : "job"          ,"page" : "view/job"            ,"name" : "Jobs"                ,"tier" : 1     ,"icon" : "inbox"},
              {"style" : "user"         ,"page" : "view/user"           ,"name" : "Users"               ,"tier" : 1     ,"icon" : "user"},
              {"style" : "report"       ,"page" : "page/report"         ,"name" : "Reports"             ,"tier" : 2},// ,"icon" : "signal"},
              {"style" : "customer"     ,"page" : "view/customer"       ,"name" : "Customers"           ,"tier" : 2}
            ];

    var jobSearchAttr = $.browser.msie ? "value=\"Enter Job #\" data-browser=\"IE\" style=\"font-size: 16px\"" : "placeholder=\"Enter Job #\"";
    var userSearchAttr = $.browser.msie ? "value=\"Enter User ID\" data-browser=\"IE\" style=\"font-size: 16px; padding-left:0;\"" : "placeholder=\"Enter User ID\"";

    // Sort array elements into buttons and dropdowns with appropriate elements
    var i, t1LinkArray = [], t2LinkArray = [], t2ClassArray = [];
    for (var i = 0; i < navLinks.length; i++) {
        switch(navLinks[i]["tier"]) {
            case 1:
                t1LinkArray.push( "<li class=\"" + navLinks[i]['style'] + "\"><a href=\"#/" + navLinks[i]['page'] + "\"><i class=\"icon-" + navLinks[i]['icon'] + " icon-white\"></i> " + navLinks[i]['name'] + "</a></li>" );
                break;
            case 3:
                t2LinkArray.push( "<li class=\"" + navLinks[i]['style'] + "\"><a href=\"#/" + navLinks[i]['page'] + "\">" + navLinks[i]['name'] + "</a></li>" );
                t2ClassArray.push( navLinks[i]['style'] );
                break;
        }
    }

    // Create Navbar View
    NavView = Backbone.View.extend({
        // Define View template
        template: _.template( $('#navbarTemplate').html() ),

        initialize: function () {
            this.render();
        },

        render: function () {
            // Call the template and pass data object
            this.$el.html( this.template({ t1LinkArray : t1LinkArray, t2LinkArray : t2LinkArray, t2ClassArray : t2ClassArray }) );
        },

    });
    var nav = new NavView({ el:$('nav') });

At a loss as to why this is crashing only in IE 7/8.

EDIT :: Here is the template, as currently embedded below the body.

        <div class="navbar navbar-fixed-top" style="clear: both;">
          <div class="navbar-inner">
            <div id="navbar" class="container-fluid">

              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>

              <p class="navbar-text pull-right"><a class="brand" href="/workflow3"><em>Brand</em></a></p>

              <div class="nav-collapse pull-left">
                <ul class="nav">
                  <!-- List Tier 1 pages -->
                  {{ t1LinkArray.join("\n") }}

                  <!-- Style dropdown with each child's page class -->
                  <li class="dropdown {{ t2ClassArray.join(" ") }}"> 

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                      <!--  List Tier 2 pages -->
                      {{ t2LinkArray.join("\n") }}
                    </ul>
                  </li>
                </ul>

              </div> <!-- /.nav-collapse -->
            </div> <!-- /.container-fluid -->
          </div> <!-- /.navbar-inner -->
        </div> <!-- /.navbar -->

Upvotes: 0

Views: 2920

Answers (3)

Sam R
Sam R

Reputation: 702

I just helped a coworker troubleshoot this issue in IE8 today. We discovered he was attempting to append to an element that cannot have children (in his case, an IMG tag).

I noticed the jQuery selector on new NavView({ el:$('nav') }); should be .nav There is no nav tag (at least in your code sample) and so it's trying to add nodes to a non-existent element.

Upvotes: 1

ryan j
ryan j

Reputation: 310

Old question but i was getting this error today, and this was the top result so still relevant i guess.

You were using html5 data-attributes in your markup - presumably your document was html5? If you used any of the new tags unsupported by IE8 (without adding a shim of some description) jQuery produces this error. Try this in the head of your page.

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Other than that it apparently tends to turn up in malformed html - eg. if you've forgotten to close a tag or missed a closing quote in an attribute.

Upvotes: 4

Rosseyn
Rosseyn

Reputation: 72

Ultimately I still have not found a solution to the actual problem at hand here. Technically this doesn't even count as a work around, but it does create a working environment!

http://www.chromium.org/developers/how-tos/chrome-frame-getting-started

Obvious advantage, no longer have to pander to IE's idiosyncrasies.

I hate not knowing what's causing this though, so anyone else, please feel free to answer.

Upvotes: 0

Related Questions