Hello,

since I need to show/hide a bootstrap 5 modal, I thought I could use the TBootstrapModal defined in bootstrapwidgets, however it gives the exception in the subject: "JQuery(...).modal is not a function. This comes from ApplyWidgetSettings:

JQuery(aElement).modal(...

since TBootstrap is defined as a class helper for TJQuery.

I'm not an expert in web technologies, but I guess this is due to the fact that libbootstrap is for bootstrap 4 and I'm using bootstrap 5.

For the time being I'm using a very minimal wrapper for the modal (since I only need to show/hide it from my application):

type
   TBootstrapModal = class external name 'bootstrap.Modal' (TJSObject)
   public
     constructor new(element: TJSObject{; options: JSValue});
     procedure hide;
     procedure show;
   end;

Bye

It also works with bootstrap 5, but you must simply include jquery manually.

But having a libbootstrap5 geared towards using bootstrap without jquery would indeed be a good idea.

Michael.

El 11/8/23 a les 11:53, Michael Van Canneyt via Pas2js ha escrit:

Do you mean I have to include some other unit (which?) or import jquery with a <script> tag (which I did)?

Bye

The latter: Import jquery with a tag, make sure it is before the bootstrap js. (bootstrap 5 tries to detect the presence of jquery, so jquery must be first)

I use bootstrap 5 with the libbootstrap in several commercial projects, so I am quite sure it works :-)

Michael.

El 11/8/23 a les 13:01, Michael Van Canneyt via Pas2js ha escrit:

Well, I must be doing something wrong since it gives me that exception here. Maybe I should delay the rtl.run() ("Run RTL when all page resources are fully loaded")?

Bye

Maybe. It depends on where you set the script elements. If they are in the <head></head> then it should not be necessary.

Michael.

El 11/8/23 a les 13:17, Luca Olivetti via Pas2js ha escrit:

That was it-

Bye

El 11/8/23 a les 13:32, Michael Van Canneyt ha escrit:

Yes, they are in <head> and apparently it is necessary. OTOH, even if it now works, I introduced a dependency on jquery that I don't strictly need.

Bye

El 11/8/23 a les 13:37, Luca Olivetti via Pas2js ha escrit:

BTW, the "Backdrop" property is defined as boolean, however it has to be the text 'static' (according to the documentation even in bootstrap 4). I did this

--- a/packages/bootstrap/bootstrapwidgets.pp
+++ b/packages/bootstrap/bootstrapwidgets.pp
@@ -847,12 +847,19 @@ end;
  procedure TBootstrapModal.ApplyWidgetSettings(aElement: TJSHTMLElement);

  begin

- JQuery(aElement).modal(New([
- 'backdrop', BackDrop,
- 'keyboard', keyboard,
- 'focus',Focus,
- 'show',ShowOnRender
- ]));
+ if BackDrop then
+ JQuery(aElement).modal(New([
+ 'backdrop', 'static',
+ 'keyboard', keyboard,
+ 'focus',Focus,
+ 'show',ShowOnRender
+ ]))
+ else
+ JQuery(aElement).modal(New([
+ 'keyboard', keyboard,
+ 'focus',Focus,
+ 'show',ShowOnRender
+ ]));

    jQuery(aElement).on_('hidden.bs.modal', at BootstrapHide);
  end;

but I'm not sure if the backdrop property was intended to work the other way round.

Bye

If you look at the documentation:

https://getbootstrap.com/docs/5.0/components/modal/#options

In the table under 'options' you'll see it is a boolean or 'static'. I'll see about adding static.

Michael.

As I wrote, a version of the unit that targets bootstrap 5 without the dependency on jquery would be good. Unfortunately, this is not a trivial change.

Michael.

El 11/8/23 a les 14:19, Michael Van Canneyt via Pas2js ha escrit:

In the table under 'options' you'll see it is a boolean or 'static'. I'll see about adding static.

Right, I only looked at the example :-(
I hate it when they do things like these ("boolean or 'static', wtf?)

Bye

El 11/8/23 a les 14:19, Michael Van Canneyt via Pas2js ha escrit:

I'll see about adding static.

What about:

--- a/packages/bootstrap/bootstrapwidgets.pp
+++ b/packages/bootstrap/bootstrapwidgets.pp
@@ -209,6 +209,7 @@ Type
    private
      FHideEl : TJSHTMLElement;
      FBackDrop: Boolean;
+    FStaticBackDrop: Boolean;
      FFocus: Boolean;
      FKeyBoard: Boolean;
      FOnHide: TOnModalHideEvent;
@@ -241,6 +242,7 @@ Type
    Published
      Property ShowOnRender: Boolean Read FShowOnRender Write FShowOnrender;
      Property BackDrop : Boolean Read FBackDrop Write FBackDrop;
+    Property StaticBackDrop : Boolean Read FStaticBackdrop Write
FStaticBackDrop;
      Property KeyBoard : Boolean Read FKeyBoard Write FKeyBoard;
      Property Focus : Boolean Read FFocus Write FFocus;
      Property Template : String Read FTemplate Write SetTemplate;
@@ -847,12 +849,20 @@ end;
  procedure TBootstrapModal.ApplyWidgetSettings(aElement: TJSHTMLElement);

  begin

- JQuery(aElement).modal(New([
- 'backdrop', BackDrop,
- 'keyboard', keyboard,
- 'focus',Focus,
- 'show',ShowOnRender
- ]));
+ if StaticBackDrop then
+ JQuery(aElement).modal(New([
+ 'backdrop', 'static',
+ 'keyboard', keyboard,
+ 'focus',Focus,
+ 'show',ShowOnRender
+ ]))
+ else
+ JQuery(aElement).modal(New([
+ 'backdrop', BackDrop,
+ 'keyboard', keyboard,
+ 'focus',Focus,
+ 'show',ShowOnRender
+ ]));

    jQuery(aElement).on_('hidden.bs.modal', at BootstrapHide);
  end;

Bye