app.clientside_callback(
‘’’
function (…args) {
var stData;
var id = dash_clientside.callback_context.triggered_id;
var inx = id.match(/\d+/)[0];
clickTimer = args[args.length - 1];
var n_clicks = args[inx]
console.log(“clientside: id=” + id + " n_clicks=" + n_clicks);
if (n_clicks === 1) {
// Start the timer on the first click
clickTimer.data = setTimeout(function() {
stData = {img_div: id, n_clicks: 1};
dash_clientside.set_props(“click_data”, {data: stData});
dash_clientside.set_props(id, {n_clicks: 0});
}, 250); // Adjust the delay as needed
} else if (n_clicks >= 2){
// Double click action
clearTimeout(clickTimer.data);
clickTimer.data = null;
stData = {img_div: id, n_clicks: 2};
dash_clientside.set_props(“click_data”, {data: stData});
dash_clientside.set_props(id, {n_clicks: 0});
} else {
clickTimer.data = null;
}
// console.log("stData: " + stData + " " + typeof stData);
// return dash_clientside.no_update;
return clickTimer
};
‘’‘,
Output(‘timer_data’, ‘data’, allow_duplicate=True),
# dash_clientside.set_props(id, {n_clicks: 0})
[Input(f’div_im{i}’, ‘n_clicks’) for i in range(max_images)],
State(‘timer_data’, ‘data’),
prevent_initial_call=True,
)
This code trigger a callback with the information of click / double click on html.Img called ‘div_im%d’, application has 45 elements, but
This code works only on the first 10 divs, any idea why?
Any suggested implementation?