<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
Finally, I've found the right syntax to initialize the modal window :
<br>
</div>
<div>
<br>
</div>
<div>
updateRoot: anHtmlRoot
<br> super updateRoot: anHtmlRoot.
<br> anHtmlRoot bodyAttributes at: 'onLoad' append: '$( function(){$(''#myModal'').modal();})'.
</div>
<div>
<br>
</div>
<div>
Thanks again Paul.
<br>
</div>
<div class="io-ox-signature">
<div class="default-style">
---
<br>
</div>
<div class="default-style">
Dominique Dartois
<br>
</div>
</div>
<blockquote type="cite">
Le 22 février 2019 à 21:44, Dominique Dartois <dom@dartois.org> a écrit :
<br>
<br>
<div>
Thank you Paul for the time you spend writing this code.
</div>
<div>
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.
</div>
<div>
<img src="cid:9ea95c1c55614ca18a40d23a4244bb46@Open-Xchange" style="max-width: 100%;" class="ox-acebd17d06-aspect-ratio" alt="">
</div>
<div>
I have read on
<a href="https://stackoverflow.com/questions/18855331/bootstrap-3-data-show-not-working" target="_blank" rel="noopener">https://stackoverflow.com/questions/18855331/bootstrap-3-data-show-not-working</a> that the modal must be initialized first with something like :
</div>
<div>
<script type="text/javascript">
</div>
<div>
$( function(){
</div>
<div>
$('#myModal').modal();
</div>
<div>
} )
</div>
<div>
</script>
</div>
<div>
<br>
</div>
<div>
I am trying to put this code in the WAComponent>>updateRoot: method without success.
</div>
<div>
<br>
</div>
<div>
Regards,
<br>
</div>
<div>
---
</div>
<div>
Dominique
<br>
</div>
<div>
<br>
</div>
<blockquote type="cite">
<div>
Le 19 février 2019 à 01:04, Paul DeBruicker <
<a href="mailto:pdebruic@gmail.com">pdebruic@gmail.com</a>> a écrit :
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
The #callback: as you're using it in the button doesn't render HTML to the
</div>
<div>
page. It just tells seaside to change something in the image and then
</div>
<div>
re-render.
</div>
<div>
<br>
</div>
<div>
Because of that your #action: method, if it ran, wouldn't change the page.
</div>
<div>
<br>
</div>
<div>
When Seaside re-renders your app, depending on what you do in the callback,
</div>
<div>
it might re-render the page with some changes or another page.
</div>
<div>
<br>
</div>
<div>
It looks like you want to open a modal over the current page when the button
</div>
<div>
is clicked. Right?
</div>
<div>
<br>
</div>
<div>
If so, two ways that come to mind to do that are to either, after the button
</div>
<div>
is clicked,
</div>
<div>
<br>
</div>
<div>
- re-draw the page with the modal dialog HTML code rendered in it and set
</div>
<div>
to open on load,
</div>
<div>
<br>
</div>
<div>
or
</div>
<div>
<br>
</div>
<div>
- load the modal dialog HTML code into the existing page with
</div>
<div>
Javascript/Ajax and open the modal.
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
The first way:
</div>
<div>
<br>
</div>
<div>
MyBootstrap>>initialize.
</div>
<div>
<br>
</div>
<div>
super initialize.
</div>
<div>
showModal:=false.
</div>
<div>
<br>
</div>
<div>
MyBootstrap>>renderContentOn: html
</div>
<div>
self renderMyButton: html
</div>
<div>
self renderMyModal: html.
</div>
<div>
<br>
</div>
<div>
MyBootstrap>>renderMyButton: html
</div>
<div>
html anchor
</div>
<div>
class:'btn btn-primary';
</div>
<div>
callback: [self showModal];
</div>
<div>
with: 'Show modal'.
</div>
<div>
<br>
</div>
<div>
html anchor
</div>
<div>
class:'btn btn-default';
</div>
<div>
callback: [self hideModal];
</div>
<div>
with: 'Hide modal'.
</div>
<div>
<br>
</div>
<div>
MyBootstrap>>showModal
</div>
<div>
showModal := true.
</div>
<div>
<br>
</div>
<div>
MyBootstrap>>hideModal
</div>
<div>
showModal := false.
</div>
<div>
<br>
</div>
<div>
My Bootstrap>>renderMyModal: html
</div>
<div>
showModal ifTrue:[
</div>
<div>
html tbsModal
</div>
<div>
id: 'myModal';
</div>
<div>
attributeAt: 'data-show' put: true; "<--- opens the modal when rendered
</div>
<div>
on the new page"
</div>
<div>
with: [ html
</div>
<div>
tbsModalDialog: [ html
</div>
<div>
tbsModalContent: [ html
</div>
<div>
etc, etc...
</div>
<div>
].
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
Another approach could be to use jQuery to load the modal into the page and
</div>
<div>
open it when the button is clicked.
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
If so I'd do it like this:
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
renderContentOn: html
</div>
<div>
html tbsButton
</div>
<div>
bePrimary;
</div>
<div>
onClick: ((html jQuery id: 'myModalContainer') load html:[:h | self action:
</div>
<div>
h]; onComplete:((html jQuery id: 'myModal') call: 'modal' with: 'show');
</div>
<div>
with: 'Modal'.
</div>
<div>
<br>
</div>
<div>
html div id:'myModalContainer'.
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
And keep your #action: method as you have it now.
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
Dominique Dartois-4 wrote
</div>
<blockquote type="cite">
<div>
I would to open a dialog like this :
</div>
<div>
<br>
</div>
<div>
WAComponent subclass: #MyBootstrap
</div>
<div>
<br>
</div>
<div>
MyBootstrap>>renderContentOn: html
</div>
<div>
html tbsButton
</div>
<div>
bePrimary;
</div>
<div>
callback: [self action: html];
</div>
<div>
with: 'Modal'.
</div>
<div>
<br>
</div>
<div>
MyBootstrap>>action: html
</div>
<div>
html
</div>
<div>
html tbsModal
</div>
<div>
id: 'myModal';
</div>
<div>
with: [ html
</div>
<div>
tbsModalDialog: [ html
</div>
<div>
tbsModalContent: [ html
</div>
<div>
etc, etc...
</div>
<div>
<br>
</div>
<div>
The callback is never triggered.
</div>
<div>
<br>
</div>
<div>
---
</div>
<div>
Dominique Dartois
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<blockquote type="cite">
<div>
Le 17 février 2019 à 23:23, Paul DeBruicker <
</div>
</blockquote>
</blockquote>
<div>
<br>
</div>
<blockquote type="cite">
<div>
pdebruic@
</div>
</blockquote>
<div>
<br>
</div>
<blockquote type="cite">
<div>
mailto:
</div>
</blockquote>
<div>
<br>
</div>
<blockquote type="cite">
<div>
pdebruic@
</div>
</blockquote>
<div>
<br>
</div>
<blockquote type="cite">
<div>
> a écrit :
</div>
<blockquote type="cite">
<div>
<br>
</div>
<div>
<br>
</div>
<div>
Seaside callbacks shouldn't be affected by bootstrap at all.
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
Bootstrap's javascript for their modal looks for the
</div>
<div>
<br>
</div>
<div>
data-toggle="modal"
</div>
<div>
<br>
</div>
<div>
attribute and sets a click handler on those elements that
</div>
<div>
opens/closes the
</div>
<div>
modal when clicked. (See the example at
</div>
<div>
<a href="https://getbootstrap.com/docs/4.3/components/modal/" target="_blank" rel="noopener">https://getbootstrap.com/docs/4.3/components/modal/</a>)
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
What are you trying to do that you can't get working?
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
Dominique Dartois-4 wrote
</div>
<div>
<br>
</div>
<div>
> > Hi all.
</div>
<blockquote type="cite">
<div>
<br>
</div>
<div>
I’m trying to use Bootstrap with Seaside and I don’t find the
</div>
</blockquote>
<div>
notion of
</div>
<blockquote type="cite">
<div>
Callback. In the ‘Modal example’ the launch of the modal window
</div>
</blockquote>
<div>
is done by
</div>
<blockquote type="cite">
<div>
a href attribute in a html statement and not a callback in the
</div>
</blockquote>
<div>
Smalltalk
</div>
<blockquote type="cite">
<div>
code.
</div>
<div>
<br>
</div>
<div>
The statement :
</div>
<div>
<br>
</div>
<div>
html: '
</div>
<div>
Launch demo modal <#myModal>
</div>
<div>
'.
</div>
<div>
<br>
</div>
<div>
Is it a choice for this example or is it impossible to use a
</div>
</blockquote>
<div>
Callback with
</div>
<blockquote type="cite">
<div>
Bootstrap for Seaside?
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
I am using Pharo 7 64 bits and the latest package
</div>
</blockquote>
<div>
Seaside+Bootstrap.
</div>
<blockquote type="cite">
<div>
<br>
</div>
<div>
Regards,
</div>
<div>
---
</div>
<div>
Dominique Dartois
</div>
<div>
<br>
</div>
<div>
_______________________________________________
</div>
<div>
seaside mailing list
</div>
<div>
<br>
</div>
<div>
>
</div>
</blockquote>
<div>
<br>
</div>
<div>
> >
<a href="mailto:seaside@.squeakfoundation">seaside@.squeakfoundation</a>
<br>
</div>
<div>
mailto:
<a href="mailto:seaside@.squeakfoundation">seaside@.squeakfoundation</a>
<br>
</div>
<blockquote type="cite">
<div>
<br>
</div>
<div>
>
</div>
</blockquote>
<div>
<br>
</div>
<div>
> >
</div>
<div>
<a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank" rel="noopener">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a>
<br>
</div>
<blockquote type="cite">
<div>
<br>
</div>
<div>
>
</div>
</blockquote>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
--
</div>
<div>
Sent from:
<a href="http://forum.world.st/Seaside-General-f86180.html" target="_blank" rel="noopener">http://forum.world.st/Seaside-General-f86180.html</a>
<br>
</div>
<div>
_______________________________________________
</div>
<div>
seaside mailing list
</div>
<div>
<br>
</div>
</blockquote>
</blockquote>
<div>
<br>
</div>
<blockquote type="cite">
<div>
<a href="mailto:seaside@.squeakfoundation">seaside@.squeakfoundation</a>
<br>
</div>
</blockquote>
<div>
<br>
</div>
<blockquote type="cite">
<div>
mailto:
</div>
</blockquote>
<div>
<br>
</div>
<blockquote type="cite">
<div>
<a href="mailto:seaside@.squeakfoundation">seaside@.squeakfoundation</a>
<br>
</div>
</blockquote>
<div>
<br>
</div>
<blockquote type="cite">
<blockquote type="cite">
<div>
<a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank" rel="noopener">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a>
<br>
</div>
<div>
<br>
</div>
</blockquote>
<div>
<br>
</div>
<div>
_______________________________________________
</div>
<div>
seaside mailing list
</div>
</blockquote>
<div>
<br>
</div>
<blockquote type="cite">
<div>
<a href="mailto:seaside@.squeakfoundation">seaside@.squeakfoundation</a>
<br>
</div>
</blockquote>
<div>
<br>
</div>
<blockquote type="cite">
<div>
<a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank" rel="noopener">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a>
<br>
</div>
</blockquote>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
--
</div>
<div>
Sent from:
<a href="http://forum.world.st/Seaside-General-f86180.html" target="_blank" rel="noopener">http://forum.world.st/Seaside-General-f86180.html</a>
<br>
</div>
<div>
_______________________________________________
</div>
<div>
seaside mailing list
</div>
<div>
<a href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a>
<br>
</div>
<div>
<a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank" rel="noopener">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a>
<br>
</div>
</blockquote>_______________________________________________
<br>seaside mailing list
<br>seaside@lists.squeakfoundation.org
<br>http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
<br>
</blockquote>
<div class="default-style">
<br>
</div>
</body>
</html>