why is the export buttons not working in an document.write popup window?

itsjoeyzeng · October 2016

I am working on a web application and I would like the user to download/export table data from a pop-up window. I cannot get either the buttons or styling to show up(you can see from the picture I attached). My code works perfectly fine in JSFiddle, and has no errors showed in chrome console. What am I doing wrong here?

Code works in JSFiddle: https://jsfiddle.net/nrbakoyL

Code is not working in the project:

myWindow.document.write(
      "<link rel='stylesheet' type='text/css' href='js/datatables.min.css'/>" +
      "<script type='text/javascript' src='js/datatables.min.js'></script>"+
      "<script>$(document).ready(function() { $('#HMDD').DataTable({ dom: 'Bfrtip', buttons: ['copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'] }); });</script> " + 
        "<table id='HMDD' class='display' cellspacing='0' width='100%'>"+
          "<thead>"+
            "<tr>"+
              "<th>miRNA</th>"+
              "<th>Disease Name</th>"+
              "<th>PMID</th>"+
              "<th>Description</th>"+
            "</tr>"+
          "</thead>"+
          "<tbody>"+
            "<tr>"+
              "<td>"+ mirnaobj_HMDD.miRNA +"</td>"+
              "<td>" + mirnaobj_HMDD.DiseaseName + "</td>"+
              "<td><a href=\"" + PMIDsite + "\">" + mirnaobj_HMDD.PMID+ "</a></td>"+
              "<td>" + mirnaobj_HMDD.Description + "</td>"+
            "</tr>"+
          "</tbody>"+
        "</table>");
  }

Attached is a screen shot that shows there is no errors showing in the console.

Please help and thank you.

itsjoeyzeng · October 2016

anyone? I really need help on this....

allan · October 2016

We'd really need a link to a page showing the issue. I'm afraid a link to a test case showing it working, like your JSFiddle, doesn't really let me debug it at all!

Allan

itsjoeyzeng · October 2016

Hi Allen. I am sorry. I don't know how I can give you a link on this. This is a nodeJS project that I am testing on localhost, the entire folder is like 1gb, and all I can provide you is screenshots to my knowledge. If there is any way you know that I can let you debug please let me know!

Basically, the code in my project is the same as i have in JSfiddle, for some reasons it just doesn't work...

allan · October 2016

Can you run the debugger on the page please?

I can only guess that there is some kind of 404 error or something.

Allan

itsjoeyzeng · October 2016

I just run it and the debugger code is udalum

allan · October 2016

The debugger says "0 tables" on the page. That can happen if:

There is a Javascript error on the page
The table is in an iframe

Might either of these be the case?

Allan

itsjoeyzeng · October 2016

I noticed 0 tables too but I don't understand why. As you can see from the element screenshot, it is right there.

First, I don't know if it is a Javascript error but the table is definitely not in an iframe.

Second, I updated my code (I ran debugger after I updated the code). Instead of using document.write to include DataTable CSS and JS files like I originally did, I used appendChild. I think now the browser is actually reading and executing the files, and the browser console finally gives me an error: Uncaught ReferenceError: $ is not defined a.js:1

main js file:

function openPopup() {
    contextMenu.style.visibility = "hidden";
    var myWindow = window.open("", "", "");
    var PMIDsite = "https://www.ncbi.nlm.nih.gov/pubmed/" + mirnaobj_HMDD.PMID;

    if(mirnaobj_HMDD) {

    myWindow.document.write("<head></head>");

    var link = myWindow.document.createElement('link');
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = "https://cdn.datatables.net/v/dt/jq-2.2.3/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/datatables.css";
    myWindow.document.querySelector("head").appendChild(link);

    var script = myWindow.document.createElement('script');
    script.type = "text/javascript";
    script.src = "https://cdn.datatables.net/v/dt/jq-2.2.3/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/datatables.js";
    myWindow.document.querySelector("head").appendChild(script);


    var script2 = myWindow.document.createElement('script');
    script2.type = "text/javascript";
    script2.src = "js/a.js";
    script2.defer = "defer";
    myWindow.document.querySelector("head").appendChild(script2);

    myWindow.document.write("<body></body>");

      myWindow.document.write(
      //"<link rel='stylesheet' type='text/css' href='js/datatables.min.css'/>" +
      //"<script type='text/javascript' src='js/datatables.min.js'></script>"+
      //"<script type='text/javascript' src='js/a.js'></script>" +
      //"<script>$(document).ready(function() { $('#HMDD').DataTable({ dom: 'Bfrtip', buttons: ['copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'] }); }); </script>" + 
        "<table id='HMDD' class='display' cellspacing='0' width='100%'>"+
          "<thead>"+
            "<tr>"+
              "<th>miRNA</th>"+
              "<th>Disease Name</th>"+
              "<th>PMID</th>"+
              "<th>Description</th>"+
            "</tr>"+
          "</thead>"+
          "<tbody>"+
            "<tr>"+
              "<td>"+ mirnaobj_HMDD.miRNA +"</td>"+
              "<td>" + mirnaobj_HMDD.DiseaseName + "</td>"+
              "<td><a href=\"" + PMIDsite + "\">" + mirnaobj_HMDD.PMID+ "</a></td>"+
              "<td>" + mirnaobj_HMDD.Description + "</td>"+
            "</tr>"+
          "</tbody>" +
        "</table>"
    );
  
  }
  else {
        myWindow.document.write("<p>The miRNA you are looking for is not found in the HMDD</p>");
  }
}

a.js

$(document).ready(function() {
    $('#HMDD').DataTable({
      dom: 'Bfrtip',
          buttons: [
            'copyHtml5', 'excelHtml5', 'pdfHtml5', 'csvHtml5'
          ]
  });
});

so now it seems like I have two problems.
1. Per debugger, table is not been recognized somehow
2. jquery library is not loaded before a.js is executed? But CDN is included before a.js and document.ready should wait jquery to fully loaded. Also I can see the CSS and JS (two CDNs) are successfully loaded because they are in the source tab of chrome inspector. (as you can see from the screenshot)

allan · October 2016

There is a Javascript error on the page - it says that $ is not defined. That suggests that jQuery hasn't been loaded.

I'd really link a link to a page showing the issue to be able to debug it.

Allan

itsjoeyzeng · October 2016

Allan, thanks for all the replies. We have determined that the table is probably in an iframe. The table is opened up in a new window(by using window.open) which makes the table to be inside the iframe automatically. Thus the DataTable is unable to recognize the table and debugger says 0 tables. Is there any way to solve this problem?

allan · October 2016

Not really I'm afraid - the debugger can only run at the top level of the window. I think the debugger is probably out of the question.

Are you able to port forward a web address to your localhost instance so I can debug it directly?

Allan

itsjoeyzeng · October 2016

Ok can I have your email so I can send u the link and how to access it?

allan · October 2016

If you could send it via PM that would be great. Just click my name above and then the "Send message" button.

Allan

itsjoeyzeng · November 2016

i just sent it through message!

allan · November 2016

Thanks for the link. I suspect that there is something going on with the way scripts are being loaded when used with window.open. What would be interesting would be to save the generated HTML to a static file and then attempt to load that and see if it works. In the console of your new window you can use document.getElementsByTagName('html')[0].outerHTML to get the full HTML.

It certainly looks like a.js is being executed before datatables.min.js, but I don't really understand why that would be. It might be that you need to wait for datatables.min.js to be fully loaded before then appending a.js to the document.

Allan

why is the export buttons not working in an document.write popup window?

why is the export buttons not working in an document.write popup window?

Answers

Howdy, Stranger!

Categories

DataTables

why is the export buttons not working in an document.write popup window?

why is the export buttons not working in an document.write popup window?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables