Chrome fails to generate multiple JW players with PHP/JS

Question

I'm having a hard time making Chrome generate multiple JW players with PHP and Javascript. Just to mention it, everything works fine in Opera/Pale Moon/Firefox. Here's how it's supposed to look, here's how it renders in Chrome. Funny thing is, when I hover over the places where JW players are supposed to be, the cursor changes to "pointer" and I can actually play the file, it's just that the player itself is invisible.

I have multiple audio files that have all their info (file name, path, description, etc) in a MySQL database. So, while loop generates separate DIV for each file in the database, and sets its ID tag to be the file name value. Here's the code (I've left out the MySQL queries and everything else since this is the troublesome part):

<?php
while ($row = mysql_fetch_array($query)){
    $fullpath = $row['fileFolder'].$row['fileName']; ?>
    <div id="<?php echo $row['fileName']; ?>">Loading the player...</div>
        <script type="text/javascript">
        var divName = <?php echo json_encode($row['fileName']); ?>; //since each DIV id has to be different
        var fullpath = <?php echo json_encode($fullpath); ?>;
            jwplayer(divName).setup({
                file: fullpath,
                width:300,
                height:30
            });
        </script>
    <?php
        echo "<p class='descriptionAudio'>".$row['description'];
        echo "<br>";
} ?>

Chrome shows source same as the working browsers, while Chrome's Developer tool says:

There was an error while handling a listener: Error: SyntaxError: DOM Exception 12 function (a){n.playerReady(a);f.css.unblock()} jwplayer.js:3
42 Uncaught Error: SyntaxError: DOM Exception 12

By the way, everything works well when I manually set the DIVs ID value.

Well, then the ID is likely to be the culprit. What kinds of values can `` have? — Pekka, Mar 09 '13 at 14:43
Since those are audio files, it holds values such as "14501_1_1.mp3", "rdj201.mp3", etc. Maybe I should strip the '.mp3' bit? — E. Normous, Mar 09 '13 at 14:49
@E that should be okay: [What characters are allowed in DOM IDs?](http://stackoverflow.com/q/1077084) any duplicates, or other more forbidden characters in there? Like say `()|{}` .... — Pekka, Mar 09 '13 at 14:50
Not really, no duplicates, no special characters whatsoever. — E. Normous, Mar 09 '13 at 14:59
Do you have a numeric ID in `$row`? Can you try using that just to see whether it works better? — Pekka, Mar 09 '13 at 15:02
Ah, apologies - sole numbers are taboo; my fault. Can you try adding a prefix like `file_`? ie. `file_1` `file_2` `file_3` — Pekka, Mar 09 '13 at 15:22
That did the trick, works like a charm now! Thanks mate =) By the way, how do I select your answer and mark the question as answered? Thanks again! — E. Normous, Mar 09 '13 at 15:27

score 1 · Accepted Answer · edited May 23 '17 at 10:32

You say it works when you specify IDs manually instead of basing them on the file name like shown in this row:

  <div id="<?php echo $row['fileName']; ?>">Loading the player...</div>

that makes it likely that one of the IDs that come from the database doesn't conform with the requirements for a well-formed DOM ID.

Try to find the invalid characters used, or use an incremental, numeric ID field (prefixed by something like file_) instead.

Chrome fails to generate multiple JW players with PHP/JS

1 Answers1