Calling Qml function From JavaScript (js function called from html)
-
wrote on 9 Jul 2015, 09:39 last edited by p3c0 7 Sept 2015, 10:28
I am developing an app using Qt.And am stuck up at one point where I want to call Qml function from Javascript on a particular event which is fired from my html.
I have tried below approach -
app.html
<html> <head><title>Myapp</title></head> <script src="testjs.js" type="text/javascript"></script> <body bgcolor="orange"> <p id="demo" onclick="myFunction1()">Click me to change my text color.</p> </body> </html>
testjs.js
function myFunction1() { alert("alert"); someComponent.someSlot(30); someComponent.someSlot(31); }
main.qml
import 'testjs.js' as JavascriptObject ApplicationWindow { id: someComponent visible: true x: initialX y: initialY width: initialWidth height: initialHeight title: webView.title WebView { id: webView anchors.fill: parent url: initialUrl } function someSlot(v) { console.log("Signal received " + v); } Component.onCompleted: { JavascriptObject.myFunction1(41); } }
On application launch myFunction1() in testjs.js is called and it calls someSlot function in my Qml as well,but alert is not displayed. When myFunction1() function is called from html page only alert is displayed and someSlot function is not called
Please help...
-
I am developing an app using Qt.And am stuck up at one point where I want to call Qml function from Javascript on a particular event which is fired from my html.
I have tried below approach -
app.html
<html> <head><title>Myapp</title></head> <script src="testjs.js" type="text/javascript"></script> <body bgcolor="orange"> <p id="demo" onclick="myFunction1()">Click me to change my text color.</p> </body> </html>
testjs.js
function myFunction1() { alert("alert"); someComponent.someSlot(30); someComponent.someSlot(31); }
main.qml
import 'testjs.js' as JavascriptObject ApplicationWindow { id: someComponent visible: true x: initialX y: initialY width: initialWidth height: initialHeight title: webView.title WebView { id: webView anchors.fill: parent url: initialUrl } function someSlot(v) { console.log("Signal received " + v); } Component.onCompleted: { JavascriptObject.myFunction1(41); } }
On application launch myFunction1() in testjs.js is called and it calls someSlot function in my Qml as well,but alert is not displayed. When myFunction1() function is called from html page only alert is displayed and someSlot function is not called
Please help...
Hi @pankaj4288
On application launch myFunction1() in testjs.js is called and it calls someSlot function in my Qml as well,but alert is not displayed.
QML doesn't support all of the JavaScript's functionality. One of them is alert()
When myFunction1() function is called from html page only alert is displayed and someSlot function is not called
That is because when you load that HTML page in
WebView
it doesn't have access tosomeComponent
defined in QML. -
I am developing an app using Qt.And am stuck up at one point where I want to call Qml function from Javascript on a particular event which is fired from my html.
I have tried below approach -
app.html
<html> <head><title>Myapp</title></head> <script src="testjs.js" type="text/javascript"></script> <body bgcolor="orange"> <p id="demo" onclick="myFunction1()">Click me to change my text color.</p> </body> </html>
testjs.js
function myFunction1() { alert("alert"); someComponent.someSlot(30); someComponent.someSlot(31); }
main.qml
import 'testjs.js' as JavascriptObject ApplicationWindow { id: someComponent visible: true x: initialX y: initialY width: initialWidth height: initialHeight title: webView.title WebView { id: webView anchors.fill: parent url: initialUrl } function someSlot(v) { console.log("Signal received " + v); } Component.onCompleted: { JavascriptObject.myFunction1(41); } }
On application launch myFunction1() in testjs.js is called and it calls someSlot function in my Qml as well,but alert is not displayed. When myFunction1() function is called from html page only alert is displayed and someSlot function is not called
Please help...
@pankaj4288 Looking at your post what you are trying to can be achieved using
Qt WebChannel
.
Have a look at web-content. Specifically the last topic in it. -
@pankaj4288 Looking at your post what you are trying to can be achieved using
Qt WebChannel
.
Have a look at web-content. Specifically the last topic in it.wrote on 9 Jul 2015, 11:03 last edited by@p3c0
Hi,
I have tried that 'standalone' example. That seems to be very confusing and is becoming difficult to incorporate in my application. Is there any simple example present for using QTWebChannel ? -
@p3c0
Hi,
I have tried that 'standalone' example. That seems to be very confusing and is becoming difficult to incorporate in my application. Is there any simple example present for using QTWebChannel ?@pankaj4288 Another QML based is chatclient-qml.
-
wrote on 10 Jul 2015, 06:01 last edited by
m able to use qwebchannel in my single screen application and able to send data from html to c++ via js
-
m able to use qwebchannel in my single screen application and able to send data from html to c++ via js
@pankaj4288 Thats great :)
Please mark the post as solved if done. -
wrote on 10 Jul 2015, 10:27 last edited by
I am having more issues in it. When I run this on my andorid devices. It runs fine for teh forst time, but after that it shows me below error-
I/chromium(17111): [INFO:CONSOLE(16)] "WebSocket connection to 'ws://127.0.0.1:12345/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED"Can someone help me ?
8/8