Delete/Edit Record Actions Do Not Work in a Modal

Wappler General Bugs
1

OS info

  • Operating System : Mac OSX 17.5.0
  • Wappler Version : 1.0.2

Problem description

When I set up deletes for records I always set up a modal with a detail region containing some dynamic data from the recordset being deleted and confirmation message before confirming the delete and running the delete action.

It all works great until I bind the delete action to the form and then the dynamic data is lost. I can reproduce this on every occasion.

As soon as I remove the action file the data shows up again.

Edit: Exact same thing happens with Edit Actions in a modal.

2

Brad, I use modals all the time, my clients love them. I set the list up with data-view and have the data-detail inside the form. This gives me the record ID as per the following

<input name="MailingID" type="hidden" id="mailingiddelete" dmx-bind:value="frmmailingdelete.detmailingdelete.data.MailingID">

This is the whole code where I have used the data-detail even outside of the form

       <!-- Modal Mailing Delete -->
        <div class="modal fade" id="mdlMailingDelete" tabindex="-1" role="dialog" aria-labelledby="mdlMailingDeleteLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="mdlMailingDeleteLabel">Delete: {{frmmailingdelete.detmailingdelete.data.MailingName}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
               </div>
              <div class="modal-body">
                <p>Are you sure that you want to delete the following Mailing?</p>
                <h4 class="well well-sm">{{frmmailingdelete.detmailingdelete.data.MailingSubject}} - <small>dated: {{frmmailingdelete.detmailingdelete.data.CreatedDateTime.formatDate("dd/MM/yyyy")}}</small></h4>
                <div class="alert alert-danger" role="alert"><i class="fa fa-exclamation-triangle fa-2x" aria-hidden="true"></i> This action cannot be undone!</div>
              </div>
              <div class="modal-footer">
                <form action="../dmxConnect/api/Admin/mailing/mailingdelete.php" method="post" id="frmmailingdelete" is="dmx-serverconnect-form" dmx-on:success="scmailinglist.load({})" onsuccess="$('#mdlMailingDelete').modal('hide')">
                  <dmx-data-detail id="detmailingdelete" dmx-bind:data="scmailinglist.data.qryMailingList" key="MailingID"></dmx-data-detail>
                  <input name="MailingID" type="hidden" id="mailingiddelete" dmx-bind:value="frmmailingdelete.detmailingdelete.data.MailingID">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                  <button type="submit" class="btn btn-danger">Delete Mailing</button>
                </form>
              </div>
            </div>
          </div>
        </div>

I hope this helps.

1 Like
3

That’s exactly as I do except I put the form inside the data detail instead of the data detail inside the form. I’ll try your way and see what happens. Thanks, @ben

4 
<div class="modal-body">
        <dmx-data-detail id="data_detailDeleteEvent" dmx-bind:data="articleList.data.query1.data" key="idEvents">
          <form id="formDeleteEvent" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/Events/Forms/deleteEvent.php">
            <div class="form-group">
              <input type="hidden" class="form-control" id="hiddenDeleteEventID" name="hiddenDeleteEventID" aria-describedby="input1_help" dmx-bind:value="data.idEvents">
            </div>
            <button class="btn btn-danger btn-sm btn-block" type="submit">Delete {{data.headlineEvents}} on {{data.eventDateEvents.formatDate("MMMM dd, yyyy")}}</button>
          </form>
        </dmx-data-detail>
      </div>

So why doesn’t this work? If I remove the form handler the dynamic data shows up again.

5

This is what George explained in a previous discussion
Ben - this is because of the variable paths. All the App Connect data components - that have an ID - get a data path that follows their nesting in HTML.

1 Like
6

This means that, if you give the div.modal-body an ID, your code should work.

7

No luck. I can't see why just adding a handler'Form action to the modal prevents the data from displaying.

8

I do not quite understand what the issue is brad - what handler are you adding? Which part of the code makes your form stop working exactly?

9

Brad how did you build the form in the modal? Did you start with blank modal and inserted all the form and components one by one from scratch there or did you copy the form from somewhere?

10

I have a modal that has a detail region containing a form. It all works fine and shows the data as it should. But as soon as I add the edit or delete action to the form, the data no longer shows up.

Modal without the form action …

33%20AM
Screen Shot 2018-06-13 at 10.43.33 AM.png1068×472 14.1 KB

Add the form action …

28%20AM
Screen Shot 2018-06-13 at 10.42.28 AM.png1060×462 10.8 KB

11

Always one by one from scratch ....

12

I’m at my wits end. It’s the same as I have been doing in DW all along. In Wappler I can replicate this behaviour 100% of the time on two different projects.

13

Hi Brad,
I am going to test your case and will let you know.

14

Hi Brad,

I checked your HTML and the expressions that are used and found the problem. The form and detail component both have a data property, the expressions look up the data and find the data property from the form first. To get the data property from the detail component just prefix it with the component id. The data picker is currently not smart enough to detect these edge cases, we do our best to improve this.

<div class="modal-body">
  <dmx-data-detail id="data_detailDeleteEvent" dmx-bind:data="articleList.data.query1.data" key="idEvents">
    <form id="formDeleteEvent" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/Events/Forms/deleteEvent.php">
      <div class="form-group">
        <input type="hidden" class="form-control" id="hiddenDeleteEventID" name="hiddenDeleteEventID" aria-describedby="input1_help" dmx-bind:value="data_detailDeleteEvent.data.idEvents">
      </div>
      <button class="btn btn-danger btn-sm btn-block" type="submit">Delete {{data_detailDeleteEvent.data.headlineEvents}} on {{data_detailDeleteEvent.data.eventDateEvents.formatDate("MMMM dd, yyyy")}}</button>
    </form>
  </dmx-data-detail>
</div>
15

Thanks Patrick, I will give that a try.

16

Actually in the latest 1.0.3 update - the picker will now also handle those nested data… properties and make a full path so it should always work

1 Like
17

Thanks George, just installed 1.0.3 so going to give it some good further testing today. Some nice things in today’s update.

18

This is still a problem in 1.0.3 but Patrick's suggested fix seems to work for now.

19

Hey Brad,
Did you try rebuild the detail/form or did you try with the same code from yesterday?

20

Just used the same form. I’ll try with a new detail region and form.