Hello
I cant understand how works window.sessionStorage(‘_dash_persistence.checklist.value.true’ )
my code
python file
import dash_bootstrap_components as dbc
from dash import Dash, html, dcc, Input, Output, State, callback_context, no_update, callback, clientside_callback, ClientsideFunction
from sql_execute import get_lpu, create_counter
app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP], update_title=None)
lpu_list = [{'label': f'lpu{lpu}', 'value': f'lpu{lpu}'} for lpu in range(10)]
# lpu_list = get_lpu()
lpu_allert = [{}]
allert = ["allert"]
app.layout = html.Div([
html.Div(
html.Div(
[
html.H6('medical organization', className='h6span'),
html.Div(
id='view',
className='view'
),
dbc.DropdownMenu(
id="dropdown-menu",
align_end=True,
color="secondary",
# label=[html.Img(src="/assets/dropdown-arrow-svgrepo-com.svg")],
children=[
html.Div(
id='select_all', className='noselect', children=html.Div(
children=[html.Img(src="/assets/bx-list-check.svg"),
html.Span("Выбрать все"),
]
),
),
html.Div(
[
dcc.Input(
id="search-input",
type="text",
placeholder="Type to filter",
autoComplete="off",
style={'marginleft': '.5rem'},
className='search-input'
),
],
id="input-container",
),
dbc.DropdownMenuItem(divider=True),
dcc.Checklist(
id = 'checklist',
options=lpu_list,
persistence_type='session',
persistence=True,
# inputClassName='form-check-input'
),
html.Span(children='', id='empty_checklist')
]
),
html.Div(id='output_div', children=['put_me1']),
html.Div(id='output_div1', children=['put_me2'])
],
className='selector_border',
style={
'justifycontent': 'center'
},
),
),
])
app.clientside_callback(
ClientsideFunction(
namespace='clientside',
function_name='restore_checklist_value_onload'
),
Output('output_div1', 'children'),
Input('output_div','n_clicks'),
State("checklist", "options"),
prevent_initial_call=True
)
app.clientside_callback(
ClientsideFunction(
namespace='clientside',
function_name='viev_session_storage'
),
Output('output_div', 'children', allow_duplicate=True),
Input('output_div1','n_clicks'),
State("checklist", "options"),
prevent_initial_call=True
)
# @app.callback(Output('checklist', 'value', allow_duplicate=True),
# Input('output_div','n_clicks'),
# State('checklist', 'value'),
# prevent_initial_call=True)
# def testf(n_clicks, v1):
# print(v1)
# return no_update
app.clientside_callback(
f'''
function printValue(search_value) {{
let lowerCaseSearchValue = search_value.toLowerCase();
let lpu_list = {lpu_list};
console.log(lpu_list)
let found = lpu_list.filter(element => element.value.toLowerCase().includes(lowerCaseSearchValue));
if (found.length > 0) {{
return found;
}} else {{
return {lpu_allert};
}}
}}
''',
Output("checklist", "options"),
Input("search-input", "value"),
prevent_initial_call=True)
app.clientside_callback(
ClientsideFunction(
namespace='clientside',
function_name='view_callback'
),
Output('view', 'children'),
Input('checklist', 'value')
)
app.clientside_callback(
ClientsideFunction(
namespace='clientside',
function_name='select_all_value'
),
Output('checklist', 'value'),
Input('select_all', 'n_clicks'),
State('checklist', 'options'),
prevent_initial_call=True
)
if __name__ == '__main__':
app.run(debug=True, dev_tools_ui=True)
js
window.dash_clientside = Object.assign({}, window.dash_clientside, {
clientside: {
view_callback: function(value) {
if (typeof value === "undefined") {
return []
}
else {
let formattedString = value.join(', ')
return formattedString;
}
},
select_all_value: function (n_clicks, options, value) {
const optionsArray = options.map(item => item.value);
console.log(window.sessionStorage)
window.sessionStorage.setItem('_dash_persistence.checklist.value.true', JSON.stringify([optionsArray]));
console.log(window.sessionStorage)
return optionsArray
},
viev_session_storage(n_clicks, options) {
console.log(options)
const optionsArray = options.map(item => item.value)
window.sessionStorage.setItem('_dash_persistence.checklist.value.true', JSON.stringify([optionsArray]));
return optionsArray;
},
restore_checklist_value_onload(n_clicks, options) {
console.log(window.sessionStorage)
return ['put_me2']
}
}
});
I’m trying to make a ‘select_all’ button.
First case :
The user opens the page for the first time. Than put the DropdownMenu and click at select all element. At this time it works clientside_callback select_all_value. JS get setItem in sessionStorage (you can see that in console). User update page and the stored values are not pulled up. I cant understand why value dosent save
Second case
When opening, the user will click on the “put_me2” button. Next, it will refresh the page and all the values will catch up. Although the callback code is identical
I will be very grateful if you point out my mistake to me
Thank you in advance for reading my post
