0

I'm using Ajax calls to pull in data for a table and I have successfully been able to pull in data for Chrome and everything shows up perfectly fine, but my table is not wanting to show up in IE at all and I don't know why.

Chrome: enter image description here

In IE, it's not showing up at all.

Here is the code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.2.5/css/tableexport.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.3.5/js/tableexport.min.js"></script>

<style>
.top {
    margin-bottom: 15px;
}
.csv, .txt, .xls, .xlsx {
    margin-right: 4px;
    margin-left: 4px;
}
</style>

<div id="buttons" style="display: table">
<div id="title" style="width: 100%;"></div>

<script>
$(document).ready(function() {
    var requestUri = _spPageContextInfo.webAbsoluteUrl + 
    "/_api/web/lists/getbytitle('HISC Franchise Information')/items?$top=1000&$orderby=Title&$select=Title,Franchises_x0020_with_x0020_Shar/Title,Franchise_x0020_Name,DMA/Title,City,State,Region,Stand_x0020_Alone_x0020_Franchis,Media_x0020_Specialist_x0028_s_x/Title,Primary_x0020_Contact,Key_x0020_Player_x0020_Email,Owner_x0020_Email,Franchise_x0020_Liason/Title&$expand=Franchises_x0020_with_x0020_Shar,DMA,Media_x0020_Specialist_x0028_s_x,Franchise_x0020_Liason&$filter=substringof('Peyton',Franchise_x0020_Liason/Title)";
    $.ajax({
        url: requestUri,
        type: "GET",
        headers: {
            "accept":"application/json; odata=verbose"
        },
        success: function(data) {
            onSuccess(data);
            ExportTable();
        }
    });

    function onSuccess(data) {
        var item = data.d.results;
        var tableContent = '<table id="TablePanel" border="1px;"><thead><tr><th>Franchise Number</th>' + '<th>Franchises with Shared Owner</th>' + '<th>Franchise Name</th>' + 
        '<th>DMA</th>' + '<th>City</th>' + '<th>State</th>' + '<th>Region</th>' + '<th>Stand Alone Franchise</th>' + '<th>Franchise Liason</th>' + '<th>Media Specialist(s)</th>' + '<th>Primary Contact</th>' + 
        '<th>Key Player Email</th>' + '<th>Owner Email</th>' + '</tr></thead><tbody>';
        for (var i = 0; i < item.length; i++) {
            tableContent += '<tr>'
            tableContent += '<td>' + item[i].Title + '</td>';
            tableContent += '<td>' + item[i].Franchises_x0020_with_x0020_Shar.results.map(r => r.Title).join('; ') + '</td>';
            tableContent += '<td>' + item[i].Franchise_x0020_Name + '</td>';
            tableContent += '<td>' + item[i].DMA.results.map(r => r.Title).join('; ') + '</td>';
            tableContent += '<td>' + item[i].City + '</td>';
            tableContent += '<td>' + item[i].State + '</td>';
            tableContent += '<td>' + item[i].Region + '</td>';
            tableContent += '<td>' + item[i].Stand_x0020_Alone_x0020_Franchis + '</td>';
            tableContent += '<td>' + item[i].Franchise_x0020_Liason.results.map(r => r.Title).join('; ') + '</td>';
            tableContent += '<td>' + item[i].Media_x0020_Specialist_x0028_s_x.results.map(r => r.Title).join('; ') + '</td>';
            tableContent += '<td>' + item[i].Primary_x0020_Contact + '</td>';
            tableContent += '<td>' + item[i].Key_x0020_Player_x0020_Email + '</td>';
            tableContent += '<td>' + item[i].Owner_x0020_Email + '</td>';
            tableContent += '</tr>';
            tableContent += '</tbody></thead>';
        }
        $('#title').append(tableContent);
    }

    function ExportTable() {
        $("#buttons").tableExport({
            headings: true,
            footers: true,
            formats: ["xls", "csv", "txt"],
            fileName: "id",
            bootstrap: true,
            position: "top",
            ignoreRows: false,
            ignoreCols: false,
            ignoreCSS: ".tableexport-ignore"
        });
    }
});
</script>

Does anyone know what might be preventing it? or someone that has had this issue before?

1

You didn't write which exactly error is showing up in IE, but based on the code I can see one thing that doesn't work in IE. That's the arrow functions syntax that you use when you call the map function.

Try changing the parameter you pass to the map function in all three instances from this:

results.map(r => r.Title).join('; ')

to this:

results.map(function(r) {return r.Title;}).join('; ')
  • Hey Damjan, I ended up figured out the problem - When I transscripted my code to babel it now works, mysteriously. – SaintLouis Events Jan 31 at 19:30
  • @SaintLouisEvents It works because Babel transpiles your ES6 code to be ES5 compliant. Arrow functions were introduced in ES6 and are not supported by Internet Explorer. So Babel "translates" them to the older standard in the way that Damjan wrote. – Anon Feb 1 at 9:17
  • Ahh, that makes so much more sense! Thanks for clarifying that. – SaintLouis Events Feb 1 at 14:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.