Menu
I'm loading Brython and iFlyChat but Brython won't work if the iFlyChat script is uncommented. I've tried all sorts of async combinations but there seems to be something more fundamental.
JSFiddle here and code below:
https://jsfiddle.net/tutmoses/c09dhbrq/
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!-- BRYTHON -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.8/brython.js" integrity="sha256-rA89wPrTJJQFWJaZveKW8jpdmC3t5F9rRkPyBjz8G04=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.8/brython_stdlib.js" integrity="sha256-Gnrw9tIjrsXcZSCh/wos5Jrpn0bNVNFJuNJI9d71TDs=" crossorigin="anonymous"></script>
<!-- IFLYCHAT
<script>
console.log("init iflychat plugin");
var iflychat_app_id="1c0d1abc-4864-4608-acb7-6cdbfab07ce2";
var iflychat_external_cdn_host="cdn.iflychat.com",iflychat_bundle=document.createElement("SCRIPT");iflychat_bundle.src="//"+iflychat_external_cdn_host+"/js/iflychat-v2.min.js?app_id="+iflychat_app_id,iflychat_bundle.async="async",document.body.appendChild(iflychat_bundle);var iflychat_popup=document.createElement("DIV");iflychat_popup.className="iflychat-popup",document.body.appendChild(iflychat_popup);
</script> -->
</head>
<body onload="brython()">
<div class="container">
<h2 id="hello"></h2>
<button id="alert-btn">Alert & Insert</button>
<input type="text" id="text" placeholder="Enter something">
<span id="output"></span>
</div>
<!-- Alert & DOM insert -->
<script type="text/python" id="script0">
from browser import document, console, alert
def show(e):
console.log(e)
alert('Hello World')
document['hello'] <= 'Hello World'
document['alert-btn'].bind('click', show)
</script>
<!-- Text bind -->
<script type="text/python" id="script1">
from browser import document
def show_text(e):
document['output'].textContent = e.target.value;
document['text'].bind('input', show_text)
</script>
</body>
</html>
785
What you're doing is that you're using two languages here for running scripts,
1. Using Javascript for initializing iFlyChat
2. Python language for input box
Explaining about the scenario when both scripts are enabled:
The onload method which you're using to initialize brython will never be called as there is a race condition between two scripts. Delaying one for sometime solves our problem.
Solved:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!-- BRYTHON -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.8/brython.js" integrity="sha256-rA89wPrTJJQFWJaZveKW8jpdmC3t5F9rRkPyBjz8G04=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.8/brython_stdlib.js" integrity="sha256-Gnrw9tIjrsXcZSCh/wos5Jrpn0bNVNFJuNJI9d71TDs=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2 id="hello"></h2>
<button id="alert-btn">Alert & Insert</button>
<input type="text" id="text" placeholder="Enter something">
<span id="output"></span>
</div>
<!--Calling it first because it has javascript language and specially mentioned "text/javascript" in type here -->
<!-- IFLYCHAT -->
<script type="text/javascript">
console.log("init iflychat plugin");
var iflychat_app_id="1c0d1abc-4864-4608-acb7-6cdbfab07ce2";
var iflychat_external_cdn_host="cdn.iflychat.com",iflychat_bundle=document.createElement("SCRIPT");iflychat_bundle.src="//"+iflychat_external_cdn_host+"/js/iflychat-v2.min.js?app_id="+iflychat_app_id,document.body.appendChild(iflychat_bundle);var iflychat_popup=document.createElement("DIV");iflychat_popup.className="iflychat-popup",document.body.appendChild(iflychat_popup);
</script>
<!-- now initializing brython with a delay of 10ms-->
<script type="text/javascript">
setTimeout(() => {
console.log("init Brython");
window.brython();
}, 10);
</script>
<!-- Alert & DOM insert -->
<script type="text/python" id="script0">
from browser import document, console, alert
def show(e):
console.log(e)
alert('Hello World')
document['hello'] <= 'Hello World'
document['alert-btn'].bind('click', show)
</script>
<!-- Text bind -->
<script type="text/python" id="script1">
from browser import document
def show_text(e):
document['output'].textContent = e.target.value;
document['text'].bind('input', show_text)
</script>
</body>
</html>https://jsfiddle.net/td0xpqLz/2/
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With