I have a flask app route that passes JSONEcoded dataframe/plotly chart to my html <script>
here is my code:
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<script type="text/javascript">
//plotly
var graphs = {{ graphJSON | safe }};
console.log(graphs)
Plotly.newPlot('chart', graphs);
</script>
it's giving me these annoying warnings, even though the script and chart are working correctly. What am I doing wrong?
These are the warnings:
Related
I am really new to Flask, and I have encountered this issue while I was trying to pass data from Python Flask to JS in the front end:
app.py
#app.route("/",methods=['POST', 'GET'])
def search():
data = {"username": "test", "site": "stackoverflow.com"}
return render_template('search.html',data=data)
search.html
<html>
<head>
<script type="text/javascript" src="{{url_for('static', filename='js/search.js')}}"></script>
</head>
<body>
</body>
</html>
search.js
console.log(data)
and the result I got from the console was
ReferenceError: data is not defined
I have checked out this question, and that one still can't address the issue in this case, I tried.
What is the main issue here? Is it a syntax issue? Or data formatting issue?
In your html you should use your data doing a cast to json, as explained by #PGHE.
To be able to use your data with minimal changes in your code, you should change your search.html to:
<html>
<head>
<script>
const jsondata = JSON.parse('{{ data | tojson | safe}}');
console.log(jsondata) //should show your data
</script>
</head>
<body>
</body>
</html>
Here it is a inline javascript inside html, but you can do it inside your file
I expected both of these files to show 'Test!' and have a Vue component. Both of these files reference the exact same Vue source code. Both of these have what appear to be exactly the same Javascript. Both of these call the message key with the exact same mustache syntax.
Instead, one file shows me a {{ message }} while the other works as intended, showing Test!. Both files indicate that Vue is 'Ready. Detected Vue 2.5.21'. Here's the result of the 'broken' file. Why is there a difference?
I've tried (on the broken file):
Changing the CDN link where I get my Vue from (didn't work).
Changing the variable name that the Vue is stored in from 'root' to 'app' to 'rooty' (didn't work).
Using single parentheses vs. double for the ID and element reference (didn't work).
Changing the location of where the Vue source code is called, putting it at the top of the body and then beneath the content, as is default (nope).
(Vue staying alive despite deleting it). Deleting the Vue reference entirely to see if I was seeing a cached page (surprise! Even with the Vue reference gone, it still said 'Ready! Detected Vue 2.5.21').
Hard refreshing on Chrome to get rid of the cache with the Vue scripts deleted... still detected Vue.
Changing the file name to get a new, uncached version without Vue detected. (End the part where Vue stays alive after deleting it, i.e. Undead Vue).
Comparing the non-working script and the working script with https://www.diffchecker.com/diff (it showed the two files as exactly the same).
Copying the working script straight from Vue's documentation (how I made the working file, and it worked).
Retyping the Vue script again (this also got it to work).
Viewing the broken script on both Chrome (Version 70.0.3538.110 (Official Build) (64-bit)) and Firefox Quantum (65.0b4 (64-bit)). Both are still broken.
(Switching the coding context from Laravel Blade templates to a standalone HTML file; didn't work, so it was not Laravel's fault).
Using JS Fiddle to make sure it's not just my machine (it isn't; it did not work).
Environment:
Browsers mentioned above
PHP 7.2.11
PHP -S localhost:8001
Vue 2.5.21
Broken file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<h1>Home Page</h1>
<div id="rooty">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var rooty = new Vue({
el: '#rooty',
data: {
message = 'Test!'
}
})
</script>
</body>
</html>
Working file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<h1>Home Page</h1>
<div id="rooty">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var rooty = new Vue({
el: '#rooty',
data: {
message: 'Test!'
}
})
</script>
</body>
</html>
Bibliography:
Learn Vue 2: Step By Step
Vue component not showing up
Simple html with vue.js not working
Introduction to Vue (Vue documentation)
The reason being a simple semicolon. On your broken file if you change = to : on the data it would work as expected.
var rooty = new Vue({
el: '#rooty',
data: {
message : 'Test!' //it is not message = 'Test!', but message: 'Test'
}
})
Here is your updated fiddle https://jsfiddle.net/jayas_godblessall/7e2g1ykd
I have seen similar questions to this, but I haven't been able to find an answer. Anyway, I am experimenting using Kendo (open source core for now) in a Visual Studio Cordova project. Taking Cordova out of the equation to start with, I am just trying to get a very simple view with the following to work..
...
<script src="lib/kendo-ui-core/js/jquery.min.js"></script>
<script src="lib/angularjs/angular.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.core.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.angular.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.loader.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.view.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.pane.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.application.js"</script>
</head>
<body kendo-mobile-application ng-app="foo">
<kendo-mobile-view ng-controller="MyCtrl" k-title="'My Title'" k-layout="'default'">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
<kendo-view-title></kendo-view-title>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<div>{{hello}}</div>
</kendo-mobile-view>
<script>
angular.module("foo", [ "kendo.directives" ])
.controller("MyCtrl", function($scope) {
$scope.hello = "Hello World!";
});
</script>
<script src="scripts/index.js"></script>
</body>
</html>
I added each Kendo file to try and get rid of each error (initially just started with kendo.core.js)
At this stage, when I try to run this (just opening index.html in Chrome, out side of Visual Studio), I get
Uncaught TypeError: kendo.ViewContainer is not a function
Observable.extend.init # kendo.mobile.view.js:469
Widget.extend.init # kendo.mobile.pane.js:102
startHistory # kendo.mobile.application.js:171
So this is occuring at the line
that.viewContainer = new kendo.ViewContainer(that.container);
in the file kendo.mobile.view.js.
I don't seem to be able to find where ViewContainer is declared.
If I use a CDN of like <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"> then this works fine, so I need to know which references to use from the core library.
I found the doco that explains what I need here.
I added everything for the "Application" section (in the exact order listed), and then put
<script src="lib/kendo-ui-core/src/js/kendo.angular.js"></script>
at the end.
I am using http://github.com/angular-translate/angular-translate for website localization.
when page load it's working perfectly.
But load page partially, the translation works in lagging way. That means,
Partial page loads first with the tag and showing in the same way in the page.
{{ 'CONGRATS' | translate }}
After 5 or 8 seconds, it translate to original text. Sometime network may be slow. In that time this should not be show like that.
Translation should be done properly, before page show to the user.
How to rectify this error ?
What mistake I made here ?
I've loaded the angular js scripts in the following manner.
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="App/angular-translate.js"></script>
<script src="App/angular-translate-loader-static-files.js"></script>
<script src="App/angular-translate-loader-partial.js"></script>
<script src="App/app.js"></script>
I am loading the languages in app.js like following,
var langSvSE = {
"ENTER_EMAIL_ADDRESS": "Ange e-post adress",
"PASSWORD": "Lösenord",
}
$translateProvider.translations('sv-SE', langSvSE);
$translateProvider.preferredLanguage('sv-SE');
I am writing a .hbs file in Webstorm 8. It looks similar to the code below.
<!-- some html -->
<script type="text/javascript">
var {{name}} = '{{value}}';
</script>
WS marks the code as erroneous: "Expected new line or semicolon", "Variable name expected"
Is it that I am doing something wrong or is it a limitation in the WS handlebars inspector? Is there a workaround?
Try changing your code as follows:
<script type="text/x-handlebars">
var {{name}} = '{{value}}';
</script>