Announcement

Collapse
No announcement yet.

New function in jqListBoxEx

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

  • New function in jqListBoxEx

    Can someone from the HS team confirm that double click functions have been added to this JQuery component?

    Today I noticed that when you double click on an entry in the jqListBoxEx, the postbackproc now has click=double in its information.

    Is this intentional and therefore can I rely on this to stay that way so I'll design that capability into my PI?

    I did notice if you set .functionToCallOnClick = "$.blockUI({ message: '<h2><img src=""/images/HomeSeer/ui/spinner.gif"" /> Loading ...</h2>' });" then the double click function does not work.

    So if this is a new function YOHOOO but then you may have a bug and I'd be glad to open a new bug report.

    Dirk

  • #2
    It is not recommended to use the click and double click together, because when the object is double clicked, it fires the click event first, and is inconsistent.

    It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.
    jQuery reference: http://api.jquery.com/dblclick/


    That being said, I have modified the jqListBoxEx to allow for both the click and double click to be used.

    The new code will be out in the next release of HS3.

    Two new parameters were added:

    .UseBothClickEvents - set this to true if you are planning to use both events on an object.

    .WaitTime - this is the amount of time in milliseconds the click event waits before executing. The default is 250.

    When this is being used, the click event waits to execute in the event a double click is forthcoming.

    If the double click event is fired, the first click event is cancelled.

    If the first click event's timer reaches its wait time, then the first click event fires.

    You may want to adjust the wait time depending on your preference.


    Please note that because of different PC speeds, and that users can set their own double click parameter speeds, this functionality is not guaranteed to work for all of your users.
    Wade

    sigpic

    website | products | support | youtube
    I know nothing...., nothing!!!

    Comment


    • #3
      Originally posted by Sgt. Shultz View Post
      It is not recommended to use the click and double click together, because when the object is double clicked, it fires the click event first, and is inconsistent.



      jQuery reference: http://api.jquery.com/dblclick/


      That being said, I have modified the jqListBoxEx to allow for both the click and double click to be used.

      The new code will be out in the next release of HS3.

      Two new parameters were added:

      .UseBothClickEvents - set this to true if you are planning to use both events on an object.

      .WaitTime - this is the amount of time in milliseconds the click event waits before executing. The default is 250.

      When this is being used, the click event waits to execute in the event a double click is forthcoming.

      If the double click event is fired, the first click event is cancelled.

      If the first click event's timer reaches its wait time, then the first click event fires.

      You may want to adjust the wait time depending on your preference.


      Please note that because of different PC speeds, and that users can set their own double click parameter speeds, this functionality is not guaranteed to work for all of your users.
      AWESOME !!

      Comment


      • #4
        Hey Wade,

        I'm on HS v93. I think something might have been broken with the ListBoxEx functions.

        I set the height of the ListboxEx so if I add many items I can scroll. That seems to be broken and now the ListboxEx will be as long on the webpage UI as I put elements in it.

        See the attached screenshot, I hope it is readable, it seems the upload takes the resolution down.

        Dirk
        ps the doubleclick function is awesome!
        Attached Files

        Comment


        • #5
          Wade I may have cried victory too early.

          When I set UseBothClickEvents = true, it appears now that the single click is not working. It returns a postbackproc (note this is a singleexemultipleInstance implementation)

          PostBackProc for PlayerControl called for Player = SA-NS400 with page = MediaConfig:5f9ec1b3-ed59-1900-4530-0007f5238374 and data = id=undefined&=undefined and user = default and userRights = 6

          Comment


          • #6
            I'll look at it again.
            Wade

            sigpic

            website | products | support | youtube
            I know nothing...., nothing!!!

            Comment


            • #7
              I modified the List Box tab in the basic sample:

              Code:
              Function BuildTabLB(Optional ByVal Rebuilding As Boolean = False) As String
                      Dim stb As New StringBuilder
                      Dim lb As New clsJQuery.jqListBoxEx("lb", Me.PageName)
                      
                      Dim i As Integer = 1
                      Dim p As HomeSeerAPI.Pair
                      lb.style = "height:100px;width:300px;"
                      Dim item As Object
                      For Each item In lbList
                          p = New HomeSeerAPI.Pair
                          p.Name = item
                          p.Value = i
                          i += 1
                          lb.items.Add(p)
                      Next
                      lb.id = "olb"
                      lb.UseBothClickEvents = True
                      stb.Append(clsPageBuilder.FormStart("frmTab1", "ListBox", "Post"))
                      stb.Append(lb.Build & " " & BuildTextbox("TextboxLB") & " " & BuildButton("ButtonLB"))
                      stb.Append(clsPageBuilder.FormEnd())
                      If Rebuilding Then Me.divToUpdate.Add("TabLB_div", stb.ToString)
                      Return stb.ToString
                  End Function
              Then I modified the PostBackProc:

              Code:
              Public Overrides Function postBackProc(page As String, data As String, user As String, userRights As Integer) As String
              
                      Dim parts As Collections.Specialized.NameValueCollection
                      Dim value As String = ""
                      Dim name As String = ""
                      parts = HttpUtility.ParseQueryString(data)
              
                      Select Case parts("id")
                          Case "oButtonLB"
                              lbList.Add(parts("TextboxLB"))
                              PostMessage("'" & parts("TextboxLB") & "' has been added.")
                              BuildTabLB(True)
                          Case "olb"
                              name = parts("id")
                              name = Right(name, name.Length - 1)
                              value = parts(name)
                              If parts("click") = "double" Then value &= "-d"
                              PostMessage("value is " & value & ".")
                          Case "timer" 'this stops the timer and clears the message
                              If TimerEnabled Then 'this handles the initial timer post that occurs immediately upon enabling the timer.
                                  TimerEnabled = False
                              Else
                                  Me.pageCommands.Add("stoptimer", "")
                                  Me.divToUpdate.Add("message", "&nbsp;")
                              End If
                      End Select
              
                      Return MyBase.postBackProc(page, data, user, userRights)
                  End Function
              This returned correct values, and could be qualified via the 'click' parameter.

              I suspect what is happening is that you're losing your connection to your object inside the page on the client side when reposting to the page.

              You may need to review what your reposting, or you may need to put some custom javascript in to handle your scenario.
              Wade

              sigpic

              website | products | support | youtube
              I know nothing...., nothing!!!

              Comment


              • #8
                Originally posted by Sgt. Shultz View Post
                I modified the List Box tab in the basic sample:

                Code:
                Function BuildTabLB(Optional ByVal Rebuilding As Boolean = False) As String
                        Dim stb As New StringBuilder
                        Dim lb As New clsJQuery.jqListBoxEx("lb", Me.PageName)
                        
                        Dim i As Integer = 1
                        Dim p As HomeSeerAPI.Pair
                        lb.style = "height:100px;width:300px;"
                        Dim item As Object
                        For Each item In lbList
                            p = New HomeSeerAPI.Pair
                            p.Name = item
                            p.Value = i
                            i += 1
                            lb.items.Add(p)
                        Next
                        lb.id = "olb"
                        lb.UseBothClickEvents = True
                        stb.Append(clsPageBuilder.FormStart("frmTab1", "ListBox", "Post"))
                        stb.Append(lb.Build & " " & BuildTextbox("TextboxLB") & " " & BuildButton("ButtonLB"))
                        stb.Append(clsPageBuilder.FormEnd())
                        If Rebuilding Then Me.divToUpdate.Add("TabLB_div", stb.ToString)
                        Return stb.ToString
                    End Function
                Then I modified the PostBackProc:

                Code:
                Public Overrides Function postBackProc(page As String, data As String, user As String, userRights As Integer) As String
                
                        Dim parts As Collections.Specialized.NameValueCollection
                        Dim value As String = ""
                        Dim name As String = ""
                        parts = HttpUtility.ParseQueryString(data)
                
                        Select Case parts("id")
                            Case "oButtonLB"
                                lbList.Add(parts("TextboxLB"))
                                PostMessage("'" & parts("TextboxLB") & "' has been added.")
                                BuildTabLB(True)
                            Case "olb"
                                name = parts("id")
                                name = Right(name, name.Length - 1)
                                value = parts(name)
                                If parts("click") = "double" Then value &= "-d"
                                PostMessage("value is " & value & ".")
                            Case "timer" 'this stops the timer and clears the message
                                If TimerEnabled Then 'this handles the initial timer post that occurs immediately upon enabling the timer.
                                    TimerEnabled = False
                                Else
                                    Me.pageCommands.Add("stoptimer", "")
                                    Me.divToUpdate.Add("message", "&nbsp;")
                                End If
                        End Select
                
                        Return MyBase.postBackProc(page, data, user, userRights)
                    End Function
                This returned correct values, and could be qualified via the 'click' parameter.

                I suspect what is happening is that you're losing your connection to your object inside the page on the client side when reposting to the page.

                You may need to review what your reposting, or you may need to put some custom javascript in to handle your scenario.
                Thanks Wade.
                Will look at it tonight. What about my height issue?
                Thanks
                Dirk

                Comment


                • #9
                  Setting the style property of the object should handle the height parameters.

                  If you still can't figure it out, I will look at it at some point.
                  Wade

                  sigpic

                  website | products | support | youtube
                  I know nothing...., nothing!!!

                  Comment


                  • #10
                    Originally posted by Sgt. Shultz View Post
                    Setting the style property of the object should handle the height parameters.

                    If you still can't figure it out, I will look at it at some point.
                    Wade, here is what I did. First of all I have 2 different PIs although they do things in similar way. I verified my Sonos PI w/ HS3 v.84 and the height style/property is respected properly.

                    When I try the same PI against HS3 v.93, the height property is not respected see attached picture how the left listbox extends beyond the page, actually overwrites buttons that are positioned underneath it.

                    Dirk
                    Attached Files

                    Comment


                    • #11
                      Put this before your listbox.

                      Code:
                      <style type="text/css">  
                              .menuContainerJSListBox {  
                                  height: 40px;  
                                  overflow:auto;  
                              }
                       </style
                      Wade

                      sigpic

                      website | products | support | youtube
                      I know nothing...., nothing!!!

                      Comment


                      • #12
                        Originally posted by Sgt. Shultz View Post
                        Put this before your listbox.

                        Code:
                        <style type="text/css">  
                                .menuContainerJSListBox {  
                                    height: 40px;  
                                    overflow:auto;  
                                }
                         </style
                        Thanks Wade will try tonight or over the weekend, but the key point here is that the jqListBoxEx component changed and I can't each time HS3 changes, reissue my PIs to work around the issues.

                        Dirk

                        Comment


                        • #13
                          The code I gave you should work regardless of any changes that might occur in the future.
                          Wade

                          sigpic

                          website | products | support | youtube
                          I know nothing...., nothing!!!

                          Comment


                          • #14
                            I looked through the history of the jqListBoxEx object and found no changes to the code regarding height.

                            You may be thinking of the jqMultiSelect object, which had a change regarding the height parameter at the beginning of the month, but that should not prevent the setting of the height from working.
                            Wade

                            sigpic

                            website | products | support | youtube
                            I know nothing...., nothing!!!

                            Comment


                            • #15
                              Originally posted by Sgt. Shultz View Post
                              I looked through the history of the jqListBoxEx object and found no changes to the code regarding height.

                              You may be thinking of the jqMultiSelect object, which had a change regarding the height parameter at the beginning of the month, but that should not prevent the setting of the height from working.
                              Well something changed, I do this side by side, same PI, one running with HS3 v84 other v93. Prior works, latter doesn't.

                              Did you test this with what you posted in this post http://board.homeseer.com/showpost.p...60&postcount=7 ?

                              Can't determine from the sample you posted there how many items you added but change the sample to add more items than your height allows so it should show a scroll bar, if not, you have a bug and a way to replicate.

                              I can add whatever I want but the unless you want every 1/2 year a PI newbie write the same question ... The component has a .height attribute, it just doesn't seem to do anything with it nor when I set the height as part of the .style (which you can see here http://board.homeseer.com/showpost.p...51&postcount=4 if you look closer to the object inspector info)

                              Dirk

                              Comment

                              Working...
                              X