Forums

Open modal dialog

Permalink
I've been trying to edit items in a table through a modal dialog. What I'd like to achieve is that every row in a table has an "edit", and that clicking this button will open a new modal dialog where you can edit the row. Then you should have the option to cancel or save the operation.

I know how to do this using either plain JavaScript or jQuery UI, but I can't figure out what the correct way to achieve this is in concrete5. I haven't been able to find any documentation for this apart from a tutorial by Andrew Embler (http://andrewembler.com/posts/javascript-jquery-and-concrete5/), which doesn't work in the newest version of concrete5.

Does anyone know how to do this?
 
Frog replied on at Permalink Reply
I finally figured out how to do this. I now replicate the default edit popup in my own block using the following code:
<div id="myDialogContent" style="display: none;">
My block
</div>
<script type="text/javascript">
$('div#myDialogContent').dialog({
   buttons: [
      {
         class: 'btn cancel',
         click: function() {
            $(this).dialog('close');
         },
         text: 'Cancel'
      },
      {
         class: 'btn btn-primary save',
Viewing 15 lines of 27 lines. View entire code block.


To position the buttons correctly I use the following CSS code:
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
   width: 100%;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn {
   margin: 0px;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.cancel {
   float: left;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.save {
   float: right;
}


I basically just use the jQuery UI dialog class. But because concrete5 only applies the bootstrap styles to elements within an element with class "ccm-ui" I manually add that class to the dialog.

I hope this helps someone else who has the same problem.
SkyBlueSofa replied on at Permalink Reply
SkyBlueSofa
I believe I understand what's going on here. How do you trigger showing the dialog? Something like this?
$('SPAN.my_dialog_opener').showDialog('myDialogContent');