Hello,

I have a div in my html and I want to change its content. For consistency, I'd like to use a TDivWidget, but I could find no way to modify the content: I cannot manipulate the TDivWidget itself and creating a TLabelWidget and assigning the TDivWidget as its parent does nothing.

If I use a TTagWidget instead, I can use TextContent (however if I set it to '' it will keep the previous content).

Currently I'm using a TJSHTMLDivElement and assign its innerHTML.

There are other cases where I had to use an html element instead of a widget since I could find no way to manipulate the content of the widget.

Is it so by design or am I doing something wrong?

Bye

I have changed this.

I have also added TextMode as a property so you can choose between InnerText and InnerHTML

Your use of DivHTML (or any other TTagWidget) is correct, but I needed to extend the functionality.

If you feel functionality is missing, don't hesitate to say so, and we'll discuss what can be done.

I've used these widgets in multiple projects, but use cases may vary.

You may want to look at the TSimpleTemplateWidget and TTemplateWidgets if you need to set innerHTML a lot, I usually use that.

Michael.

El 3/10/22 a les 17:35, Michael Van Canneyt via Pas2js ha escrit:

Thank you, I saw the commit but...

...I still see no way to change the content of a TDivWidget. Mind me, I don't need more functionality (or better, I don't know what I need, this is my first project using pas2js), I just need to learn how to best use what's already there.
I can mix and match widgets and elements, but I don't know if that's good practice.
I also instinctively prefer to use the widget most close to the tag (I just changed a bunch TTagWidget to the real widget type, i.e. TDivWidget and TLabelWidget) but maybe that's not good practice either.

I'll check those examples, thank you.

Sorry, I forgot to publish these properties, TDivWidget descends from TCustomTagWidget, not from TTagWidget, my bad.

Fixed.

Michael.

El 3/10/22 a les 17:35, Michael Van Canneyt via Pas2js ha escrit:

Unfortunately you left out the "if FTextContent''" which broke my page (it empties a div hence later it doesn't find the element that were there). This fixes it for me

--- a/packages/webwidget/htmlwidgets.pp
+++ b/packages/webwidget/htmlwidgets.pp
@@ -3195,10 +3195,11 @@ end;
  procedure TCustomTagWidget.ApplyWidgetSettings(aElement: TJSHTMLElement);
  begin
    inherited ApplyWidgetSettings(aElement);
-  if TextMode=tmText then
-    aElement.InnerText:=TextContent
-  else
-    aElement.InnerHTML:=TextContent
+  if FTextContent'' then
+    if TextMode=tmText then
+      aElement.InnerText:=TextContent
+    else
+      aElement.InnerHTML:=TextContent
  end;

Bye

I understood from your original mail that you wanted that particular part gone ?

I reinstated it.

Michael.

El 4/10/22 a les 9:52, Michael Van Canneyt ha escrit:

I must have expressed myself poorly, I just wanted a way to modify the content, i.e. what you did in a later commit

https://gitlab.com/freepascal.org/fpc/pas2js/-/commit/ad8c36e807de50be099dd0bf16e346fd21b0edc9

I reinstated it.

Thank you.

Bye

El 4/10/22 a les 9:59, Luca Olivetti via Pas2js ha escrit:

Aagh, now I see where the confusion came from: in one message I told that, if I assign and empty content, the element would keep the old one, so you removed the check, but then when I create the widget it would empty the content that it got from the html.
I guess I can't have my cake and eat it too, unless you could differentiate the two cases (i.e. initial assignment, when you just got the element from the html, and subsequent assignments).

Bye

Yes, that's the consequence :)

I guess I can't have my cake and eat it too, unless you could differentiate the two cases (i.e. initial assignment, when you just got the element from the html, and subsequent assignments).

I've long been thinking to create a 'ClearContent' method, maybe this is a good occasion. It could actually set the HTML innertext/html, and for this widget then also set the textcontent to empty.

But first I'll think about how to solve the detection of the initial setting, probably there is a way.

Michael.

El 5/10/22 a les 8:53, Michael Van Canneyt ha escrit:

The law of unintended consequences :-D

It's not a big issue, now I just use a single space when I want to clear the previous content.

function EnsureNotEmpty(const s:string):string;
begin
  if s='' then
    result:=' '
  else
    result:=s
end;

Bye

I introduced ClearContents, and now setting an empty text should work if the widget is already rendered.

Michael.

El 5/10/22 a les 11:05, Michael Van Canneyt via Pas2js ha escrit:

I introduced ClearContents, and now setting an empty text should work if the widget is already rendered.

Great! I removed my workaround and everything works. Thank you.

Bye