How do I get the page to parse.

53 views
Skip to first unread message

Nathaniel Brown

unread,
May 16, 2020, 2:01:16 PM5/16/20
to jsdom
Hello,

This is my first post, so please help me if I am not being clear enough.

I am running into an issue with having a jQuery within an HTML document that is being parsed by JSDOM. The document ready doesn't run at all and the page doesn't get rendered by the time I access the DOM.


upcoming3.js
----

const fs = require('fs');
const jsdom = require("jsdom");
const { JSDOM } = jsdom;


var options = {
    resources: "usable",
    runScripts: "dangerously",
    contentType: 'text/html'
};

JSDOM.fromFile("../public/index_extract.html", options).then(dom => {
    window = dom.window;
    document = window.document;

    console.log(document.getElementById('upcoming3table').outerHTML);
});

index_extract.html
----
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Upcoming 3 &trade; - Play the Greek language!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
   <script src="./dist/jquery-3.2.1.slim.min.js" data-integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"></script>
   <script src="./dist/extract.js"></script>
  </head>
<body id="body" class="black">
    <div id="upcoming3letters_gr" class="center red" style="width: auto; display: none">
        <div>Α</div>
        <div>α</div>
        <div>Β</div>
        <div>β</div>
    </div>

    <table class="upcoming3 red" id="upcoming3table">
          <tbody>
              <tr>
              </tr>
          </tbody>
      </table>

    <div id="buttons" class="blue center">
        <button id="play" type="button" class="btn btn-primary btn-lg">Play!</button>
    </div>

</body>
</html>

extract.js
----/*
// (C) Nathaniel Steven Henry Brown. All Rights Reserved. Proprietary Code.
// Date Created: 20200514 (May 14, 2020)
*/

var upcoming_cols_total = 3;
var upcoming_cols_start = 0;
var upcoming_language_active = 'gr';

function build_upcoming3() {
    for (var x = upcoming_cols_start; x < upcoming_cols_total; x++) {
        var upcoming3letters = $('#upcoming3letters_' + upcoming_language_active).clone().prop('id', 'upcoming3letters_' + upcoming_language_active + '_' + x);

        $('table.upcoming3 tbody tr').append(upcoming3letters);
        $('#upcoming3letters_' + upcoming_language_active + '_' + x).wrap('<td></td>');
        $('#upcoming3letters_' + upcoming_language_active + '_' + x).addClass('letters');
        $('#upcoming3letters_' + upcoming_language_active + '_' + x).show();
    }
}

$( document ).ready(function() {
    build_upcoming3();
});

$ node upcoming3.js
<table class="upcoming3 red" id="upcoming3table">
                <tbody>
                        <tr>
                </tr>
                </tbody>
        </table>


Expected Output running "node upcoming3.js"
----
<table class="upcoming3 red" id="upcoming3table">
          <tbody>
              <tr>
              <td><div id="upcoming3letters_gr_0" class="center red letters" style="width: auto;">
        <div>Α</div>
        <div>α</div>
        <div>Β</div>
        <div>β</div>
    </div></td><td><div id="upcoming3letters_gr_1" class="center red letters" style="width: auto;">
        <div>Α</div>
        <div>α</div>
        <div>Β</div>
        <div>β</div>
    </div></td><td><div id="upcoming3letters_gr_2" class="center red letters" style="width: auto;">
        <div>Α</div>
        <div>α</div>
        <div>Β</div>
        <div>β</div>
    </div></td></tr>
          </tbody>
      </table>
Reply all
Reply to author
Forward
0 new messages