Re: Seaside+Bootstrap and callbacks
Dominique Dartois <[email protected]>
| Newsgroups | gmane.comp.lang.smalltalk.squeak.seaside |
|---|---|
| Message-ID | <[email protected]> |
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 < [email protected] mailto:[email protected] > 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
> > > >
> > > > >
> > > >
> > > > > > >
> > > > > [email protected] mailto:[email protected]
> > > mailto: [email protected] mailto:[email protected]
> > >
> > > > > > >
> > > > >
> > > >
> > > > > > >
> > > > >
> > > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> > >
> > > > > > >
> > > > >
> > > >
> > > > > > >
> > >
> > >
> > >
> > > --
> > > Sent from: http://forum.world.st/Seaside-General-f86180.html
> > > _______________________________________________
> > > seaside mailing list
> > >
> > >
> > > > >
> > >
>
> > > [email protected] mailto:[email protected]
> >
> > >
>
> > > mailto:
> >
> > >
>
> > > [email protected] mailto:[email protected]
> >
> > >
>
> > >
> > > > > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> > >
> > >
> > > > >
> > _______________________________________________
> > seaside mailing list
> >
> > >
>
> > > [email protected] mailto:[email protected]
> >
> > >
>
> > > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> >
> > >
>
>
>
>
> --
> Sent from: http://forum.world.st/Seaside-General-f86180.html
> _______________________________________________
> seaside mailing list
> [email protected] mailto:[email protected]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
_______________________________________________
seaside mailing list
[email protected]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside