Column headers missing in IE9

[jtmcn]

This includes the demos. The console displays:
Error: Invalid target element for this operation.

[christianacca]

Can you reproduce the problem using this codepen?

[jtmcn]

Yes. Opening that codepen in IE9 the headers are missing.
The full error message was truncated in the previous comment. It should have been.
Error: Invalid target element for this operation.<thead class="ng-scope" ng-include="templates.header">

[christianacca]

Mmm, so any ideas what the problem is?

[jtmcn]

I'm not sure. However, I just tried every version of ng-table back to 0.3.3 and had the same issue.

[christianacca]

Just use the CrossBrowserTesting feature from this codepen... and I see some strange behaviour...

On the first test in Win 7 x64 using IE9, I saw the same issue as you report.

I then try and debug using the F12 tools in IE and the problem stops occurring.

I've repeated the test twice now using different vm's created by CrossBrowserTesting and I still can't reproduce.

I'm not sure if it's late at night or something! Can you try yourself?

[jtmcn]

Here's what I get in IE9 without the dev tools open:

After opening the tools:

This might be related to a "console.log()" call. In IE9 the "console" object doesn't exist until the tools are opened.

[christianacca]

YES that is it!!!

On Wed, Aug 5, 2015 at 3:01 AM, Joel M. notifications@github.com wrote:

Here's what I get in IE9 without the dev tools open:
[image: image]
https://cloud.githubusercontent.com/assets/2383529/9076711/c9016484-3ada-11e5-946f-e8ccb114d6d1.png

After opening the tools:
[image: image]
https://cloud.githubusercontent.com/assets/2383529/9076713/cf30c192-3ada-11e5-914b-25b922a92588.png

This might be related to a "console.log()" call. In IE9 the "console"
object doesn't exist until the tools are opened.

—
Reply to this email directly or view it on GitHub
#667 (comment).

[christianacca]

Ah except I can't find a console.log statement in the code :-(

On Wed, Aug 5, 2015 at 3:16 AM, Christian Crowhurst <
christian.crowhurst@gmail.com> wrote:

YES that is it!!!

On Wed, Aug 5, 2015 at 3:01 AM, Joel M. notifications@github.com wrote:

Here's what I get in IE9 without the dev tools open:
[image: image]
https://cloud.githubusercontent.com/assets/2383529/9076711/c9016484-3ada-11e5-946f-e8ccb114d6d1.png

After opening the tools:
[image: image]
https://cloud.githubusercontent.com/assets/2383529/9076713/cf30c192-3ada-11e5-914b-25b922a92588.png

This might be related to a "console.log()" call. In IE9 the "console"
object doesn't exist until the tools are opened.

—
Reply to this email directly or view it on GitHub
#667 (comment).

[jtmcn]

I'm not familiar with codepen. Where does this file come from?
http://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js

It has a console call in it. Unfortunately I don't think it's related to the header issue.

[christianacca]

I've forked the codepen I sent you and removed the offending file that you mention has a console.log call in it. Try using this new codepen

[jtmcn]

It no longer works at all in IE 9. The table looks like the first screen shot above. The console output says:

SCRIPT5007: Unable to get value of the property 'contains': object is null or undefined cookie_used_reload-81ec504e4e90af045a89fa3f46728a6c.js, line 1 character 26

SCRIPT5022: [$injector:modulerr] http://errors.angularjs.org/1.4.2/$injector/modulerr?p0=myApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.2%2F%24injector%2Fnomod%3Fp0%3DmyApp angular.min.js, line 38 character 45

[jtmcn]

When I added jQuery the column headers appear correctly. Based on the initial error message, I'm thinking it's related to this part of the the code:
https://github.com/esvit/ng-table/blob/master/dist/ng-table.js#L1123

I'm not sure how to test it from here, but let me know if you have any ideas.

[christianacca]

You seem to be getting closer!

My time is about to run out on working on ng-table for at least the next month... that means you're on your own... unless of course someone else in the ngTable community can help out ;-)

C

[wanglijie]

Hi I cannot be convinced if even the demo in ng table sites got the same issue in IE9.
Error: Invalid target element for this operation.<thead class="ng-scope" ng-include="templates.header">
http://ng-table.com/#/demo/1-1

[downquark]

I am not by any means recommending following this person's solution but I do think it confirms that the issue is with ngTable's use of angular's jqlite.

[corydorning]

having the same issue and not wanting to use jQuery just to fix this. any ideas?

[corydorning]

bump

[camaican]

I added the jQuery script tag ABOVE the angular script tag in the top of the body element, and the table headers display properly in IE9.
I don't have a workaround without jQuery, sorry

<textarea> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script></textarea>

my fix...

<textarea></textarea> <textarea> <script src="bower_components/jquery/jquery.min.js"></script></textarea> <textarea> <script src="bower_components/angular/angular.js"></script></textarea>

[apapapap]

@camaican 👍 This solution worked for me too on IE9.
Thanks a lot.