Confirm DELETE by typing the name of something enable if they match

[StevenM]

I am trying to work out how you match what is typed in a text field with a record.

• A user chooses to delete a record
• modal comes up (data detail method)
• in the modal it has a text field and asks they to type the name of the record in the modal title to confirm delete
• Once the text matches the name the delete button is enabled

Question: how do you match the text with the repeat row record.

For example:

The button is disabled while the text field value does not match the repeat row record name:

(delete_plan_id.confirm_delete.value != pl_name)

This doesn’t work and assume I need to make the comparison dynamic but don’t know how to do that on front end?

[Teodor]

Just tested this and it works fine. How did you enter this expression -was it using the data picker?
Is the input inside the data detail or outside it?
Maybe paste the modal code here so we can see how is it set up - the expression depends on this.

[StevenM]

Thanks @Teodor

This is my code:

    <div class="modal" id="delete_plan" is="dmx-bs4-modal" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">Plan id: # {{id}} Name: {{pl_name}}</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">×</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form id="delete_plan_id" method="post" is="dmx-serverconnect-form" action="../api/Plans/delete_plan"><input id="plan_id_delete" name="plan_id_delete" type="hidden" class="form-control"
                                                                dmx-bind:value="id">
                                                        </form>


                                                        <p>By deleting this plan you will also delete all topics attached to the plan and all attached topic content, images and polls.</p>
                                                        <h6>Type the Name of the Plan to confirm delete:</h6>
                                                        <input id="confirm_delete" name="confirm_delete" type="text" class="form-control">
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                        <button type="button" class="btn btn-danger" dmx-bind:disabled="(delete_plan_id.confirm_delete.value != pl_name)" id="delete_plan_name">DELETE</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

[Teodor]

So, just to confirm - is your modal inside a data detail region and not vice versa?

[StevenM]

Yes iis inside this:

<tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="get_plans.data.get_plans" id="plan_details">

[Teodor]

That’s a repeat - but where is the data detail exactly? I don’t see it anywhere in your code?

[StevenM]

AH

here:

  <dmx-data-detail id="data_detail_topics" dmx-bind:data="get_topics.data.get_topics" key="get_topics.data.get_topics[0].id"></dmx-data-detail>

[Teodor]

But is the modal inside it?

[StevenM]

no the data detail is at the top of the page?

[StevenM]

Sorry wrong one:

   <dmx-data-detail id="data_detail_plans" dmx-bind:data="get_plans.data.get_plans" key="get_plans.data.get_plans[0].id">

    </dmx-data-detail>

[Teodor]

Why are you using it like that? How do you send the record details in the modal then?
Your data detail region should be wrapping the data you are displaying … either put the modal isnide or put the data detail inside the modal, like:

[Teodor]

The following tutorial explains how to use data detail in exactly cases like yours:

Displaying Record Details with the Data Detail Component

[StevenM]

ah ok,

I do this with all the components.

So I should be creating the data detail and then adding the modal inside?

The data detail works fine, always done it this way.

So what you are saying is I should be making the column which contains the modal a data detail?

Like this?

[Teodor]

Please check the tutorial i linked to.
It shows how to use data detail with modals.

[StevenM]

Thanks @Teodor

will do, I missed this one.

Thanks!

[StevenM]

Thanks @Teodor it fixed the field value check!

[sid]

I don’t think there is any need for placing the components inside the data detail component.
No matter where it is placed, the binding is always the complete path - datadetail1.data.field1
If the binding when inside data detail would be something like - field1 - it would make sense.

The dynamic pickers also work just fine when the data detail is placed separately on the page from where it is being used.

Am I wrong here or the tutorial is outdated?

[StevenM]

I think it’s fine as you stated, when used in general sense, but it appears placing in the modal allows for a real-time match as in my use case. It must make it dynamic when inside the modal. I have other data detail at the top of the page with a use case to just shows data selection and works just fine.

[sid]

I am not sure I understand you correctly here. But from what I see, the binding you had placed earlier was just incomplete. Wrapping the element inside data detail does not make any difference.
Its the binding itself that was incorrect.

[StevenM]

Not sure I just do what @Teodor tells me to do