MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Adding a jQuery Module

    Scheduled Pinned Locked Moved Development
    7 Posts 4 Posters 3.7k Views 4 Watching
    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.
    • N Offline
      NiviJah
      last edited by

      Hi Guys,
      I played around with building a module by myself and I got some questions.
      I have to say my knowledge in Vanilla JS is somewhat limited, so I turned to jQuery.

      I was able to including jQuery, and any script and CSS for that matter, But I was not able to “Init” it.
      Is there a place I can call “document ready” ? tried in the getDOM method and any other “build in” method and couldn’t get it to init.

      The other thing that was bothering me is not being able to debug properly, i’m working via SSH.
      where can I see logs, or better yet console.log() or “debugger;” ?

      I am also not sure what “browser” is being used, I don’t think CSS3 stuff is working.

      Thanks !

      strawberry 3.141S 1 Reply Last reply Reply Quote 0
      • strawberry 3.141S Offline
        strawberry 3.141 Project Sponsor Module Developer @NiviJah
        last edited by

        @NiviJah i think the document ready is fired before the modules are loaded (didn’t test it) there is a broadcast of the core called DOM_OBJECTS_CREATED

        if you’re using console.log or Log.info it will be in the electron console, you can see the console by starting the mirror via npm start dev

        electron is based on chromium prefix would be -webkit

        If you tell for what you want to use jquery, we can help you to do it in vanilla javascript

        Please create a github issue if you need help, so I can keep track

        morozgrafixM 1 Reply Last reply Reply Quote 1
        • morozgrafixM Offline
          morozgrafix Moderator @strawberry 3.141
          last edited by morozgrafix

          In addition to @strawberry-3.141 response. I wanted to chime in with option of running it locally on your dev machine and using node serveronly and pointing your browser at http://localhost:8080 using familiar tools while developing. One of the catches is it will not work well if you are developing module that needs to interact with GPIO or other proprietary RasPi functionality.

          My personal workflow is roughly outlined here: https://forum.magicmirror.builders/post/13272

          1 Reply Last reply Reply Quote 1
          • N Offline
            NiviJah
            last edited by

            Thank you,
            This is very helpful.
            If I understand correctly, do I need to use DOM_OBJECTS_CREATED like this ?

            notificationReceived: function(notification, payload, sender){
            	if (notification === 'DOM_OBJECTS_CREATED'){
            		$(document).ready().....
            	}
            },
            

            Does that go into my plugin file ? (i.e not the node helper)

            strawberry 3.141S 1 Reply Last reply Reply Quote 0
            • strawberry 3.141S Offline
              strawberry 3.141 Project Sponsor Module Developer @NiviJah
              last edited by

              @NiviJah your Code example is correct, except that you don’t Need the ready function, at this Point the Dom is ready and you can do whatever You Wanted to without wrapping it into another event

              Please create a github issue if you need help, so I can keep track

              1 Reply Last reply Reply Quote 0
              • N Offline
                NiviJah
                last edited by NiviJah

                jQuery didn’t want to play nice, i don’t know why, so I had to work with Vanilla JS.

                here is the result

                0_1486003297499_2017-02-01-213544_1080x1920_scrot.png

                E 1 Reply Last reply Reply Quote 1
                • E Offline
                  E3V3A @NiviJah
                  last edited by

                  @NiviJah Did you get jQuery to run at all?

                  "Everything I do (here) is for free – altruism is the way!"
                  MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  • First post
                    Last post
                  Enjoying MagicMirror? Please consider a donation!
                  MagicMirror created by Michael Teeuw.
                  Forum managed by Sam, technical setup by Karsten.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy