SyntaxError: unexpected token: '{' in datatables.css:16:16

liujinliang01 · November 2018

Hi,
I am getting the error msg as indicated by the title of this Question. My html file is as follows. My table '#word_freq_table' is defined in one of my js files.
Could anybody help please? Thank you in advance.
best regards
Jim

Here is my html file:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/datatables.js"></script>
<script type="text/javascript" src="js/datatables.css"></script>

<script src="js/hilitor.js"></script>
<script src="js/sorttable.js"></script>

<script src="js/word_freq.js"></script>
<script src="js/json_to_table.js"></script>

<script src="bower_components/underscore/underscore.js"></script>
<script src="js/lemmatizer.js"></script>
<link rel="stylesheet" type="text/css" href="js/styles.css">

<script type="text/javascript">

    $(document).ready(function() {
        $('#word_freq_table').DataTable();
    });

</script>

</head>

<body>

<div  class=col_left>
  <div class=upper_left>
    Paste your passage here:<p>
    <textarea id=input_passage onchange=output_freq(this.value)></textarea>
    <p>
    <button type=submit id=analyse onclick=output_freq(document.getElementById('input_passage').value)> Analyse</button>
    <p>
  </div>
 
  <div id=freq></div>

</div>

<div id=output_passage class=col_center></div>

<div id=right_col class=col_right></div>

<script>

</script>

</body>
</html>

tangerine · November 2018

script type="text/javascript" src="js/datatables.css"></script

You have a css file in a "script" tag.

liujinliang01 · November 2018

Wow! Thank you very much, tangerine. I didn't expect any response, not so soon at least. I appreciate your help and I envy your sharp eyes.

My code still does not work. But wait, I need to figure out how to configure FireFox to show console message in English so that I can screencapture the error messages.

Here it is after modification:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" type="text/css" href="js/datatables.css">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/datatables.min.js"></script>

<script src="js/hilitor.js"></script>
<script src="js/sorttable.js"></script>

<script src="js/word_freq.js"></script>
<script src="js/json_to_table.js"></script>

<script src="bower_components/underscore/underscore.js"></script>
<script src="js/lemmatizer.js"></script>

<link rel="stylesheet" type="text/css" href="js/styles.css">


<script type="text/javascript">

    $(document).ready(function() {
        $("#word_freq_table").DataTable();
    });

</script>

</head>

<body>

<div  class=col_left>
  <div class=upper_left>
    Paste your passage here:<p>
    <textarea id=input_passage onchange=output_freq(this.value)></textarea>
    <p>
    <button type=submit id=analyse onclick=output_freq(document.getElementById('input_passage').value)> Analyse</button>
    <p>
  </div>
 
  <div id=freq></div>

</div>

<div id=output_passage class=col_center></div>

<div id=right_col class=col_right></div>

<script>

</script>

</body>
</html>

kthorngren · November 2018

I think you are loading datatables.js twice:

<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/datatables.min.js"></script>

I think the second is from the Download Builder which will contain jquery.dataTables.min.js plus the other features you selected. You only want to load the JS includes once. Try removing the first.

Kevin

liujinliang01 · November 2018

Hi tangerine and Kevin,
Thank you both for your kind help.

I am getting the following warnings from the console (I translated them from Chinese into English which may not be exactly what you see in English, but you get the idea):

statement expected, but getting '*'. datatables.css:53:3
skipping to next statement. datatables.css:284:3
unknown property 'zoom', statement discarded

The same thing with the following lines, which I don't believe are the real culprits.

datatables.css:285:8
datatables.css:316:3
datatables.css:331:15
datatables.css:333:15
datatables.css:355:15
datatables.css:357:15
datatables.css:371:15
datatables.css:373:15
datatables.css:397:15
datatables.css:398:15
state expected, but getting '*'. skipping to next statement. datatables.css:412:3
state expected, but getting '/'. skipping to next statement. styles.css:42:3

The following is my modified html:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" type="text/css" href="js/datatables.css">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/datatables.min.js"></script>

<script src="js/hilitor.js"></script>
<script src="js/sorttable.js"></script>

<script src="js/word_freq.js"></script>
<script src="js/json_to_table.js"></script>

<script src="bower_components/underscore/underscore.js"></script>
<script src="js/lemmatizer.js"></script>

<link rel="stylesheet" type="text/css" href="js/styles.css">


<script type="text/javascript">

    $(document).ready(function() {
        $("#word_freq_table").DataTable();
    });

</script>

</head>

<body>

<div  class=col_left>
  <div class=upper_left>
    Paste your passage here:<p>
    <textarea id=input_passage onchange=output_freq(this.value)></textarea>
    <p>
    <button type=submit id=analyse onclick=output_freq(document.getElementById('input_passage').value)> Analyse</button>
    <p>
  </div>
 
  <div id=freq></div>

</div>

<div id=output_passage class=col_center></div>

<div id=right_col class=col_right></div>

<script>

</script>

</body>
</html>

kthorngren · November 2018

statement expected, but getting '*'. datatables.css:53:3

Not sure what this means but it seems like the page is trying to execute the CSS as a JS file. You may need to use self closing tags /> on your lines that are loading the style sheets, for example (note the / at the end of the line:

<link rel="stylesheet" type="text/css" href="js/datatables.css"/>

One thing I don't see in your HTML is a table for word_freq_table.

Kevin

liujinliang01 · November 2018

Thank you very much, Kevin.

Inspired by your suggestion, I have checked my dynamically generated table and discovered that it does not have a closing tag, which may be the culprit.
I will try to figure our how to fix it and will come back to report to you in about 10 hours. I have been troubled by this css table problem for a few days already. Feeling too fatigued and need to grab some sleep.
But I now feel elated when I am getting help from you guys, great guys.

best regards
Jim

liujinliang01 · November 2018

Hi Kevin,
Thank you again.
Here is my dynamically generated table.

word	occurrence
preference	1
in	2
portrait	1
painting	1
listen	1
to	1
part	1
of	1
lecture	1
an	1
art	1
history	1
class	1
	1

And here is my html file:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" type="text/css" href="js/datatables.css" />
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/datatables.min.js"></script>

<script src="js/hilitor.js"></script>
<script src="js/sorttable.js"></script>

<script src="js/word_freq.js"></script>
<script src="js/json_to_table.js"></script>

<script src="bower_components/underscore/underscore.js"></script>
<script src="js/lemmatizer.js"></script>

<link rel="stylesheet" type="text/css" href="js/styles.css" />


<script type="text/javascript">

    $(document).ready(function() {
        $("#word_freq_table").DataTable();
    });

</script>

</head>

<body>

<div  class=col_left>
  <div class=upper_left>
    Paste your passage here:<p>
    <textarea id=input_passage onchange=output_freq(this.value)></textarea>
    <p>
    <button type=submit id=analyse onclick=output_freq(document.getElementById('input_passage').value)> Analyse</button>
    <p>
  </div>
 
  <div id=freq></div>

</div>

<div id=output_passage class=col_center></div>

<div id=right_col class=col_right></div>

<script>

</script>

</body>
</html>

liujinliang01 · November 2018

Mine still doesn't work. My table is well formed, like this:

word	occurrence
javascript	3
class="kword">	1

And my html is like this:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" type="text/css" href="js/datatables.css" />
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/datatables.min.js"></script>

<script src="js/hilitor.js"></script>
<script src="js/sorttable.js"></script>

<script src="js/word_freq.js"></script>
<script src="js/json_to_table.js"></script>

<script src="bower_components/underscore/underscore.js"></script>
<script src="js/lemmatizer.js"></script>

<link rel="stylesheet" type="text/css" href="js/styles.css" />


<script type="text/javascript">

    $(document).ready(function() {
        $("#word_freq_table").DataTable();
        var clicked_word = "";
        $(document).delegate("#word_freq_table", "click", function(e) {
            clicked_word = e.target.id;
            hi('output_passage',clicked_word);          
        });
    });
    
    
</script>

</head>

<body>

<div  class=col_left>
  <div class=upper_left>
    Paste your passage here:<p>
    <textarea id=input_passage onchange=output_freq(this.value)></textarea>
    <p>
    <button type=submit id=analyse onclick=output_freq(document.getElementById('input_passage').value)> Analyse</button>
    <p>
  </div>
 
  <div id=freq></div>

</div>

<div id=output_passage class=col_center></div>

<div id=right_col class=col_right></div>

<script>

</script>

</body>
</html>

kthorngren · November 2018

still doesn't work

Please describe what happens. Do you get any errors?

Here is my dynamically generated table.

What you posted doesn't look like an HTML table that Datatables uses. How is the table placed on the page?

Does it look like this example (click on the HTML tab)?
https://datatables.net/examples/basic_init/zero_configuration.html

Kevin

liujinliang01 · November 2018

Oh, thank you very much Kevin for coming back to answer my question.
My table is like the following.

<div id='freq'>
<table border="1" cellpadding="1" cellspacing="1" id="word_freq_table" class="sortable">
<thead><tr><th>word</th><th>occurrence</th></tr></thead>
<tbody>
<tr><td id=javascript class="kword">javascript</td>
<td id=3 class="kword">3
</td>
</tr>
<tr>
<td id=<I></I> class="kword"><I></I></td>
<td id=1 class="kword">1
</td>
</tr>
</tbody>
</table>
</div>

kthorngren · November 2018

I copied your table into this example and it works:
http://live.datatables.net/jekanola/1/edit

Without seeing your page or a test case replicating the issue it will be hard to troubleshoot. Can you post a link to your page or a test case?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

liujinliang01 · November 2018

Hi Kevin,
Thank you so much for your great help.
As I am using my project on my own computer within my internal network, the only way I can demo my use case is to send you the zipped project file.

My project is at the moment purely client-side,no server involved.

It is a vocabulary analyser used like this:
1. open the index.html file in the 'public' folder, preferably in Firefox which is my current development browser.
2. paste some English text into the textarea in the upper-left corner and three things should happen:
(1)the pasted text will be displayed in the mid-section of the page, which is working. But I need to make the table in this section scrollable.
(2)all the unique words from the text will be displayed in the table on the left-hand side. It is this table,named 'word_freq_table', that I hope to make the table-head stay fixed by using DataTables, which I haven't been able to achieve. I tried many other solutions but so far no luck yet. Since DataTables have good guys like you behind the back, I am hoping that it will work eventually. Also, at the moment, this table is sortable through 'sorttable.js'. It is desirable if it could be done through DataTables as well.
(3)when a user clicks any word in the 'word_freq_table', the clicked word will be hightlighted in the text in the mid-section. This part is working through hilitor.js and json_to_table.js, but json_to_table.js sometimes produces a table without the closing '/td></tr></table>'. This problem is not consistent as sometimes I can see that the table tags are complete, while other times not.

At them moment I am using alert debugging to display the 'word_freq_table' generated by the word_freq.js.

Thank you very very much for helping me out.

best regards
Jim

allan · November 2018

statement expected, but getting '*'. datatables.css:53:3

These should be warnings rather than errors. The DataTables CSS uses the old star hack to support IE6 and an underscore hack for IE7.

If you are having problems getting a table running, could you use https://jsfiddle.net or http://live.datatables.net to create a page showing the issue so we can look into it please?

Allan

liujinliang01 · November 2018

Thank you very much Allan, Kevin, and tangerine and anyone who helped me.

Mine is now working now. The problem was with my css file, which had some '//' instead of the proper '/* blabla*/' as the comment markers.

However, I now have another problem: the table header, though fixed now, is transparent through which I can see the row beneath it. So they now overlap, and is difficult to read. When I use css' "sticky" keyword, it has the same problem. Is it possible to solve this with DataTables? Or should I open another issue to ask about this?

best regards
Jim

kthorngren · November 2018

Are you using the FixedHeader Extension?

Kevin

allan · November 2018

The problem was with my css file, which had some '//' instead of the proper '/* blabla*/' as the comment markers.

Cound like you might have been using a SCSS file rather than a CSS one.

Allan

liujinliang01 · November 2018

Hi Kevin,
I am not using FixedHeader Extension.

best regards
Jim

kthorngren · November 2018

I am not using FixedHeader Extension.

It would be a good option for you to look at since its apart of Datatables. Depending on your goals all you need is to add the FixedHeader JS and CSS files (make sure you get the correct files for the styling you are using) and one or two config options. You can find some examples here:
https://datatables.net/extensions/fixedheader/examples/

In order to help with your current solution please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

SyntaxError: unexpected token: '{' in datatables.css:16:16

SyntaxError: unexpected token: '{' in datatables.css:16:16

Answers

Howdy, Stranger!

Categories

DataTables

SyntaxError: unexpected token: '{' in datatables.css:16:16

SyntaxError: unexpected token: '{' in datatables.css:16:16

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables