Change HTML/CSS after Modal confirmation

Software Support
,
1

Hi all,

I copied some examples for creating a new AjaxModal for using in Production tab, starting as base from PKPWorkflowTabHandler.

I was able to create 2 modals, one of them modifying data in the DB correctly and showing a notification as the examples did.

However, for the second one I need something simpler, so I created an empty form with 2 buttons: Save and Cancel.

However I encounter 2 problems:

  • I’m not able to see how to change the default name of the Modal button from Save to Confirm, or anything else.
  • I don’t know how to change the CSS/class of the original clicked button (The one who make the Modal appear) for disabling it. As for some reason by default, it’s not a button, but a link, I have to trick it a bit with CSS, but anyways, I don’t know how to do via JS after confirming the action.

I’m able to continue the flow in PHP for performing back end tasks, but no idea how to interact with the front end.

Any help would be appreciated.

2

Hi @Jose_Ares,

I think the buttons you’re talking about are not part of the modal, but are part of the form within the modal. Do you have a {fbvFormButtons} call inside your form markup?

Regards,
Alec Smecher
Public Knowledge Project Team

3

Hi @asmecher, thanks for your help.

Yes, it was that button type. However, I cleared cache (I thought I did before open the topic) completely and added the $this->addStyle('typesetting-stylesheet', 'styles/typesetting.less', array( 'contexts' => 'backend' )); line and it worked.

One thing I still don’t know is how to reload the page after a modal operation (I need it to re check conditions passed to the page, to show/hide a set of buttons). I’m re using a JS file just for the sake of binding the modal for it to close on Cancel. Is there an easy way of binding a JS method of reload? I’m looking in the code for that but the modals are mostly AJAX ones, so no page reload.

Thanks in advance, Jose

4

Hi @Jose_Ares,

Inter-widget communication is a weak point of the Javascript framework you’re working with (and we’re gradually moving towards a new vue.js-based toolset which is better in this regard). In the meantime, though, you can force a reload by issuing a reload or redirect event. You can either use redirectUrlJson or $json->setEvent('containerReloadRequested', ...); to accomplish this, depending on the structure of the page your modal is placed within.

Regards,
Alec Smecher
Public Knowledge Project Team