Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Calling Qml function From JavaScript (js function called from html)

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

Scheduled Pinned Locked Moved General and Desktop
htmljavascriptqml
8 Posts 2 Posters 9.6k Views
  • 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 Offline
    P Offline
    pankaj4288
    wrote on 9 Jul 2015, 09:39 last edited by p3c0 7 Sept 2015, 10:28
    #1

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

    P 2 Replies Last reply 9 Jul 2015, 10:28
    0
    • P pankaj4288
      9 Jul 2015, 09:39

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

      P Offline
      P Offline
      p3c0
      Moderators
      wrote on 9 Jul 2015, 10:28 last edited by
      #2

      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
      1
      • P pankaj4288
        9 Jul 2015, 09:39

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

        P Offline
        P Offline
        p3c0
        Moderators
        wrote on 9 Jul 2015, 10:31 last edited by
        #3

        @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 9 Jul 2015, 11:03
        0
        • P p3c0
          9 Jul 2015, 10:31

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

          P Offline
          P Offline
          pankaj4288
          wrote on 9 Jul 2015, 11:03 last edited by
          #4

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

          P 1 Reply Last reply 9 Jul 2015, 11:10
          0
          • P pankaj4288
            9 Jul 2015, 11:03

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

            P Offline
            P Offline
            p3c0
            Moderators
            wrote on 9 Jul 2015, 11:10 last edited by
            #5

            @pankaj4288 Another QML based is chatclient-qml.

            157

            1 Reply Last reply
            0
            • P Offline
              P Offline
              pankaj4288
              wrote on 10 Jul 2015, 06:01 last edited by
              #6

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

              P 1 Reply Last reply 10 Jul 2015, 06:26
              0
              • P pankaj4288
                10 Jul 2015, 06:01

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

                P Offline
                P Offline
                p3c0
                Moderators
                wrote on 10 Jul 2015, 06:26 last edited by
                #7

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

                157

                1 Reply Last reply
                0
                • P Offline
                  P Offline
                  pankaj4288
                  wrote on 10 Jul 2015, 10:27 last edited by
                  #8

                  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
                  0

                  1/8

                  9 Jul 2015, 09:39

                  • Login

                  • Login or register to search.
                  1 out of 8
                  • First post
                    1/8
                    Last post
                  0
                  • Categories
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Groups
                  • Search
                  • Get Qt Extensions
                  • Unsolved