Calling Qml function From JavaScript (js function called from html)

pankaj4288

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...

p3c0

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 to someComponent defined in QML.

p3c0

@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

@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

@pankaj4288 Another QML based is chatclient-qml.

pankaj4288

m able to use qwebchannel in my single screen application and able to send data from html to c++ via js

p3c0

@pankaj4288 Thats great :)
Please mark the post as solved if done.

pankaj4288

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 ?

Qt World Summit: Submit your Presentation

Calling Qml function From JavaScript (js function called from html)