Dynamic modal dialog

[vidalperezleida]

Hi. First, thanks for this amazing project. There is a way of showing a modal box currently in sqlpage, If not I think it will be a good addition.

I'm doing some testing and I manage to show a static model but maybe with some tweaks could be dynamic.

I create a template modal.handlebars in templates directory. The content comes from the tabler docs: https://tabler.io/docs/components/modals

<div class="modal" id="modal" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{title}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {{content}}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Then I created a index.js javascript file that search for the button responsible to open the modal and add two attributes. The content:

var buttonOpenPopup = document.getElementsByClassName('open-popup');
if (buttonOpenPopup) {
    buttonOpenPopup[0].setAttribute('data-bs-toggle','modal');
    buttonOpenPopup[0].setAttribute('data-bs-target','#modal');
}

now in the index.sql file:

1. Create the shell and include the javascript
2. Add the button with the class name and a # to prevent redirect
3. Add the new modal component

select    
    'shell'                   as component,
    'Modal test'   as title,
    ''                       as link,
    '/index.js' as javascript;

select 
    'button' as component,
    'open-popup' as class;
select
    'Open popup'            as title,
    '#'     as link;

select 'modal' as component,
    'Hello' as title,
    'modal content' as content;

When you open the index.sql you see:

Then click on the button:

Some things that might be interesting to:

• Posibility to add ids to component, for example to add a id to the button
• Posibility to make ajax request when button is clicked

Thanks

[lovasoa]

Hello and welcome to SQLPage ! What are you building ? In what context do you need a modal ?

[vidalperezleida]

Hi. Just testing. But I thought in many applications you want to do some action and not reload all page. For example validate some data and show a message to the user or show some detailed info when they click on a button.

[lovasoa]

SQLPage encourages you to write your logic in SQL, and to avoid keeping state on the client. This makes everything simpler and more approachable, but it requires giving up old habits if you are used to frontend development. SQLPage makes page loads very fast, and reloading the entire page is generally several times faster than it is when using traditional frontend frameworks.

If while building your application, you encounter a situation where you need a modal, we can reopen this issue and discuss it here !