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



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


  • Moderators

    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.


  • Moderators

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



  • @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 ?


  • Moderators

    @pankaj4288 Another QML based is chatclient-qml.



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


  • Moderators

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



  • 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 ?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.