Disclaimer: I am very new to developing (2nd year CS major), so please bear with me.
I am currently developing a chrome extension that pulls JSON data from a page and then displays the data in the extension through an HTML table.
I am using a chrome extension template that is available through Visual Studios.
Since I do not have the reputation, I cannot post the link for reference, but if you were to type "chrome extension Visual Studios" in google, it is the first link.
I am using a jQuery plugin for tables called "DataTables" that is downloaded through Visual Studios.
Whenever I run the solution from Visual Studios on a test "index.htm" file, I get this error in the console:
Uncaught SyntaxError: Unexpected token ILLEGAL
jquery.dataTables.min.js:1
popup.js:1
This is how the console reads "jquery.dataTables.min.js" Which is a file that is downloaded with the plugin and is referenced in the HTML file according to the plugin's installation instructions.
The console reads "popup.js" in the same fashion.
The Question: Why is the console reading my two files in this way?
I have looked over every single question on StackOverflow pertaining to this error and have tried every solution that was given, to no avail.
I have checked multiple times for any sign of a Unicode 200b "Zero-Width Space"
I have set the default font to Times New Roman, and have the encoding set to UTF-8 for all files.
The network diagnostic in the console shows that all these files have loaded and when I run the html file through a text editor, the solution works. I have a fully sort-able table displaying the dummy data.
I assume that most of you are familiar with the layout of a chrome extension (manifest, html file, javascript files, icon.png).
Here is the respective code for the HTML and JS (I believe the manifest and icon are irrelevant for my question)
"popup.html" HTML (Jquery/JS/CSS references and a table to hold the data):
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="app/popup.js"></script>
<link href="css/classic.css" rel="stylesheet" />
<title>Popup</title>
<body>
<table id="example" class="display" width="100"></table>
</body>
</html>
"popup.js" JAVASCRIPT (hardcoded JSON data with a function using "Datatables" library to initialize table headings)
var dataSet = [
["00001", "John", "Smith"],
["00002", "Jane", "Doe"],
["00003", "Ted", "Johnson"],
["00004", "Betty", "Smith"],
["00005", "Susan", "Wilson"],
["00006", "John", "Doe"],
["00007", "Bill", "Watson"],
["00008", "Walter", "Wright"]
];
$(document).ready(function () {
$('#example').DataTable({
data: dataSet,
columns: [
{ title: "Emp. Number" },
{ title: "First Name" },
{ title: "Last Name" }
]
});
alert('If i loaded, it loaded');
});
First, may I suggest trying to load the JS file from a CDN (your display of the resource was rather odd) this is a common javascript CDN and if you are unable to do so, check to makesure that the datatables file is in fact, javascript.
Secondly, it appears as though you are loading jQuery once at the top and then again with the datatables JS (if, in fact, it is actually loading)
Related
Let me start by saying that I'm primarily a C# programmer who only extremely rarely ventures into JavaScript.
I can write myself some JS code as long as its mostly plain. I can handle jQuery and the odd self-sufficient 3rd-party library, but couldn't code myself out of a wet paper bag when React, Angular, Bootstrap and others enter the scene. I'm also not used to using npm or any other similar package manager.
It was never really my job nor interest, so I never went there. Whenever I code some JS, I reference the required JS files in my <script> tags and then use them as directly as possible.
I'm currently creating a very simple proof of concept web app which will have its client parts rebuilt by competent people sooner or later. But in the mean time I have to provide the bare-bones functionality that will serve as a rough guideline for the next team to take over, whenever that might be.
I've picked two libraries that each seem easy to use and get the job done, when used separately. But when I try to use them together on the same page, I run into a problem: they both use the same name for their main type, and I can't seem to disambiguate between them.
These are the libraries:
JSON Editor
JSON Schema Form Builder
They both declare a type named JSONEditor, which I can use as long as I don't reference both of the libraries at once.
So far I've tried to solve this by using modules and import-ing the type using different names, but it didn't work... I got a bunch of errors in the console about "import not found" and "e is not defined", which makes me think I'm tackling this wrong.
How would I solve this using plain JS if possible?
UPDATE: As suggested, I'm providing a minimal example that demonstrates my use:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>
<link href="/lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="editor" style="width: 300px; height: 200px;"></div>
<div id="form"></div>
</div>
<!--library 1: https://github.com/josdejong/jsoneditor -->
<script src="/lib/jsoneditor/jsoneditor.min.js"></script>
<!--library 2: https://github.com/jdorn/json-editor -->
<script src="/lib/jsonform/jsonform.min.js"></script>
<script>
// Library 1: The JSON code editor.
var editor = new JSONEditor(document.getElementById("editor"), { mode: "code" });
// Library 2: The form builder.
var form = new JSONEditor(document.getElementById("form"), {
ajax: true,
schema: {
$ref: "/api/describe/service/test"
}
});
</script>
</body>
</html>
If I comment out the use of one library (whichever), the other works as expected and the content is displayed at the respective target <div>. But if I try both at once, as shown above, nothing is displayed, and the following error is output to console:
Uncaught TypeError: t is undefined
This happens at the var editor = new JSONEditor line, which makes me think that the type from the second library overwrites the first and causes the problem.
This is understandable to me and isn't the issue per-se. The issue is that I don't know how to import the two JSONEditor types so that they can be referenced separately.
The maintainer of the code editor (JSON Editor, not JSON Schema Form Builder) has addressed and closed an issue about exactly this in the past: https://github.com/josdejong/jsoneditor/issues/270
His recommended solution is something like the following:
<script src="assets/jsoneditor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorA = JSONEditor;
</script>
<script src="assets/json-editor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorB = JSONEditor;
</script>
If you must use script tags this is probably the way to go.
I'm running Umbraco version 7.9.2 and following this tutorial to learn how to create custom property editors.
My first step was to create a folder called MarkDownEditor
My second step was to create a file named package.manifest.json
{
//you can define multiple editors
"propertyEditors": [
{
/*this must be a unique alias*/
"alias": "My.MarkdownEditor",
/*the name*/
"name": "My markdown editor",
/*the icon*/
"icon": "icon-code",
/*grouping for "Select editor" dialog*/
"group": "Rich Content",
/*the HTML file we will load for the editor*/
"editor": {
"view": "~/App_Plugins/MarkDownEditor/markdowneditor.html"
}
}
],
//array of files we want to inject into the application on app_start
"javascript": [
"~/App_Plugins/MarkDownEditor/markdowneditor.controller.js"
]
}
I then created two files: markdowneditor.controller.js and markdowneditor.html in the MarkDownEditor directory
markdowneditor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div ng-controller="My.MarkdownEditorController">
<textarea ng-model="model.value"></textarea>
</div>
</body>
</html>
markdowneditor.controller.js
angular.module("umbraco")
.controller("My.MarkdownEditorController",
//inject umbracos assetsService
function ($scope, assetsService) {
//tell the assetsService to load the markdown.editor libs from the markdown editors
//plugin folder
assetsService
.load([
"~/App_Plugins/MarkDownEditor/lib/Markdown.Converter.js",
"~/App_Plugins/MarkDownEditor/lib/Markdown.Sanitizer.js",
"~/App_Plugins/MarkDownEditor/lib/Markdown.Editor.js"
])
.then(function () {
//this function will execute when all dependencies have loaded
alert("editor dependencies loaded");
console.log('stuff has loaded!');
});
//load the separate css for the editor to avoid it blocking our js loading
assetsService.loadCss("~/App_Plugins/MarkDownEditor/lib/Markdown.Editor.css");
});
Finally, I registered the editor in the Umbraco CMS, put it in a simple document type and finally visited the page in multiple browsers.
And... I see nothing. It seems like the editor is working (I think) but I don't get why I'm not seeing my alert or console.log that's contained in the controller. What did I do wrong? I've tried multiple browsers so I know it's not a caching issue and I've made sure to rebuild the project in visual studio.
Edit 1 :
Per suggestions, I've tried modifying the assetService file paths since ~ seems to be a C# thing and my controller is a javascript file. It now looks like this
.load([
"/App_Plugins/MarkDownEditor/lib/Markdown.Converter.js",
"/App_Plugins/MarkDownEditor/lib/Markdown.Sanitizer.js",
"/App_Plugins/MarkDownEditor/lib/Markdown.Editor.js"
])
However, I'm still not seeing an alert or a console log.
One thing I did realize I was doing wrong was not including my markdown value in the markdown template. I've done that and now see the content that I put in the editor when creating a new markdown page.
Simple solution. My package.manifest file had a .json extension. When that was removed, everything worked perfectly. For anyone coming across this, the ~ works perfectly fine in the javascript file.
I am having difficulty with a specific JQuery $.post call to a PHP-based processor. I created a test page with the code below located here: http://goo.gl/Bg7H2u
Note this is located on a subdomain, but we are not doing cross-domain posting. Everything should be included on the subdomain.
There do not seem to be any JS errors as reported in the error console.
The processor /get-data.html is the general purpose PHP processor, and, if you load the processor page with the right value, it returns a dataset from the MySQL database in JSON format. We have this working on the main domain without issue, and other $.post calls seem to work OK from this subdomain (not to this /get-data.html processor, but other processors that process form content).
See the actual processor output here: http://goo.gl/yOzrm2
I must be missing something obvious, but I am coming up empty. Thoughts?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320px, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var prices;
$(document).ready(function(){
$.post( "/get-data.html", { table: 'prices' },
function( data ) {
prices = data;
alert(prices);
}, 'json');
});
</script>
</head>
<body>
<div style="overflow-x: hidden;" id="divMain">
</div>
</body>
</html>
Thanks for any advice you can provide.
If you do View Source on the processor output, you'll see that your script is returning:
<p>{"Basic Plan":["349"],"Basic":["349"],"Premium Plan":["549"],"Premium":["549"],"Standard Plan":["429"],"Standard":["429"],"Bonus Plan":["175"],"Additional Central AC System":["99"],"Additional central heating system":["99"],"Central Vacuum":["99"],"Whole home humidifier":["49"],"Pool (in-ground)":["179"],"Spa (in-ground)":["179"],"Septic System":["99"],"Sump Pump":["99"],"Well pump":["99"],"Whole home water softener":["99"],"Lawn sprinkler system (in-ground)":["99"],"Wine refrigerator":["49"],"Ice maker (free standing)":["49"],"Home phone (unlimited)":["49"],"TV Protection (Flat screen up to 60 inches)":["99"],"PC Protection (laptop or desktop)":["49"]}</p>
There's <p> at the beginning and </p> at the end. This is not valid JSON. You need to fix the server script so that it doesn't print anything other than the JSON (whitespace is OK, that's it).
1.confirm that /get-data.html is the correct relational url for your file location.
If you navigate directly to the /get-data.html, does it produce the results that you are after.
try running the same code without , 'json' and see if it works.
hope this helps
We've just launched our new Magento site and the letter 'c' is appearing in quotes immediately after the tag. It's not showing up before on my local machine or on our QA site, I've checked the template files and it is not there either. I'm almost certain it can not be a code issue as we have the same code running locally and on our QA site under version control with GIT.
We've cleared the cache and I've tried checking to see if JavaScript was inserting it with the chrome dev tools but could find nothing.
Strangely, the 'c' is not in the view source document but I can see it with the chrome inspector.
I also don't think it can be coming from Magento CMS Pages/Blocks as it loading immediately after the tag.
thanks for the link. after reviewing the page source, you have an extra c character in the header area:
<!-- END GOOGLE ANALYTICS CODE -->
c<script type="text/javascript">//<![CDATA[
var Translator = new Translate([]);
//]]></script>
Notice that c before the script tag?
Just in support to Benny Lin's very helpful answer.
What was happening was we had our Google Analytics code loading from a template file which contained the stray letter 'c'. We could see this on our local machines as this templates was disabled in the Magento admin settings, but not on production.
This issue seems to demonstrate that when a stray letter appears within the <body> tags on your dev tools inspector and not the view source page it may be because it is in the <head> section. The browser seems to push all poorly formatted html from the <head> section into the <body> section when rendering.
For example if you open the below html in the chrome browser you will see what I mean:
<!DOCTYPE html>
<html>
<head>
c<title>Title of the document in head</title>
<script type="text/javascript">
var test = "test";
</script>
</head>
<body>
The body of the document......
</body>
</html>
Also while we were searching for the stray letter, we were ably to remove it with the below JavaScript that targets the offending XML node in the DOM with an XPath expression and removes that node only.
<script type="text/javascript">
function _x(STR_XPATH) {
var xresult = document.evaluate(STR_XPATH, document, null, XPathResult.ANY_TYPE, null);
var xnodes = [];
var xres;
while (xres = xresult.iterateNext()) {
xnodes.push(xres);
}
return xnodes;
}
jQuery(_x('//html/body/text()[contains(.,"c")]')).remove();
</script>
I'm trying to use pyjamas (http://pyjs.org/). My input file, named hi.py, looks like this:
from pyjamas import Window
from pyjamas.ui import RootPanel, Button
from pyjamas.ui import HTML
def greet(sender):
Window.alert("Hello!")
b = Button("Click me", greet)
RootPanel().add(b)
I run the following command:
python ~/pyjs-pyjs-07f54ad/bin/pyjsbuild hi.py
Building : hi
PYJSPATH : [
/Users/michaelnatkin/HelloPyjs
/Users/michaelnatkin/pyjs-pyjs-07f54ad/library
/Users/michaelnatkin/pyjs-pyjs-07f54ad/addons
]
Built to : /Users/michaelnatkin/HelloPyjs/output
Which appears to run without errors, and here is my resulting directory:
Michael-Natkins-MacBook-Pro-2:HelloPyjs michaelnatkin$ ls .
hi.js hi.py output
Michael-Natkins-MacBook-Pro-2:HelloPyjs michaelnatkin$ ls output
__init__.py gchart.gif hi.safari.cache.html
_pyjs.js hi.html history.html
bootstrap.js hi.ie6.cache.html tree_closed.gif
bootstrap_progress.js hi.mozilla.cache.html tree_open.gif
disclosurePanelClosed.png hi.nocache.html tree_white.gif
disclosurePanelClosed_rtl.png hi.oldmoz.cache.html
disclosurePanelOpen.png hi.opera.cache.html
I then direct my browser to one of the html files: file:///Users/michaelnatkin/HelloPyjs/output/hi.html
and I get... a blank page. The only error in my js console is:
Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
which I guess isn't too surprising since the html file says:
<html>
<!-- auto-generated html - You should consider editing and adapting this
to suit your requirements. No doctype used here to force quirks mode; see
wiki for details: http://pyjs.org/wiki/csshellandhowtodealwithit/
-->
<head>
<title>hi (Pyjamas Auto-Generated HTML file)</title>
<meta name="pygwt:module" content="hi">
</head>
<body style="background-color:white">
<script type="text/javascript" src="bootstrap.js"></script>
<iframe id="__pygwt_historyFrame" style="display:none;"></iframe>
<script type="text/javascript" src="bootstrap.js"></script>
<iframe id="__pygwt_historyFrame" style="display:none;"></iframe>
</body>
</html>
So.. I'm completely stuck. Can someone tell me how to get this bad boy to produce output? I've got a much more complicated app I want to create, but if I can't say "Hello" it isn't going to go well. Thank you!
Have you tried it in Firefox too? While nothing is displayed with Chrome, with Firefox I get an error message which comes from the way you import RootPanel and Button. You should replace your single line by:
from pyjamas.ui.RootPanel import RootPanel
from pyjamas.ui.Button import Button
After that your button greets me properly.
And regarding the Chrome issue, either launch it with --allow-file-access-from-files or run a local web server to display your page. More details there: https://github.com/pyjs/pyjs/wiki/googlechromeproblems