Get variables from custom buttons on Windows

[cyberfizz]

I have dynamically created a window and want to be able to pass a variable to an event e.g. data-custom-id from the window DIV should be sent to the cog press event cogPressed(ID). I cant see anyway of doing this though and the buttons appear to have to be global instead of making those dynamically too.

How can i get the information of the window which calls the event on the custom button?

[olton]

$(".your_custom_button_class").on("click", function(e){
    var window = $(e.target).closest(".window");
    ...
})

[cyberfizz]

Hi Olton, thank you for the extremely quick response! Not sure how i would use this though when creating a window? I have used the tutorial and have a set of custom buttons as a global variable. Not sure how I can use your example though?

I have tried creating a document ready function:
$(".source-window-cog").on("click", function (e) {
cogPressed(e);
});

And the custom buttons are:
var customButtons = [

{
    html: "<span class='mif-cog source-window-cog'></span>",
    cls: "alert",
    //onclick: "cogPressed(event)"
}

];

function cogPressed(e)
{
var window = $(e.target).closest(".window");
}

but the event never looks to be hit? Is there a different way I should use it?

[olton]

https://codepen.io/olton/pen/KKVjGEr?editors=1010

[cyberfizz]

Thank you very much for the example, I managed to use it and get what I needed using a hidden span within the content and getting it that way.

Thanks again and really appreciate the assist.

[olton]

New in 4.4.0

• Window: added property attr to custom button definition. This attribute must be a object with pairs key: value where key - attribute name, value - attribute value, issue Get variables from custom buttons on Windows #1592

Now you can:

<div data-role="window" class="p-2" data-on-drag-start="dragStart" data-on-resize-start="resizeStart" data-custom-buttons="customButtons">
    This is a simple window
</div>

    var customButtonHandler = function(btn){
        console.log($(btn).attr("data-custom-id"));
        console.log($(btn).attr("data-special-attr"));
    }

    var customButtons = [
        {
            html: "<span class='mif-cog'></span>",
            onclick: customButtonHandler,
            cls: "alert",
            attr: {
                "data-custom-id": "myID_1",
                dataSpecialAttr: "additional attribute"
            }
        }
    ];

[ojosojo]

Nice update, this is very useful