I miss the old PageBuilder stuff

[rjh]

GIve me an outline of what your page looks like and I will see if I can put together a framework as an example. To me, doing HTML pages is WAY better than the old way. I can put together a working page in a fraction of the time I could before. Maybe a video will help that shows the steps? The JUI controls are only for a basic settings page, which is really simple. I would guess you are trying to do a feature page using HTML?

I put a great deal of time into the old clsPageBuilder stuff when HS3 came out. Several other plugin authors used their own HTML and now I understand why.

On Friday, I spent 10h designing a simple page with the Jui controls and I'm still not done. I just dont know if it's worth having mobile support in my plugins for this large learning curve.

[rmasonjr]

I put a great deal of time into the old clsPageBuilder stuff when HS3 came out. Several other plugin authors used their own HTML and now I understand why.

On Friday, I spent 10h designing a simple page with the Jui controls and I'm still not done. I just dont know if it's worth having mobile support in my plugins for this large learning curve.

[lpitman]

Nothing works, if we are to make HS4 native pages, we need more help, examples, and documentation. All the logic in my plugin's convert pretty straight forward, web pages suck!!

[lpitman]

Would be much easier if I could just load a new page.html, I do a lot of processing and reading of XML file to build the list page shown above. When I click for example the edit button it should pass the the record number to edit using 'btnEditEvent56' which is the 56th record in file. With that info passed to PostBackProc I should be able to build an EditEvent.html page with textbox inputs for the record being edited, then save and return to EventList.html page.

So is the

response = "PAGE_NEWPAGE,EditEvent.html

in-correct syntax then?

Just for the record I'm not using pagebuilder anything, I just created my own code to imitate HS3 stuff, but attempting to use only HS4 code.

[rjh]

If your postback is in a pagebuilder class you can use these calls to things like update divs, etc.:

https://help.homeseer.com/help/HS3SD...#.pagecommands
https://help.homeseer.com/help/HS3SD...m#.divtoupdate

Note that HS4 only supports:

divtoupdate
newpage
refresh
popmessage

I can add more if needed. The commands are in the ajaxpost function in page_common.js file in the html/bootstrap/js folder.

I will need to investigate the guided process but you should be able to get a postback on each step and then just update the divs that need new content.

I can't find any documentation on the return values of postback (like this PAGE_REFRESH stuff you reference), or about how you can update a div in HS4.

I've got a guided setup process and need some of the info from a previous step before I can populate a list to choose from in a subsequent step; how do I dynamically change the contents? I can't just put the PluginFunction tag in there because it fires on load...

[shill]

So in your postback, you can either update a div, or refresh the page with a response like:

["PAGE_REFRESH","TRUE"]

The div update and page refresh work the same as they did in HS3.

I can't find any documentation on the return values of postback (like this PAGE_REFRESH stuff you reference), or about how you can update a div in HS4.

I've got a guided setup process and need some of the info from a previous step before I can populate a list to choose from in a subsequent step; how do I dynamically change the contents? I can't just put the PluginFunction tag in there because it fires on load...

[lpitman]

Button ID's are created like:

        For i = 0 To gMaxRecords - 1

            If tmpRecords(i).Category = "Holiday" Or tmpRecords(i).Category = "US-Holiday" Then

                ' Show Only EVENTS no Holidays.

            Else

                stb.AppendHTML(HTML_StartRow)

                '------Edit Button
                stb.AppendHTML(HTML_StartForm("frmEditEvent", "EditEvent", "Post"))
                stb.AppendHTML(HTML_StartCell(strClass, 10, HTML_Align.CENTER))
                stb.AppendHTML(AddButton("btnEditEvent" & i.ToString, "waves-effect waves-dark btn btn-sm btn-secondary", "Edit"))
                '------Delete Button
                stb.AppendHTML(AddButton("btnDeleteEvent" & i.ToString, "waves-effect waves-dark btn btn-sm btn-secondary", "Delete"))
                stb.AppendHTML(HTML_EndCell)
                stb.AppendHTML(HTML_EndForm)

and postbackproc looks like this:

            Case "CalEvents.html"
                name = parts("id")
                value = parts(name)

                Try
                    '===========================================
                    '===========================================
                    '-------------------------------------------
                    '        BUTTON ADD NEW EVENT
                    '-------------------------------------------
                    If name = "btnAddEvent" Then
                        value = parts(name)

                        OutputHSLog(LOG_DEBUG, "HSPI.PostBackProc-btnAddEvent BUTTON PRESSED.")

                        xmlAddRecord = Nothing
                        response = "PAGE_NEWPAGE,AddEvent.html"

                    End If

                    For i = 0 To gMaxRecords
                        '--------------------------------------
                        '        BUTTON EDIT EVENT
                        '--------------------------------------                      
                        If name = "btnEditEvent" & i Then
                            value = parts(name)

                            OutputHSLog(LOG_DEBUG, "HSPI.PostBackProc-btnEditEvent" & i.ToString & "  BUTTON PRESSED.")

                            gRecordSelected = i
                            BuildEditEventPage()
                            response = "PAGE_NEWPAGE,EditEvent.html"

                        End If
                        '---------------------------------------
                        '         BUTTON DELETE EVENT
                        '---------------------------------------
                        If name = "btnDeleteEvent" & i Then
                            value = parts(name)

                            OutputHSLog(LOG_DEBUG, "HSPI.PostBackProc-btnDeleteEvent" & i.ToString & "  BUTTON PRESSED.")

                            gRecordSelected = i
                            DeleteEventByName(EVENTFILE, xmlRecords(gRecordSelected).EventName)
                            SaveAllXMLRecords(EVENTFILE)
                            response = "PAGE_REFRESH,TRUE"
                        End If
                    Next

The output from OutputHSLog shows the button that was pressed, but nothing happens.

also I created my own AddButton code:

    Public Function AddButton(ByVal strID As String, ByVal strClass As String, ByVal strBtnText As String) As String
        Dim RetString = ""

        RetString &= "<div id='" & strID & "_div'>" & Environment.NewLine

        RetString &= "<button type='button' "

        If strClass IsNot Nothing AndAlso Not String.IsNullOrEmpty(strClass) Then
            RetString &= "class='" & strClass & "' "
        End If

        If strID IsNot Nothing AndAlso Not String.IsNullOrEmpty(strID.Trim) Then
            RetString &= "id='" & strID & "' "
        End If

        RetString &= "onclick='" & strID & "()'"

        'RetString &= "action='button_press'"

        If strBtnText IsNot Nothing AndAlso Not String.IsNullOrEmpty(strBtnText.Trim) Then
            RetString &= "> " & strBtnText
        End If

        RetString &= "</button>" & Environment.NewLine

        RetString &= "</div>"

        Return RetString

    End Function

The Delete Button works fine though.

[rjh]

What I do is add something to the actual button so I know which button was pressed in my postback handler, that way I don't have to deal with the javascript. For example, on your button add:

action="dosomething"

When the button is pressed you will get the "action" value in in your query string. You can then act on the button, so some work, and then go to another page, or refresh the page. Our default ajax handler will parse a few json responses. For redirecting to another page just return the following from your postback handler:

["PAGE_newpage","devices.html"]

Okay how do I modify JavaScript

 <script type="text/JavaScript">

$(document).on('click', 'button', {}, function (e) {

var data;

$(this.attributes).each(function () {
var parts = this.nodeName + "=" + this.nodeValue;

if (data == null) {
data = parts;
}

else {
data = data + "&" + parts;
}
});

var fdata = $(this.form).serialize();

if (fdata != null) {
data = data + "&" + fdata
}

AjaxPost(data, "Calendar/CalEvents.html");

});

</script>

to react to a specific button? For example, in my EventList feature page, I have several buttons that should call other feature pages using button id's such as 'btnAddEvent' or 'btnEditEvent', example:


how can I react to specific buttons and possibly use "location.assign("AddEvent.html") or similar call?

Forgot to mention, each button posts back to a PostBackProc that modifies variables then returns 'response=PAGE_NEWPAGE, new_pageurl'

[lpitman]

Anybody???

[lpitman]

Okay how do I modify JavaScript

    <script type="text/JavaScript">

        $(document).on('click', 'button', {}, function (e) {

            var data;

            $(this.attributes).each(function () {
                var parts = this.nodeName + "=" + this.nodeValue;

                if (data == null) {
                    data = parts;
                }

                else {
                    data = data + "&" + parts;
                }
            });

            var fdata = $(this.form).serialize();

            if (fdata != null) {
                data = data + "&" + fdata
            }

            AjaxPost(data, "Calendar/CalEvents.html");

        });

    </script>

to react to a specific button? For example, in my EventList feature page, I have several buttons that should call other feature pages using button id's such as 'btnAddEvent' or 'btnEditEvent', example:


how can I react to specific buttons and possibly use "location.assign("AddEvent.html") or similar call?

Forgot to mention, each button posts back to a PostBackProc that modifies variables then returns 'response=PAGE_NEWPAGE, new_pageurl'

[lpitman]

Thanks Rich, that works perfectly.

 
 $(document).on('click', 'button', {}, function (e) {

[rjh]

Ok, I suspect that your feature html file does not need to detect clicks on "<a>" tags so modify this:

 
 $(document).on('click', 'button,a,i', {}, function (e) {

To This:

 
 $(document).on('click', 'button,i', {}, function (e) {

The "i" tag is for detecting clicks on images. If you do not have any image buttons, you can remove that also so:

 
 $(document).on('click', 'button', {}, function (e) {

I will try the <a> tag, but I do not know JavaScript, so I don't know how to look for a class. The JavaScript I'm using was supplied earlier in this thread by you, which I do appreciate because I at least got most of it to work.

[lpitman]

I will try the <a> tag, but I do not know JavaScript, so I don't know how to look for a class. The JavaScript I'm using was supplied earlier in this thread by you, which I do appreciate because I at least got most of it to work.

[rjh]

In your javascript you are capturing a click on an "<a>" tag. Do you need that? The log menu option is an "<a>" tag also:

<a class="dropdown-item waves-effect waves-light" href="/log.html">Log</a>

Remove the "a" from the "a" tag from this and see if it then works ok:

 
 $(document).on('click', 'button,a,i', {}, function (e) {

If so and you need to detect clicks on this tag then narrow down the .on handler to maybe it looks for a class instead.

Okay, finally got a working page, that refreshes with new data from button presses. But after viewing page and pressing a button that correctly refreshes page, if go to HS4 menu and select log, it only flashes and goes away repeatedly, but if I select any other menu first such as devices then select log everything works with out flashing, until I load my page again. What am i doing wrong, I suspect it has something to do with my javascript. But attached are a couple of snippets.

From postBackProc:

 If name = "btnPrevYear" Then
value = parts(name)

OutputHSLog(LOG_DEBUG, "HSPI.PostBackProc-btnPrevYear....Value is: " & value & ".")

gCalDate = DateAdd("yyyy", -1, objDate)
BuildCalendar()
response = "page_refresh,true"

JavaScript in Web Page:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--This maintains the scale of the page based on the scale of the screen-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="HomeSeer Technologies">

<!--This liquid tag loads all of the necessary css files for HomeSeer-->
{{includefile '/bootstrap/css/page_common.css'}}

<link rel='Stylesheet' type='text/css' href='css/Calendar.css'>

<title>Calendar</title>
</head>

<body class='body homeseer-skin'>

<!--These liquid tags add the HomeSeer header and navbar to the top of the page when appropriate-->
{{includefile 'header.html'}}
{{includefile 'navbar.html'}}

<!--Primary container for the page content
The .container class ensures the page content is fit and centered to the screen-->

<div class='container' id='main_content'>

{{plugin_function 'Calendar' 'BuildCalendar' ['']}}

</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
{{includefile 'bootstrap/js/page_common.js'}}

<script type="text/JavaScript">

$(document).on('click', 'button,a,i', {}, function (e) {
var data;
$(this.attributes).each(function () {
var parts = this.nodeName + "=" + this.nodeValue;

if (data == null) {
data = parts;
}

else {
data = data + "&" + parts;
}
});

var fdata = $(this.form).serialize();

if (fdata != null) {
data = data + "&" + fdata
}

location.reload(true);

AjaxPost(data, "Calendar/Calendar.html");
});

</script>

</body>

</html>

[lpitman]

Okay, finally got a working page, that refreshes with new data from button presses. But after viewing page and pressing a button that correctly refreshes page, if go to HS4 menu and select log, it only flashes and goes away repeatedly, but if I select any other menu first such as devices then select log everything works with out flashing, until I load my page again. What am i doing wrong, I suspect it has something to do with my javascript. But attached are a couple of snippets.

From postBackProc:

                If name = "btnPrevYear" Then
                    value = parts(name)

                    OutputHSLog(LOG_DEBUG, "HSPI.PostBackProc-btnPrevYear....Value is: " & value & ".")

                    gCalDate = DateAdd("yyyy", -1, objDate)
                    BuildCalendar()
                    response = "page_refresh,true"

JavaScript in Web Page:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--This maintains the scale of the page based on the scale of the screen-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="HomeSeer Technologies">

    <!--This liquid tag loads all of the necessary css files for HomeSeer-->
    {{includefile '/bootstrap/css/page_common.css'}}

    <link rel='Stylesheet' type='text/css' href='css/Calendar.css'>

    <title>Calendar</title>
</head>

<body class='body homeseer-skin'>

    <!--These liquid tags add the HomeSeer header and navbar to the top of the page when appropriate-->
    {{includefile 'header.html'}}
    {{includefile 'navbar.html'}}

    <!--Primary container for the page content
        The .container class ensures the page content is fit and centered to the screen-->

    <div class='container' id='main_content'>

        {{plugin_function 'Calendar' 'BuildCalendar' ['']}}

    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    {{includefile 'bootstrap/js/page_common.js'}}

    <script type="text/JavaScript">

        $(document).on('click', 'button,a,i', {}, function (e) {
            var data;
            $(this.attributes).each(function () {
                var parts = this.nodeName + "=" + this.nodeValue;

                if (data == null) {
                    data = parts;
                }

                else {
                    data = data + "&" + parts;
                }
            });

            var fdata = $(this.form).serialize();

            if (fdata != null) {
                data = data + "&" + fdata
            }

            location.reload(true);

            AjaxPost(data, "Calendar/Calendar.html");
        });

    </script>

</body>

</html>