Self.instances ID's are disappearing after refresh in QuasarPage

[Nandreasyan]

I have created some jp.Divs and gave them as arguments ID="ID_xxxxx".
So I used the ID to change the content in events with the following way
Self.instances["ID_xxxxx"] = something.

After refreshing the website server could not find this ID_s them, the solution was, rebuild the project or close the tab and open it again.

So I do not know if it is a bug or not. Or it is not recommended to work with self.instances in the events?

Another salutation for that was to work only with components.
Another Problem that I have now, when I open a page to make changes, and after that I open another tab or new window. Or even another browser, it is remembering the changes.
How to make it so that for each tab, windows or generally any new connection sessions, everything set to defaults?

[elimintz]

You should not work with the self.instances of a container such as a Div or WebPage. instances is a class attribute of WebPage and JustpyBaseComponent.

What are you trying to do? Which functionality are you looking for?

[Nandreasyan]

You should not work with the self.instances of a container such as a Div or WebPage. instances is a class attribute of WebPage and JustpyBaseComponent.

What are you trying to do? Which functionality are you looking for?

I built single web page application, in which there is dynamic output. This means, based on some parameters, the output is changing immediately.
So to change the content of the output, I need somehow access to that.

But now I have another Problem
Another Problem that I have now, when I open a page to make changes, and after that I open another tab or new window. Or even another browser, it is remembering the changes.
How to make it so that for each tab, windows or generally any new connection sessions, everything set to defaults?

[elimintz]

Please take a look at the example here which shows how to change a Div content immediately as input changes:
https://justpy.io/tutorial/input/#the-input-event

[Nandreasyan]

Please take a look at the example here which shows how to change a Div content immediately as input changes:
https://justpy.io/tutorial/input/#the-input-event

I have forgotten to write, that as dynamic output I am using QList

[elimintz]

Basically the same idea. In the event handler change the QList as you want.

[Nandreasyan]

Basically the same idea. In the event handler change the QList as you want.

For changing the content of the QList I am accessing and changing it like this in the event handler.

msg.page.components[1].components[0].components[3].components[1] = XXXXXXXXX

Is this not the correct way to do?

[elimintz]

It is better to assign the element you want to change to an attribute of the page like in this example:
https://justpy.io/tutorial/handling_events/#example-3-event-changes-elements-on-page

[Nandreasyan]

It is better to assign the element you want to change to an attribute of the page like in this example:
https://justpy.io/tutorial/handling_events/#example-3-event-changes-elements-on-page

Just take following example(QList example a little changed), now the question is when I click the buttons, for example Button 7, I want that only the text attributes in QList change to something different, the only way I can see to access on QList Text Column, and change every Cell is to access with Components.
This part
for c in wp.q_list.components:
if c.components[1].text == "apple":
c.components[1].text = "Apple"
elif c.components[1].text == "aardvark":
c.components[1].text = "Test1"
I can not understand, how to use the example that you mentioned.

Another Problem is that I have global variables in python. How to reset all them to defaults when a new tab or page opened.
And another question is how to keep for each new tab different global variables for exactly the same page.

import justpy as jp

qlist_texts = ['apple', 'ad', 'aardvark', 'again', 'bean', 'bath', 'beauty', 'can', 'corner', 'capital']

def check_box_clicked(self, msg):
    wp = msg.page

    def my_filter(var):
        for letter in self.value:
            if var.startswith(letter):
                return True
        return False

    filtered_list = list(filter(my_filter, wp.list_item_text))

    for c in wp.q_list.components:
        if c.components[1].text not in filtered_list:
            c.show = False
        else:
            c.show = True

def button_click(self, msg):
    wp = msg.page

    self.num_clicked += 1
    # self.message.text = f'{self.text} clicked. Number of clicks: {self.num_clicked}'
    p = jp.P(text=f'{self.text} clicked. Number of clicks: {self.num_clicked}')
    self.message.add_component(p, 0)
    for button in wp.button_list:
        button.set_class('bg-blue-500')
        button.set_class('bg-blue-700', 'hover')
    self.set_class('bg-red-500')
    self.set_class('bg-red-700', 'hover')

    for c in wp.q_list.components:
        if c.components[1].text == "apple":
            c.components[1].text = "Apple"
        elif c.components[1].text  == "aardvark":
            c.components[1].text = "Test1"

def reactive_list_test():
    wp = jp.QuasarPage(tailwind=True)
    d = jp.Div(classes="q-pa-md", style="max-width: 400px", a=wp)
    wp.list_item_text = ['apple', 'ad', 'aardvark', 'again', 'bean', 'bath', 'beauty', 'can', 'corner', 'capital']
    wp.q_list = jp.QList(dense=True, bordered=True, padding=True, classes="rounded-borders", a=d)

    button_div = jp.Div(classes='flex m-4 flex-wrap', a=wp)
    button_classes = 'w-32 mr-2 mb-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full'
    message = jp.Div(classes='text-lg border m-2 p-2 overflow-auto h-64', a=wp)
    message.add(jp.P(text='No button clicked yet'))
    button_list = []
    ii = 0
    for word in wp.list_item_text:
        ii += 1
        q_item = jp.QItem(clickable=True, v_ripple=True, a=wp.q_list)
        jp.Div(text=f'{ii}', a=q_item, style="width: 2em;text-align: center;color: black", classes="unselectable")
        jp.QItemSection(text=word, a=q_item)
        jp.Div(text=f'{ii*3}', a=q_item, style="width: 2em;text-align: center;color: black")

        b = jp.Button(text=f'Button {ii}', a=button_div, classes=button_classes, click=button_click)
        b.message = message
        b.num_clicked = 0
        button_list.append(b)
    wp.button_list = button_list


    option_group = jp.QOptionGroup(type='checkbox', color='green', a=d, input=check_box_clicked, value=['a', 'b', 'c'],
                                   inline=True, classes='q-ma-lg',
                    options=[{'label': 'A words', 'value': 'a'}, {'label': 'B words', 'value': 'b'}, {'label': 'C words', 'value': 'c'}])

    return wp

jp.justpy(reactive_list_test)

** Another Problem is that I have internal global variables in python. How to reset all them to defaults when a new tab or page opened.
And another question is how to keep for each new tab or window or browser different internal global variables for exactly the same page. The thing is that I have many variables(Pandas Dataframes) , where in different functions is changed and the results should be in outputs dynamically, this problem is difficult to demonstrate **

[Nandreasyan]

I solved the second problem, using global variables as page attributes.