TWebHTMLDiv - updating elementclass "destroy" dynamic built child objects

WEB TMS WEB Core
1

Hi
I'm facing to an issue with TWebHTMLDiv
I create dynamically a TWebHTMLDiv object then I create inside 2 TWebButton.

Fragment of code

Div_Card_results.BeginUpdate;
    // Création de la Card
    New_Card  := TWebHTMLDiv.Create(Div_Card);
    New_Card.Parent              := Div_Card_results;
    New_Card.Visible             := True;

    New_Card.ElementPosition     := epRelative;
    New_Card.ElementClassName    := 'card-result js-toggle-card card-result--active';     // card-result js-toggle-card card-result--active
    New_Card.WidthStyle          := TSizeStyle.ssAuto;
    New_Card.HeightStyle         := TSizeStyle.ssAuto;
    New_Card.Align               := alTop;
    New_Card.OnClick             :=  @Div_ChildDirectClick; 
    New_Card.Tag                 := TagButton;
    New_Card.Name                := 'CardResult'+IntToStr(New_Card.Tag);
    New_Card.ElementID           := 'CardResult'+IntToStr(New_Card.Tag);
    New_Card.HTML.Add(ContentHTML);

    // Bouton Depot
        Button_Name  := StringReplace('button_depot_{{POI_ID}}','{{POI_ID}}',IntToStr(TagButton),[rfReplaceAll,rfIgnoreCase]);
        DM_Main.WebDebuglog('Element ID (target Depot) = '+ Button_Name);

        ButtonGoDepot                  := TWebButton.Create(Div_Card_results);
        ButtonGoDepot.Caption          := 'Déclarer un dépôt '+IntToStr(TagButton);
        ButtonGoDepot.Cursor           := crHandPoint;
        ButtonGoDepot.OnClick          := @ButtonDepotClick;
        ButtonGoDepot.ElementClassName := 'button';
        ButtonGoDepot.ElementID        := Button_Name;
        ButtonGoDepot.Parent           := Div_Card_results;
        ButtonGoDepot.ElementPosition  := epIgnore;
        ButtonGoDepot.WidthStyle       := TSizeStyle.ssAuto;
        ButtonGoDepot.HeightStyle      := TSizeStyle.ssAuto;
        ButtonGoDepot.Tag              := TagButton;


    // bouton Itineraire
    Button_Name  := StringReplace('button_go_{{POI_ID}}','{{POI_ID}}',IntToStr(TagButton),[rfReplaceAll,rfIgnoreCase]);
    DM_Main.WebDebuglog('Element ID (target Iti) = '+ Button_Name);

    ButtonGoItiner                  := TWebButton.Create(Div_Card_results);
    ButtonGoItiner.Caption          := 'Itinéraire '+IntToStr(TagButton);
    ButtonGoItiner.Cursor           := crHandPoint;
    ButtonGoItiner.OnClick          := @ButtonItiClick;
    ButtonGoItiner.ElementClassName := 'button-outline button-itinerary';
    ButtonGoItiner.ElementID        := Button_Name;
    ButtonGoItiner.Parent           := Div_Card_results;
    ButtonGoItiner.ElementPosition  := epIgnore;
    ButtonGoItiner.WidthStyle       := TSizeStyle.ssAuto;
    ButtonGoItiner.HeightStyle      := TSizeStyle.ssAuto;
    ButtonGoItiner.Tag              := TagButton;

    Div_Card_results.EndUpdate;

Everything works fine

image
image1121×406 159 KB

I intercept click on New_Card with Div_ChildDirectClick to adapt design defined in CSS by changing ElementClassName of Div
Change is applied but the 2 code defined buttons are lost, only HTML of New_Card is display.

image
image1080×378 105 KB

Is there a way to keep existing child object reference when ElementClassName is updated?

Thanks
Sylvain

2

What is
Div_Card_results
Div_Card
?

I cannot see any evidence that setting ElementClassName on an element would remove child elements from this element.
All SetElementClassName does is set the class attribute. From WEBLib.Controls.Pas:

FContainer['class'] := AValue;

3

Hi Bruno
It's what I was thinking when I created my process.
Div_Card_Results = and DIV element used as container (the scrolling zone) to create several Div_Card regarding results search.

I can prepare a test app to communicate to you in PM

Sylvain

4

Yes, please isolate to essentials and send a sample source project with which this can be reproduced.