I have a django project and I want to start adding Vue.js elements into it, but there is a big overarching issue before I can really start in that custom delimiters (template tags) do not work in the firefox browser only Chrome, I can change them from curly braces to square brackets, but in firefox it just renders the code not the message. The following code is not part of my django project, it is just example code to demonstrate the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Learning Vue.js</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" />
<p>Hello [[ message ]]</p>
</div>
<script>
new Vue({
delimiters: ["[[","]]"],
el: '#app',
data() {
return {
message: 'Hello World'
};
}
});
</script>
</body>
</html>
So this code renders the following in Chrome:
Hello World!
And in Firefox, it renders the code:
[[ message ]]
I'm assuming there is a fix for this, as I almost never see rendered code in websites and I'm assuming Vue is popular, how do other developers get around this issue?
Related
I'm trying to connect Google One Tap Login with Django framework, but I'm having issue.
I'm not sure why this is displaying an issue. I followed all of the guidelines described in the Google documentation.
issue -
The given origin is not allowed for the given client ID
Here is my Google API client configuration for the javascript origin url.
Here is the login html template code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hi Reddit</h1>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload" data-client_id="i don't want to shere"
data-context="signin" data-ux_mode="popup" data-login_uri="http://localhost:8000/google/login/"
data-auto_select="true" data-itp_support="true">
</div>
<div class="g_id_signin" data-type="standard" data-shape="pill" data-theme="outline" data-text="continue_with"
data-size="large" data-logo_alignment="left">
</div>
</body>
</html>
I'm not sure why this is displaying an issue.
Is it possible to load Google One Tap Javascript in Django?
What should I do to load Google One Tap Javascript in Django?
I am trying to run an ExtJS 7 app using and django 3 as backend.
The same index.html created by sencha cmd loads and runs as expected.
But loading it with django backend it does not load and gives an error (described below).
I guesss it is related to csrf token.
index.html:
{% load static %}
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<title>front</title>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader"
data-app="eef86001-0c1f-47f8-bad2-962464cb0916"
type="text/javascript" src="{%static "bootstrap.js" %}" >
</script>
</head>
<body>
</body>
</html
Error in chrome:
bootstrap.js:868 GET http://127.0.0.1:8000/index/bootstrap.json?_dc=1576345210630 404 (Not Found)
VM52:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at new Manifest (bootstrap.js:1949)
at Object.setManifest (bootstrap.js:2161)
at bootstrap.js:2141
at XMLHttpRequest.readyStateChange (bootstrap.js:854)
Thank you all for any help
Koby Peleg Hen
I have this code which I use in testing the open graphic and this is the code below:
<html>
<head>
<meta charset="UTF-8" />
<title>THE KING</title>
<meta name="robots" content="Just About Me" />
<meta name="description" content="All You Should Know About Me" />
<meta property="og:locale" content="en_US"/>
<meta property="og:type" content="article"/>
<meta property="og:title" content="Just About Me"/>
<meta property="og:description" content="All You Should Know About Me"/>
<meta property="og:url" content="http://share.stephensangkn.org"/>
<meta property="article:section" content="The King"/>
<meta property="article:published_time" content="2016-07-31 15:58:30"/>
<meta property="article:modified_time" content="2016-07-31 15:58:30"/>
<meta property="og:image" content="http://share.stephensangkn.org/images/me.jpg"/>
<script src="js/jquery.js"></script>
</head>
<body>
<h2>THE KING</h2>
<img src="images/me.jpg" style="max-width:500px;max-height:500px" /><br>
<a style="cursor:pointer;">share</a>
<script>
url = "https://facebook.com/sharer.php?u=http://share.stephensangkn.org";
W = "500";
H = "800";
$('a').click(function(){
window.open(url, '', 'width='+W+',height='+H);
});
</script>
</body>
</html>
But the problem is that the image refuse to show up when the Facebook page opens, I even changed the image still same result. Here is the link to my page. Please any help?
I did try your code and I observed what you complained but I shared the link on my Facebook page and it displayed the same photo on your link so try sharing it an see
I am wanting to use Google Adsense with an Ember site I'm working on. However, if I just copy the code block I get from Google I get this error:
Error: `SCRIPT` tags are not allowed in HTMLBars templates (on line 3)
After doing some searching, it seems some people has the same issue, but I have not found a solution for this. Does anybody have any ideas?
Put external scripts in your app/index.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TmpApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/tmpapp.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/tmpapp.js"></script>
{{content-for 'body-footer'}}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-12345678-1', 'auto'); // get the exact number from your Google Analytics admin screen
ga('send', 'pageview');
</script>
</body>
</html>
Notice the script is below the content-for 'body-footer'? Remember to use your own Google Analytics code from your admin section in Google Analytics.
Hello I have this simple index file:
<?php use Cake\Routing\Router; ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
</head>
<body unresolved>
<template id="app" is="dom-bind" >
<h1 on-click="{{stateChange}}">Holaaa</h1>
</template>
<script>
var app = document.querySelector('#app');
app.stateChange= function(){
console.log("stateChange");
};
</script>
</body>
</html>
I'm getting this error:
[dom-bind::_createEventHandler]: listener method `{{stateChange}}` not defined
I have a working app with Polymer where everything works nicely. But this simple example is not working! Why!?
Why? What did I miss?
I have tried defining the stateChange function with app. and without the app. too with no success.
I have also tried wrapping it in dom change event like the documentation points out but not working
app.addEventListener('dom-change', function() {
stateChange= function(){
console.log("stateChange");
};
});
I have tried defining the stateChange function iside the dom-change event with app. with this. and without anything. Nothing works!
Remove the curly brackets.
<h1 on-click="stateChange">Holaaa</h1>
Compatibility note: The syntax differs from 0.5, which required curly brackets ({{}}) around the event handler name.
Source: https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners