Announcement

Collapse
No announcement yet.

Timerto update div in FeaturePage?

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

  • alexbk66
    replied
    Ah, ok, thank you

    Leave a comment:


  • dcorsus
    replied
    Originally posted by alexbk66 View Post

    Ah, thank you. I can't see though, how you handle the click on the item? I mean I see it's JS with different 'nav-item' values, but then what?
    ]
    you have on-click event handlers, in this case I add the device ID, the dbrecordid and what nav-item and post that to the PI. The PI uses that to decide what to do and in the response provides information of which sections of the page needs updating (divids) and new content.

    Code:
    
            $(document).on('click','.nav-item, .playertoggle, .go-back, tr', {} ,function(e){          
                var data="deviceudn="+deviceUdn; 
                $(this.attributes).each(function() {
                    var parts = this.nodeName+"="+this.nodeValue;
                    if(data==null) {
                        data = parts;
                    }
                    else {
                        data = data+"&"+parts;
                    }
                });
                e.stopPropagation();
                AjaxPost_(data,"SonosV4/sonos-player.html");   
                console.log("Click nav-item, .go-back, .playertoggle tr : " + data );
            });

    Leave a comment:


  • alexbk66
    replied
    Originally posted by dcorsus View Post
    I implemented navigating by clicking on the rows of the table, the little arrow is a button for a drop down list, where you have options like: add song, remove song, add last ... The button, text and image are all part of a single row in a table and all generated in my PI based on bootstrap coding methods.

    Maybe this helps. This is the HTML for the drop downlist
    Ah, thank you. I can't see though, how you handle the click on the item? I mean I see it's JS with different 'nav-item' values, but then what?

    And just a little note to make strings more readable, instead of
    Code:
    "<a class='dropdown-item' ni='" & dbRecord.id & "' nav-item='ns-playnow' href='#'>Play Now</a>"
    You can use
    Code:
    $"<a class='dropdown-item' ni='{dbRecord.id}' nav-item='ns-playnow' href='#'>Play Now</a>"

    Leave a comment:


  • dcorsus
    replied
    Here's how to code in bootstrap, in this case drop downs

    https://getbootstrap.com/docs/4.4/components/dropdowns/

    Leave a comment:


  • dcorsus
    replied
    I implemented navigating by clicking on the rows of the table, the little arrow is a button for a drop down list, where you have options like: add song, remove song, add last ... The button, text and image are all part of a single row in a table and all generated in my PI based on bootstrap coding methods.

    Maybe this helps. This is the HTML for the drop downlist

    Code:
    divString.Append("<div class='my-0 px-0 py-0 dropdown'>")
    divString.Append("<button class='my-0 px-0 py-0 btn btn-secondary' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>") ' removed this from class dropdown-toggle
    divString.Append("<span class='fa fa-chevron-down text-right pt-1 px-2 my-0'></span>")
    divString.Append("</button>")
    divString.Append("<div class='dropdown-menu' aria-labelledby='dropdownMenuButton'>")
    divString.Append("<a class='dropdown-item' ni='" & dbRecord.id & "' nav-item='ns-playnow' href='#'>Play Now</a>")
    divString.Append("<a class='dropdown-item' ni='" & dbRecord.id & "' nav-item='ns-playnext' href='#'>Play Next</a>")
    divString.Append("<a class='dropdown-item' ni='" & dbRecord.id & "' nav-item='ns-endofqueue' href='#'>Add to End of Queue</a>")
    divString.Append("<a class='dropdown-item' ni='" & dbRecord.id & "' nav-item='ns-replacequeue' href='#'>Replace Queue</a>")
    divString.Append("</div>")
    divString.Append("</div>")

    Leave a comment:


  • alexbk66
    replied
    Originally posted by dcorsus View Post
    They are html tables ...
    But the little down facing arrow assumes it's a list you can open by clicking on the arrow?

    Leave a comment:


  • dcorsus
    replied
    They are html tables ...

    Leave a comment:


  • alexbk66
    replied
    Originally posted by dcorsus View Post
    alexbk66 are you asking about a combobox? I don't use those but HS built their webpages using bootstrap, a front-end toolkit which helps with showing content on different (screensize) devices. You can find the info here: https://getbootstrap.com/docs/4.4/co...s/input-group/
    I don't see a combobox example, but you could use an input group and add some javasscript that make it do what you have in mind. As I said, I have spend way too much effort to do things I want it to do, and I don't know it is my lack of understanding, lack of better dev tools I need or this could really use a much better front<->back-end scaffolding.
    Yeah, I'm working at 1 AM... I don't mean combobox, I mean the list select. Your screenshot (post #9) on the right pane (Browse) has many lists...

    Leave a comment:


  • dcorsus
    replied
    alexbk66 are you asking about a combobox? I don't use those but HS built their webpages using bootstrap, a front-end toolkit which helps with showing content on different (screensize) devices. You can find the info here: https://getbootstrap.com/docs/4.4/co...s/input-group/
    I don't see a combobox example, but you could use an input group and add some javasscript that make it do what you have in mind. As I said, I have spend way too much effort to do things I want it to do, and I don't know it is my lack of understanding, lack of better dev tools I need or this could really use a much better front<->back-end scaffolding.

    Leave a comment:


  • alexbk66
    replied
    BTW, dcorsus - how do you create a combpbox and handle selection?

    Leave a comment:


  • alexbk66
    replied
    Originally posted by dcorsus View Post
    Is this helpful or known or still missing the point?
    Thank you. I do both. I lost my point now, I will have to re-think what exactly was my problem.

    Leave a comment:


  • dcorsus
    replied
    Thinking of your last remark, maybe a clarification:

    Two very destinct sources to trigger an update:

    1/ you do something on the client side, say click a button, image, pull a slider etc. In this case the change happened on the client so you write some javascript (assuming you want to do something non standard) which passes enough information, typically a unique id or a class to your PI, your PI processes the POST and return update information. The information typically updates something in between tags, could be divs but could be anything you wrote in your javascript.

    2/ the server has a change but can't tell your client, hence you use a periodic ajax call from your client and IF there is a change on the server, the server, in its response will inform the client what has changed. Again, totally under your control how you want to do that but typically some new HTML (or plain text) that goes between some existing tags. If you give the tags a unique id and the server knows that id (like in your case where the server generated all the html code), the server can send any key/value update to your client to update whatever part you want.

    Is this helpful or known or still missing the point?

    Leave a comment:


  • dcorsus
    replied
    Sure, see this code, it sends data back to the PI (lgname and lgindex) and upon return updates the body in a modal window. Maybe I'm missing your point. You can make this generic in that you post the devid to your PI, generate new HTML and upon return update that DIV

    Code:
      $('#editLGButton').on('show.bs.modal', function (e) {
        var button = $(e.relatedTarget);
        var datatarget = button[0].attributes.getNamedItem("lgname").value
        // transfer content to modal body
        // get the LinkgroupInfo and populate the body
        $("#editLGbtn").attr("lgname",datatarget);
        var lgindex = button[0].attributes.getNamedItem("lgindex").value
        $("#editLGbtn").attr("lgindex",lgindex);
        data = "editlgname="+datatarget+"&lgindex="+lgindex;
        $.ajax({
                type: "POST",
                async: "true",
                url: 'SonosV4/sonos-settings.html',
                cache: false,
                data: data,
                success: function(response){
                    if (response !== "") {
                      $('#modalBodyEditLGButton').html(response);
                      return;
                    }
                },
                error: function(){
                    alert("Unable to edit Linkgroup : Unknown Error");
                }
            });
      })




    Leave a comment:


  • alexbk66
    replied
    You can have multiple divs and separate html file to update each div.
    But my main question is - instead of multiplying html files - there should be away to pass div id to the ajax call - and then handle it in the C#

    Leave a comment:


  • dcorsus
    replied
    I guess nothing prevent you from creating your pages in your PI and still use AJAX to update sections of it, principle is the same as above, you need some mechanism to tell the client side what to update. For some stupid reason, I do a bit of both, some parts in HTML, some generated in the PI .... It is easier to test and develop just manipulating an HTML page and just hit "refresh" over changing the PI code but on the other hand, if you want to make very context aware pages, doing it on the client side isn't perhaps a good idea to start with.
    I can tell that whatever I'm doing is WAY too effort intensive and I wish there was a much easier way

    Leave a comment:

Working...
X