[IE] $.append doesn't work in Excel customize

HPB

Link to testcase:
http://live.datatables.net/qokabeve/8/edit

I've put together a simple testcase to show the issue.

This testcase will make the cell for Age a color based on the value.
It works as expected in Chrome and Edge, but it doesn't in Internet Explorer.

Snippet

      $(fills).append('<fill><patternFill patternType="solid"><fgColor rgb="ff' + bgcolor.substring(1) + '" /><bgColor indexed="64" /></patternFill></fill>');
      $(cellXfs).append('<xf numFmtId="0" fontId="0" fillId="' + (fillscount + 0) + '" borderId="0" applyFont="1" applyFill="1" applyBorder="1" />');

These appends don't happen in Internet Explorer, while the attribute count gets set.

When opening excel it will throw an error missing the required fills and cellXfs.

Is there something I'm doing wrong, or a way to fix this?

allan

I don't see anything wrong with the code as such I'm afraid. I don't have IE handy at the moment so I can't debug it, but I would suggest adding a console.log( $(cellXfs).html() ) and seeing what the output is.

Allan

HPB

if I put console.log( $(cellXfs).html() ); right after var cellXfs = $('cellXfs', styles); you get a console error in the console section:

"TypeError: Kan de eigenschap replace van een niet-gedefinieerde verwijzing of een verwijzing naar een lege waarde niet ophalen
   at Anonymous function (http://code.jquery.com/jquery-1.11.3.min.js:4:21805)
   at m.access (http://code.jquery.com/jquery-1.11.3.min.js:4:3520)
   at html (http://code.jquery.com/jquery-1.11.3.min.js:4:21729)
   at button.customize (http://live.datatables.net/runner:92:7)
   at l.ext.buttons.excelHtml5.action (https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js:22:168)
   at action (https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.js:515:4)
   at Anonymous function (https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.js:530:6)
   at m.event.dispatch (http://code.jquery.com/jquery-1.11.3.min.js:4:8493)
   at r.handle (http://code.jquery.com/jquery-1.11.3.min.js:4:5177)"

It's dutch, in english it would be 'cannot read property replace of undefined'.
This happens because $(cellXfs) returns undefined in IE.

Setting jquery to a higher version doesn't throw an error, but returns undefined for the .html() call instead. That doesn't help either.

Works fine in other browsers I have available, but not IE.

HPB

I found a workaround. (Yay!)
What I ended up doing was creating the Elements with createElementNS and adding them with appendChild. Putting it in the correct namespace was required because Internet Explorer will add an empty xmlns tag otherwise. And Excel won't parse xml elements from different or empty namespaces.

Working testcase here:
live.datatables.net/qokabeve/17/edit

allan

Awesome! Thanks for posting back with this that is extremely useful to know. I've got a regex in Buttons to remove the empty namespace attributes at the moment and have wanted to get rid of it for ages. This sounds like the way to do it!

Regards,
Allan

F12Magic

@HPB Thanks for that really nice example on JSBin.

My second comment on the excelHtml5 also pointed to the use of createElementNS and appendChild. Your approach, retrieving the namespace is really nice.

codenewb

Hi guys. This is my first comment here and maybe I should be asking this in a new question since this is an old post. I'm really not sure. But, I am trying to add newlines in excel export and this fiddle https://jsfiddle.net/m26nx9yg/ which I've implemented works great in Chrome, but is breaking on the append function at line 57 when I run it in IE 11 with this error "Error: Unexpected call to method or property access" and all the cells I'm trying to add with the line breaks are just left blank in the sheet. So, I ran into this thread which seems like the right direction, but all of the examples for this seem to be for adding custom styles and I'm having trouble figuring out how to make it work in this case.