Announcement

Collapse
No announcement yet.

Does anyone know how to use the ajax component?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Does anyone know how to use the ajax component?

    I created a (config)deviceutility page for my Sonos plugin (see picture). I want it to update dynamically so I tried adding a AddAjaxHandlerPost("action=updatetime", "deviceutility") to the form but don't seem to have any effect.
    Anyone who has mastered this? What should I add to get a call back lets say every second to check on changes?

    Has anyone coded up a configdevice page? Unless I set the page name for all object on the page to "deviceutility", it doesn't seem to work.

    Thanks

    Dirk
    Attached Files

    #2
    There is already a timer on that page and it will automatically update status items on the page. What did you want to update?
    💁‍♂️ Support & Customer Service 🙋‍♂️ Sales Questions 🛒 Shop HomeSeer Products

    Comment


      #3
      Originally posted by rjh View Post
      There is already a timer on that page and it will automatically update status items on the page. What did you want to update?
      Pretty much anything associated with the player, like track being played, artist, album, art, track position, volume .....

      I'm pulling my hair out on these web pages. There is obviously something I do wrong, either in how I name them or use them. Do we have debug flags that we can turn on for HS3? When we were still doing 2.99 versions, I could see events from HS3 wrt webpage events (like clicking on something) that were unresolved. I suspect that the web client actually communicates with the web server but between the HS3 web server and my PI, I must be doing something wrong or missing something so that the events don't make it into my plugin.

      As I wrote before, I caught one of those when I used the configdevice and configdevicepost methods that are part of the standard PI framework. If I did not name the page "deviceutility" and set all JSQuery object on that web page to this specific pagename, my configdevicepost method would never be called by HS3. Back in 2.99 I noted a HS3 event that the event was received but nothing happened, so by trial and error (actually verbatim copying the example) and found out.

      I want to create these playerconfig webpages as shown in the picture that update dynamically. When I create them as deviceutility pages, I got the clicks to work but can't figure out a way to get the ajax stuff to work, nor is it clear to me, whether I then need to rebuild the whole page or as supposed with Ajax, only update the relevant part. So I assumed maybe the configdevice functions couldn't support this. So I created a full webpage that I register. In that case, apart from the page being displayed properly, no events show up. Where I left it last weekend is that I suspect that using an underscore or mid-score character in the pagename might be the problem. These pages are name PlayerControl-RICON_xxxxxxx to separate them out between the multiple players.

      Any thoughts or suggestions?

      Dirk

      Comment


        #4
        I will update the sample with a dynamic update, but here is what you need to do:

        Enable the page timer with:

        Me.RefreshIntervalMilliSeconds = 2000

        This causes the page to postback every 2 seconds

        Now a name pair needs to be set so the postback posts a name/value pair:

        stb.Append(Me.AddAjaxHandlerPost("action=updatetime", page))

        This tells the page that when it posts back, post "action=updatetime"

        The page it posts back to is your page, as noted in the "page" parameter above. This is usually where things get messed up, this is the page name you used when you called RegisterPage to register your page with HS. It is then called through the PostBackProce in your HSPI class. Note that if you have more than one page, the page is passed to this procedure so you can then call the proper page. Something like:

        Select Case pageName
        Case "Sample Plugin"
        Return pluginpage.postBackProc(pageName, data, user, userRights)
        Case "Test Page"
        Return pluginTestPage.postBackProc(pageName, data, user, userRights)
        End Select
        💁‍♂️ Support & Customer Service 🙋‍♂️ Sales Questions 🛒 Shop HomeSeer Products

        Comment


          #5
          I updated the plugins samples here:

          http://forums.homeseer.com/showthread.php?t=160064

          I added the timer to the sample plugin along with the date and the date updates automatically.
          💁‍♂️ Support & Customer Service 🙋‍♂️ Sales Questions 🛒 Shop HomeSeer Products

          Comment


            #6
            Originally posted by rjh View Post
            I updated the plugins samples here:

            http://forums.homeseer.com/showthread.php?t=160064

            I added the timer to the sample plugin along with the date and the date updates automatically.
            Awesome!
            Will look at it tonight.
            Thanks!
            Dirk

            Comment


              #7
              Multiple selection for listboxes

              Rich, now that I have your attention .....

              1. Do you know whether multiple selection of listbox items ever got introduced (http://forums.homeseer.com/showthrea...#post1054237)?
              2. Can we programmatically "group" devices or can that only be done by the users (http://forums.homeseer.com/showthrea...84#post1065884)
              3. The device page shows me (http://forums.homeseer.com/showthread.php?t=159222) weird info. I'm sure it works well for on/off type of devices but I have the suspicion it will give me problems for how I use devices (to hold track info, etc). Are there any rules or recommendations on how PI authors should make maximum use of this or avoid it all
              4. I noted that browser settings like "hide/show all" and sorting on specific column in the device status page are lost when HS3 is restarted.


              Dirk

              Comment


                #8
                Dirk/Rich
                I just loaded up the sample plugin that Rich put there and it does work just like Rich is saying:

                Within GetPagePlugin there is an ajax timer there:
                PHP Code:
                Me.RefreshIntervalMilliSeconds 2000
                stb
                .Append(Me.AddAjaxHandlerPost("action=updatetime"IFACE_NAME)) 
                Every 2 seconds, that will postback to the postBackProc where you can check the parts("action") for "updatetime". You can then update your div with any values you want.

                That is pretty slick for getting live info back from the server.
                HS4Pro on a Raspberry Pi4
                54 Z-Wave Nodes / 21 Zigbee Devices / 108 Events / 767 Devices
                Plugins: Z-Wave / Zigbee Plus / EasyTrigger / AK Weather / OMNI

                HSTouch Clients: 1 Android

                Comment


                  #9
                  Originally posted by rmasonjr View Post
                  Dirk/Rich
                  I just loaded up the sample plugin that Rich put there and it does work just like Rich is saying:

                  Within GetPagePlugin there is an ajax timer there:
                  PHP Code:
                  Me.RefreshIntervalMilliSeconds 2000
                  stb
                  .Append(Me.AddAjaxHandlerPost("action=updatetime"IFACE_NAME)) 
                  Every 2 seconds, that will postback to the postBackProc where you can check the parts("action") for "updatetime". You can then update your div with any values you want.

                  That is pretty slick for getting live info back from the server.
                  I'll check tonight. I have the stb.Append(Me.AddAjaxHandlerPost("action=updatetime", IFACE_NAME) line in my webpage (by the way, I have a pagename iso IFACE_NAME) but I DO NOT have the Me.RefreshIntervalMilliSeconds = 2000. My bad, I thought I read somewhere that was the default, so it appears it must be specifically stated. I will confirm later.

                  I do have one additional question on this. I seem to have read a while back that actually the AJAX extensions allow you to refresh a part of your page, having an autorefresh for a whole page I think has been part of HTML for quite a while (experts please weigh in if I have this wrong). From what I read, you would create a div section and you can have just that section updated. The reason this is important for me has to do with the fact that the dynamic info (like track name, album ,artist, position etc) sits on the same page that has 2 listboxes. One which could hold easily a few thousand tracknames to select from, so updating the WHOLE page every 2 seconds isn't going to work.

                  See my problem ...

                  Dirk

                  Comment


                    #10
                    A couple of things:

                    Note that the sample uses IFACE_NAME as the page name for the sample web page, but most likely you will use a different name. Make sure you use the same name in the register function as you do in the AddAjaxHandlerPost.

                    Note that we are not updating the entire page, we are doing an Ajax call and in this case we are updating just the content in the DIV, which is just part of the page.

                    Originally posted by dcorsus View Post
                    I'll check tonight. I have the stb.Append(Me.AddAjaxHandlerPost("action=updatetime", IFACE_NAME) line in my webpage (by the way, I have a pagename iso IFACE_NAME) but I DO NOT have the Me.RefreshIntervalMilliSeconds = 2000. My bad, I thought I read somewhere that was the default, so it appears it must be specifically stated. I will confirm later.

                    I do have one additional question on this. I seem to have read a while back that actually the AJAX extensions allow you to refresh a part of your page, having an autorefresh for a whole page I think has been part of HTML for quite a while (experts please weigh in if I have this wrong). From what I read, you would create a div section and you can have just that section updated. The reason this is important for me has to do with the fact that the dynamic info (like track name, album ,artist, position etc) sits on the same page that has 2 listboxes. One which could hold easily a few thousand tracknames to select from, so updating the WHOLE page every 2 seconds isn't going to work.

                    See my problem ...

                    Dirk
                    💁‍♂️ Support & Customer Service 🙋‍♂️ Sales Questions 🛒 Shop HomeSeer Products

                    Comment


                      #11
                      Originally posted by dcorsus View Post
                      I'll check tonight. I have the stb.Append(Me.AddAjaxHandlerPost("action=updatetime", IFACE_NAME) line in my webpage (by the way, I have a pagename iso IFACE_NAME) but I DO NOT have the Me.RefreshIntervalMilliSeconds = 2000. My bad, I thought I read somewhere that was the default, so it appears it must be specifically stated. I will confirm later.

                      I do have one additional question on this. I seem to have read a while back that actually the AJAX extensions allow you to refresh a part of your page, having an autorefresh for a whole page I think has been part of HTML for quite a while (experts please weigh in if I have this wrong). From what I read, you would create a div section and you can have just that section updated. The reason this is important for me has to do with the fact that the dynamic info (like track name, album ,artist, position etc) sits on the same page that has 2 listboxes. One which could hold easily a few thousand tracknames to select from, so updating the WHOLE page every 2 seconds isn't going to work.

                      See my problem ...

                      Dirk
                      I think for that scenario, you're going to need multiple divs and only update the ones you need. For listboxes holding that many items, you might just only update the client when the number of items actually change. So, on the postback, just check the number of items that you populated the listbox with and only update when it changes.
                      HS4Pro on a Raspberry Pi4
                      54 Z-Wave Nodes / 21 Zigbee Devices / 108 Events / 767 Devices
                      Plugins: Z-Wave / Zigbee Plus / EasyTrigger / AK Weather / OMNI

                      HSTouch Clients: 1 Android

                      Comment


                        #12
                        Originally posted by rjh View Post
                        Note that we are not updating the entire page, we are doing an Ajax call and in this case we are updating just the content in the DIV, which is just part of the page.
                        I have known it for a while but now it is painfully coming clear that my knowledge of HTML is inadequate.

                        Do you guys have some good read/source of info.

                        I guess I was always under the impression when you get a call back, you post the whole page, not true? So you build a partial page with divs to update??

                        Thanks

                        Dirk

                        Comment


                          #13
                          Dirk
                          For me, my developers sold me on jquery a while back. The important factor was having dynamic web pages without full page refreshes. Using ASP.NET and Visual Studio, we were already used to postbacks and had already played with the AjaxControlToolkit. With that experience, it made it a little easier for us.

                          For some really good tutorials on postback and partial page refreshes, search youtube. There are some good short videos to show how to interact back to the server.
                          HS4Pro on a Raspberry Pi4
                          54 Z-Wave Nodes / 21 Zigbee Devices / 108 Events / 767 Devices
                          Plugins: Z-Wave / Zigbee Plus / EasyTrigger / AK Weather / OMNI

                          HSTouch Clients: 1 Android

                          Comment


                            #14
                            Progress!!

                            Ok reporting back, what I learned ..... hopefully someone will learn from it and avoid wasting time

                            When ConfigDevice is called (because a user clicked on the "name" link in the status page, you create your own webpage as a stringbuilder and return that. You MUST set that page and all its jsObjects to "deviceutility" or nothing works. You don't generate headers and footers so I assume that HS3 behinds the scenes adds the returned string to a page and shows it as a Tab. I cannot get the refresh and Ajax mechanisms to work here because I suspect that HS3 owns the definition of that page and refresh (I assume) is off. Maybe that's OK, I began searching another way.

                            At startup, I now register a playerconfig page per player and add that to the little drop down menu when you click on "Plug-Ins". In this case, the PI author is responsible to add the header and footer and own the whole page content. After setting the refreshtimerinterval, I now see periodic postbacks which can be used to refresh parts of the screens (haven't gotten there yet). I did spend the last 48 hours trying to figure out why the slidercomponents on my webpage were working but NONE of the buttons would work. Stumbled onto some debug/logging capabilities in Firefox and finally noticed some error about a "formid is nill" (??). Don't see that in the examples but after I wrapped my HTML body into a form, the clicks would now work (pff).

                            Dirk out.

                            Comment

                            Working...
                            X