Seaside+Bootstrap and callbacks

Le 17 février 2019 à 23:23, Paul DeBruicker < [hidden email]> a écrit :

Seaside callbacks shouldn't be affected by bootstrap at all.

Bootstrap's javascript for their modal looks for the

data-toggle="modal"

attribute and sets a click handler on those elements that opens/closes the

modal when clicked. (See the example at

https://getbootstrap.com/docs/4.3/components/modal/)

What are you trying to do that you can't get working?

Dominique Dartois-4 wrote

Hi all.

I’m trying to use Bootstrap with Seaside and I don’t find the notion of

Callback. In the ‘Modal example’ the launch of the modal window is done by

a href attribute in a html statement and not a callback in the Smalltalk

code.

The statement :

html: '

Launch demo modal <#myModal>

'.

Is it a choice for this example or is it impossible to use a Callback with

Bootstrap for Seaside?

I am using Pharo 7 64 bits and the latest package Seaside+Bootstrap.

Regards,

---

Dominique Dartois

_______________________________________________

seaside mailing list

[hidden email]

http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

--

Sent from: http://forum.world.st/Seaside-General-f86180.html

_______________________________________________

seaside mailing list

[hidden email]

http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Le 19 février 2019 à 01:04, Paul DeBruicker < [hidden email]> a écrit :

The #callback: as you're using it in the button doesn't render HTML to the

page. It just tells seaside to change something in the image and then

re-render.

Because of that your #action: method, if it ran, wouldn't change the page.

When Seaside re-renders your app, depending on what you do in the callback,

it might re-render the page with some changes or another page.

It looks like you want to open a modal over the current page when the button

is clicked. Right?

If so, two ways that come to mind to do that are to either, after the button

is clicked,

- re-draw the page with the modal dialog HTML code rendered in it and set

to open on load,

or

- load the modal dialog HTML code into the existing page with

Javascript/Ajax and open the modal.

The first way:

MyBootstrap>>initialize.

super initialize.

showModal:=false.

MyBootstrap>>renderContentOn: html

self renderMyButton: html

self renderMyModal: html.

MyBootstrap>>renderMyButton: html

html anchor

class:'btn btn-primary';

callback: [self showModal];

with: 'Show modal'.

html anchor

class:'btn btn-default';

callback: [self hideModal];

with: 'Hide modal'.

MyBootstrap>>showModal

showModal := true.

MyBootstrap>>hideModal

showModal := false.

My Bootstrap>>renderMyModal: html

showModal ifTrue:[

html tbsModal

id: 'myModal';

attributeAt: 'data-show' put: true; "<--- opens the modal when rendered

on the new page"

with: [ html

tbsModalDialog: [ html

tbsModalContent: [ html

etc, etc...

].

Another approach could be to use jQuery to load the modal into the page and

open it when the button is clicked.

If so I'd do it like this:

renderContentOn: html

html tbsButton

bePrimary;

onClick: ((html jQuery id: 'myModalContainer') load html:[:h | self action:

h]; onComplete:((html jQuery id: 'myModal') call: 'modal' with: 'show');

with: 'Modal'.

html div id:'myModalContainer'.

And keep your #action: method as you have it now.

Dominique Dartois-4 wrote

I would to open a dialog like this :

WAComponent subclass: #MyBootstrap

MyBootstrap>>renderContentOn: html

html tbsButton

bePrimary;

callback: [self action: html];

with: 'Modal'.

MyBootstrap>>action: html

html

html tbsModal

id: 'myModal';

with: [ html

tbsModalDialog: [ html

tbsModalContent: [ html

etc, etc...

The callback is never triggered.

---

Dominique Dartois

Le 17 février 2019 à 23:23, Paul DeBruicker <

pdebruic@

mailto:

pdebruic@

> a écrit :

Seaside callbacks shouldn't be affected by bootstrap at all.

Bootstrap's javascript for their modal looks for the

data-toggle="modal"

attribute and sets a click handler on those elements that

opens/closes the

modal when clicked. (See the example at

https://getbootstrap.com/docs/4.3/components/modal/)

What are you trying to do that you can't get working?

Dominique Dartois-4 wrote

> > Hi all.

I’m trying to use Bootstrap with Seaside and I don’t find the

notion of

Callback. In the ‘Modal example’ the launch of the modal window

is done by

a href attribute in a html statement and not a callback in the

Smalltalk

code.

The statement :

html: '

Launch demo modal <#myModal>

'.

Is it a choice for this example or is it impossible to use a

Callback with

Bootstrap for Seaside?

I am using Pharo 7 64 bits and the latest package

Seaside+Bootstrap.

Regards,

---

Dominique Dartois

_______________________________________________

seaside mailing list

>

> > [hidden email]

mailto: [hidden email]

>

> >

http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

>

--

Sent from: http://forum.world.st/Seaside-General-f86180.html

_______________________________________________

seaside mailing list

[hidden email]

mailto:

[hidden email]

http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________

seaside mailing list

[hidden email]

http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

--

Sent from: http://forum.world.st/Seaside-General-f86180.html

_______________________________________________

seaside mailing list

[hidden email]

http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Le 22 février 2019 à 21:44, Dominique Dartois <[hidden email]> a écrit :

Thank you Paul for the time you spend writing this code.

I can see the <div> in the debugger appearing if I click the show button and desappearing with a click on Hide, BUT the modal window doesn’t show up.

I have read on https://stackoverflow.com/questions/18855331/bootstrap-3-data-show-not-working that the modal must be initialized first with something like :

<script type="text/javascript">

$( function(){

$('#myModal').modal();

} )

</script>

I am trying to put this code in the WAComponent>>updateRoot: method without success.

Regards,

---

Dominique

Le 19 février 2019 à 01:04, Paul DeBruicker < [hidden email]> a écrit :

The #callback: as you're using it in the button doesn't render HTML to the

page. It just tells seaside to change something in the image and then

re-render.

Because of that your #action: method, if it ran, wouldn't change the page.

When Seaside re-renders your app, depending on what you do in the callback,

it might re-render the page with some changes or another page.

It looks like you want to open a modal over the current page when the button

is clicked. Right?

If so, two ways that come to mind to do that are to either, after the button

is clicked,

- re-draw the page with the modal dialog HTML code rendered in it and set

to open on load,

or

- load the modal dialog HTML code into the existing page with

Javascript/Ajax and open the modal.

The first way:

MyBootstrap>>initialize.

super initialize.

showModal:=false.

MyBootstrap>>renderContentOn: html

self renderMyButton: html

self renderMyModal: html.

MyBootstrap>>renderMyButton: html

html anchor

class:'btn btn-primary';

callback: [self showModal];

with: 'Show modal'.

html anchor

class:'btn btn-default';

callback: [self hideModal];

with: 'Hide modal'.

MyBootstrap>>showModal

showModal := true.

MyBootstrap>>hideModal

showModal := false.

My Bootstrap>>renderMyModal: html

showModal ifTrue:[

html tbsModal

id: 'myModal';

attributeAt: 'data-show' put: true; "<--- opens the modal when rendered

on the new page"

with: [ html

tbsModalDialog: [ html

tbsModalContent: [ html

etc, etc...

].

Another approach could be to use jQuery to load the modal into the page and

open it when the button is clicked.

If so I'd do it like this:

renderContentOn: html

html tbsButton

bePrimary;

onClick: ((html jQuery id: 'myModalContainer') load html:[:h | self action:

h]; onComplete:((html jQuery id: 'myModal') call: 'modal' with: 'show');

with: 'Modal'.

html div id:'myModalContainer'.

And keep your #action: method as you have it now.

Dominique Dartois-4 wrote

I would to open a dialog like this :

WAComponent subclass: #MyBootstrap

MyBootstrap>>renderContentOn: html

html tbsButton

bePrimary;

callback: [self action: html];

with: 'Modal'.

MyBootstrap>>action: html

html

html tbsModal

id: 'myModal';

with: [ html

tbsModalDialog: [ html

tbsModalContent: [ html

etc, etc...

The callback is never triggered.

---

Dominique Dartois

Le 17 février 2019 à 23:23, Paul DeBruicker <

pdebruic@

mailto:

pdebruic@

> a écrit :

Seaside callbacks shouldn't be affected by bootstrap at all.

Bootstrap's javascript for their modal looks for the

data-toggle="modal"

attribute and sets a click handler on those elements that

opens/closes the

modal when clicked. (See the example at

https://getbootstrap.com/docs/4.3/components/modal/)

What are you trying to do that you can't get working?

Dominique Dartois-4 wrote

> > Hi all.

I’m trying to use Bootstrap with Seaside and I don’t find the

notion of

Callback. In the ‘Modal example’ the launch of the modal window

is done by

a href attribute in a html statement and not a callback in the

Smalltalk

code.

The statement :

html: '

Launch demo modal <#myModal>

'.

Is it a choice for this example or is it impossible to use a

Callback with

Bootstrap for Seaside?

I am using Pharo 7 64 bits and the latest package

Seaside+Bootstrap.

Regards,

---

Dominique Dartois

_______________________________________________

seaside mailing list

>

> > [hidden email]

mailto: [hidden email]

>

> >

http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

>

--

Sent from: http://forum.world.st/Seaside-General-f86180.html

_______________________________________________

seaside mailing list

[hidden email]

mailto:

[hidden email]

http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________

seaside mailing list

[hidden email]

http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

--

Sent from: http://forum.world.st/Seaside-General-f86180.html

_______________________________________________

seaside mailing list

[hidden email]

http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside