Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

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

    General and Desktop
    html javascript qml
    2
    8
    9286
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      pankaj4288 last edited by p3c0

      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 2 Replies Last reply Reply Quote 0
      • p3c0
        p3c0 Moderators @pankaj4288 last edited by

        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.

        157

        1 Reply Last reply Reply Quote 1
        • p3c0
          p3c0 Moderators @pankaj4288 last edited by

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

          157

          P 1 Reply Last reply Reply Quote 0
          • P
            pankaj4288 @p3c0 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 1 Reply Last reply Reply Quote 0
            • p3c0
              p3c0 Moderators @pankaj4288 last edited by

              @pankaj4288 Another QML based is chatclient-qml.

              157

              1 Reply Last reply Reply Quote 0
              • P
                pankaj4288 last edited by

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

                p3c0 1 Reply Last reply Reply Quote 0
                • p3c0
                  p3c0 Moderators @pankaj4288 last edited by

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

                  157

                  1 Reply Last reply Reply Quote 0
                  • P
                    pankaj4288 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 ?

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post