Announcement

Collapse
No announcement yet.

I miss the old PageBuilder stuff

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

    #46
    According to page_common.js, divtoupdate isn't implemented:
    It is the default if a PAGE_ is not recognized. I have it working as long as the update is in format ["div","html"]

    HomeSeer owes us a more useful API and documentation!!! We shouldn't have to re-invent the wheel for every possible senario and re-code javascripts and postbacks as referenced above. This is a serious set back for me and I may never upgrade my plugins anytime soon as I can not justify the effort required for such a small sales price that is shared with HS.
    You are totally welcome to use clsPageBuilder for all the Ajax stuff. I just wanted to eliminate it so dug in to the HS4 Ajax handler to understand how to interface with it.

    The issue I had was that jQuery. styles don't work well with the HS4 styles. Choice then becomes to have HTML-focused pages or have the plugin build the page as was done with HS3. I wanted to keep my page construction logic in the plugin as it is very complex to provide a dynamic user experience. This means I needed to make the controls I use comply with the HS4 bootstrap/jui css. I'm certain I will tweak these as I learn more about using css and in particular what is available in the HS4 css files.

    I provided the write up to help others that may be trying to go down the same overall path that I took. There are various things I covered and tried to provide the rationale. It is not intended to be a final solution for everybody, but just a sample that has a little more documentation in areas than is not found in the HS samples.

    Comment


      #47
      +1 on the examples Michael, it is very helpful and much appreciated.

      But... This is becoming an immense amount of work to create HS4/Jui pages.
      SettingsPages are a bomb since you cant do any server-side validation during the capture of individual user input. You also cant change the layout.
      FeaturePages appear to have 2 methods: HTML-only, or render the HTML in the plugin code, which gets messy.

      Ugh... We really need more examples, rjh or some best practices, or documentation...
      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


        #48
        Originally posted by Michael McSharry View Post

        It is the default if a PAGE_ is not recognized. I have it working as long as the update is in format ["div","html"]
        Is there something you need to do with the div or in the javascript handling the response from the Ajax command? I'm getting the postback in the plugin, and I build the HTML to return, but nothing changes in my page. The div's id is there and matches what I have, but something's not connected because the JS isn't updating the div's innerhtml.

        Comment


          #49
          Did you escape the quotes in your html with the backlash such as my example above where q is defined as quote character """"?

          Code:
           .Append(Replace(AjaxUpdateList(skvp), q, "\" & q))
          I believe the JSON.Stringify method will accomplish this too, but I have little experience with Newtonsoft libraries.

          Comment


            #50
            Originally posted by Michael McSharry View Post
            Did you escape the quotes in your html with the backlash such as my example above where q is defined as quote character """"?

            Code:
            .Append(Replace(AjaxUpdateList(skvp), q, "\" & q))
            I believe the JSON.Stringify method will accomplish this too, but I have little experience with Newtonsoft libraries.
            I even tried sending back simply text and nothing...

            Comment


              #51
              How about adding alerts in bootstrap\js\page_common.js to first observe response and then sResponse[i] and sResponse[i+1]?

              Comment


                #52
                Originally posted by Michael McSharry View Post
                How about adding alerts in bootstrap\js\page_common.js to first observe response and then sResponse[i] and sResponse[i+1]?
                I dug around in the html used by a couple of native plugins and found that in some cases they use "AjaxPost", but in all the sample pages it's a the native jquery Ajax call. By switching to AjaxPost I just now got it to work, but only after finding out through trial and error that I had to have a function called after_postback() in my js code. How the !$#% are we supposed to figure this stuff out? Reverse engineering and experimentation is NOT the answer.

                (And the jquery Ajax examples showed how to do some error management, but can't tell with AjaxPost what's supposed to happen or how I know if it worked or not...)

                Comment


                  #53
                  I agree that it is a struggle and because of all the effort it took me that is why I made my descriptive post. It did include the after_postback() info , but just like looking at the HS samples it is easy to overlook what may be important. There are so many different ways that the same end result can be achieved. If there was only one way then it would be easier for everybody.

                  The HS Ajax handler in bootstrap\js\page_common.js makes a call to "after_postback()" at completion of the postback so this function also needed to be provided on the javascript on the page.

                  Comment


                    #54
                    I'm getting closer - the div is being correctly updated by adding a select to what was an empty div when the step was first displayed:

                    <li class="step active">
                    <div data-step-label="Select Vehicle" class="step-title waves-effect waves-dark">Step 3</div>
                    <div class="step-new-content" style="display: block;">
                    Here's a list of the vehicles on your account that are not already in use by this plugin. Please select the one you want to add.
                    <div class="row">
                    <div id="vehicles" class="md-form col-12 ml-auto" style="margin-top: 16px;"><select class="mdb-Select md-form" id="vehicleList"><option value="" disabled="" selected="">--Vehicle--</option><option value="852807972">Steve's Tesla</option></select></div>
                    </div>
                    <div class="step-actions">
                    <button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
                    <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="addVehicle">CONTINUE</button>
                    </div>
                    </div>
                    </li>

                    But the select control isn't showing visually...

                    Click image for larger version

Name:	select missing.jpg
Views:	137
Size:	24.6 KB
ID:	1351918

                    Comment


                      #55
                      Originally posted by Michael McSharry View Post
                      I agree that it is a struggle and because of all the effort it took me that is why I made my descriptive post. It did include the after_postback() info , but just like looking at the HS samples it is easy to overlook what may be important. There are so many different ways that the same end result can be achieved. If there was only one way then it would be easier for everybody.
                      We need all the help we can get... thanks for contributing!

                      Comment


                        #56
                        But the select control isn't showing visually...
                        When things like this happened to me it was usually some mistake in the HTML. A misplaced quote or unmatched bracket or incomplete specification are common. I just simplified until something worked and then added until I found where my mistake was.

                        Comment


                          #57
                          Originally posted by Michael McSharry View Post

                          When things like this happened to me it was usually some mistake in the HTML. A misplaced quote or unmatched bracket or incomplete specification are common. I just simplified until something worked and then added until I found where my mistake was.
                          ... or it's because I tried to brute force a select list instead of using a Jui View object.

                          But now that I have, the problem you encountered with quotes is biting me, too - seems like a bug in the .ToHtml method if it can't generate something I can send back directly, though.

                          Comment


                            #58
                            Cant you just escape or stringify the HTML after the .html method so it is ready for the javascript in the Ajax procedure?

                            Comment


                              #59
                              Are you doing a JUI status page or a feature page? The intent was that the sample plugin would have everything you need to you don't have to jump through hoops. If we are missing something I want to get it updated.
                              💁‍♂️ Support & Customer Service 🙋‍♂️ Sales Questions 🛒 Shop HomeSeer Products

                              Comment


                                #60
                                While all you guys seem to have more understanding of this thing than I do, I am still very confused. As far as I am concerned this is a huge step backwards for me. I took a great deal of time to learn and customize the HS3 methods of creating pages and postbacks. So far I can not get anything to work using HS4 methods. I am not interested in tearing apart samples that are all over the place and don't seem to have any consistency in the building of pages. Pagebuilder may have had it's faults, but it handled the postbacks and simplified construction of pages without creating JavaScripts, it also was fairly consistent. Why doesn't HS take there HS3 samples and convert directly to HS4? I also have no interest in using a hybrid approach of HS3 and HS4, if I spend any effort recreating something, it will be in the new standards.
                                -Larry

                                A member of "The HA Pioneer Group", MyWebSite

                                Plugins:
                                VWS, AB8SS, lrpSpeak, Calendar, Arduino, Harmony, BlueIris, Sprinklers, ZipBackup...

                                Hardware:
                                Intel NUC8i7BEH1 running Windows 10 Pro headless, HS3 Pro, Plex running on Synology dual High Availability DS-1815+ NAS (24Tb each), Synology Surveillance Station running on DS-416 Slim (8Tb), Samsung SmartThings, Google Home, Alexa, Hubitat Elevation, ZNET, Ubiquiti UniFi Network, Davis Vantage Pro II Weather Station. Whole house speaker system using a couple of AB8SS switches. Vantage Pro II Weather Station, Rain8Net Sprinklers, Hubitat Elevation, Google Home, Alexa, DSC Security System, Ubiquiti UniFi Network.

                                Comment

                                Working...
                                X