Show Modal Dialog from Custom Template and Close upon success (v2021)

PHPMaker General Discussion (PHPMaker)
1

I’m developing a web app with PHPMaker 2021 to manage personal expenses.

I have written code for Expense Item View Page - Custom Template and there, I’ve added a button that takes me to “Add Category” page.

Here, what I want to achieve is…

  1. Show the “Add Category” page in Modal Dialog.
  2. Close the Modal Dialog upon Category added.
  3. Redirect the User back to the view page which opened the modal dialog.

I enabled “Modal” for “Add Page” for Categories and copied the code for "Add Button on the List page for Categories to my Custom Template. This is opening the “Add Category” page in Modal correctly.But I am not sure how to solve the remaining two ToDo items.

I tried Page Redirecting, but I’m not sure how to detect if the add action is performed or otherwise. I tried $this->isInserted() for New and $this->isUpdated() for Edit etc, but that didn’t work for me, perhaps it does not work for forms in Modal dialog?

Please help me with the right way to implement modal dialog in the custom template that closes itself upon successful action (or if the User clicks the cancel button).

Also, please help me with the right way to show the modal dialog that does not close automatically if the User accidentally clicks in the area around the modal dialog.I understand, that currently it is version 2022. But I hope someone will help me with version 2021.

Waiting for your reply…Thanks.

2

Just to mention, I’m using following way of showing the modal dialog from A tag with class=“btn btn-default” set.


onclick="return ew.modalDialogShow({lnk:this,btn:'AddBtn',url:'<?php echo BasePath(); ?>/CategoriesAdd'});"

I just copied it from the categories list page Add New button, then made some changes in the URL param to make it work for me from my Custom Template.

3

ross_t wrote:

the right way to show the modal dialog that does not close automatically if the User accidentally clicks in the area around the modal dialog.

Since PHPMaker v2021 used Bootstrap v4, then you may simply put this following code in Client Scripts → Global → Pages with header/footer → Global Code:

document.getElementById("ew-modal-dialog").setAttribute("data-backdrop", "static");
document.getElementById("ew-modal-lookup-dialog").setAttribute("data-backdrop", "static");
document.getElementById("ew-add-opt-dialog").setAttribute("data-backdrop", "static");

For PHPMaker v2022, which used Bootstrap v5, you may simply put this following code in Client Scripts → Global → Pages with header/footer → Global Code:

document.getElementById("ew-modal-dialog").setAttribute("data-bs-backdrop", "static");
document.getElementById("ew-modal-lookup-dialog").setAttribute("data-bs-backdrop", "static");
document.getElementById("ew-add-opt-dialog").setAttribute("data-bs-backdrop", "static");
4

Thanks for the reply.How about


  1. Automatically close the modal dialog upon successful operation?
  2. Redirect the user to the which opened the modal dialog upon closing of modal dialog?
5

You may try: How to Display View/Edit Page in Modal Dialog that Belongs to Another Tables (v2021)

6

Thanks so much for the link. That helped me a lot to correct my modal dialog code.

However, I noticed a new problem with Modal Dialog.When I load a Master-Detail Form for Edit with “show_detail=

” in Modal Form, the Look-up code to populate the drop-down of the detail page does not work. The drop-down is indeed filled well with values from the look-up table for the existing rows. But, when I click the plus button to add a new row, the drop-down in the newly added row in the detail table does not load Look-up values from the table in the drop-down. The drop-down appears empty.Is there any workaround for this?

7

Please try to move the code from Global Code to Startup Script section, after that, re-generate ALL the script files, and try again.