Custom tags added to button, where are they?

[PiDomeParticipant]

Hi all, maybe i’m overlooking something, but i use the button group radio mode and i set a custom tag to the buttons. The next code is used. The blow snippet is a short version of a large xsl file.

<div id='toggleFor_{$randid}'>
<button style="padding:4px 16px;" data-command="deviceAction-{$cmdGroupIdParam}-{$deviceSetParam}-{@value}" id="{$deviceSetParam}-{@value}"><xsl:value-of select="text()" /></button>
</div>

<script> 
$(function() {
    $("#toggleFor_{$randid}").jqxButtonGroup({ mode: 'radio', theme: siteSettings.getTheme() });
    $("#toggleFor_{$randid}").on('buttonclick', function (event) {
        var clickedButton = event.args.button;
        runDeviceCommand($("#"+clickedButton[0].id).attr("data-command"));
    });
});
</script>

I expected to have the “data-command” available through the jquery selector. The clickedButton[0].id returns the correct set id.
After checking the dom model i see that my buttons are gone and replaced with divs, when checking the divs the “data-command” is not there. I really really really need this the command, i can not use it as a label because it will look like: “djks234FDe-cPAUA4LGMu-0x54”

Am i using the wrong event.args?

[Peter StoevKeymaster]

Hi johnsirach,

Not sure exactly why that happens, but as a workaround I can suggest you to set the attribute after the widget’s initialization. You can achieve that by using the jQuery’s attr method where the first parameter would be the attribute and the second would be its value.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[PiDomeParticipant]

Hi peter,

I will solve it by using the div id also as the parameter to execute the runDeviceCommand function.

Setting the attributes would require extra xsl which is not desired due to the fact that the xsl transformation is done on a raspberry pi where i want as less xsl as possible.

Thank you for the response.

Best regards,
John.

P.S. Do all the button functions replace the buttons with div’s?

[Peter StoevKeymaster]

Hi John,

Only, the jqxButtonGroup widget wraps a DIV tag around the Button tags.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[PiDomeParticipant]

Hi Peter,

As you can see, the button is gone:
Original (replaced xsl tags with the result):

<button style="padding:4px 16px;" data-command="deviceAction-VUuInZv170-cPAUA4LGMu-0x54" id="deviceAction-VUuInZv170-cPAUA4LGMu-0x54">On</button>

Replaced:

<div style="padding: 4px 16px; margin-left: -1px; float: left;" id="deviceAction-VUuInZv170-cPAUA4LGMu-0x54" class="jqx-button jqx-button-metrodark jqx-group-button-normal jqx-group-button-normal-metrodark jqx-fill-state-normal jqx-fill-state-normal-metrodark jqx-rc-tl jqx-rc-tl-metrodark jqx-rc-bl jqx-rc-bl-metrodark" role="radio">On</div>

The above is fetched from the Google developer tools via the “Elements” tab

The problem has been fixed by the way by using the id.

Best regards,
John.

[Peter StoevKeymaster]

Hi John,

Yes, that’s what I wrote you. You use jqxButtonGroup, right? jqxButtonGroup uses DIV tags.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[PiDomeParticipant]

Hi Peter,

Ok, i now understand how you meant wrapping around.

I understood by wrapping around:
<div>
<button>Text</button>
</div>
instead of
<div>Text</div>

Technically speaking this is replacing with a div instead of wrapping a div around a button.

Yes i’m using the jqxButtonGroup, and understand the workings better now. I have it working very nice now with a websocket so the correct “button” is selected now when someone else changes the value in an other browser window.

Maybe for someone else, i didn’t found a method to change the button selection by it’s button div id but only one by it’s index id. Use the code below to do the select change by the div id like this (if the buttons are rendered in order):

function updateRadioButtongroup(divWrappingTheButtons, buttonDivId){
    if ($("#" + divWrappingTheButtons).length !== 0) {
        var buttonIndex = $("#" + buttonDivId).index();
        if(buttonIndex!==undefined && buttonIndex>-1){
            $("#" + divWrappingTheButtons).jqxButtonGroup('setSelection', buttonIndex);
        }
    }
}

Best regards,
John.

[Author]

Posts