Uncaught TypeError: this.dialogTarget is null (v1.x)

[nrichardson1951]

Hello,

I've just setup a Rails 7 environment using @rolemodel/turbo-confirm, and the confirmation modal doesn't present. I did test that before installing turbo-confirm, that the default confirm modal does work with turbo_confirm. I'm getting the following error in Firefox, Web developer debugger: (Here's first 4 lines of output from the debugger)

                              Uncaught TypeError: this.dialogTarget is null
                                  #r ConfirmationController.js:73
                                  perform ConfirmationController.js:46
                                  init index.js:13

Here's my configuration: Rails 7.1.2, turbo-rails (1.5.0)

importmap.rb
pin "@rolemodel/turbo-confirm", to: "https://ga.jspm.io/npm:@rolemodel/[email protected]/src/index.js"

javascript/application..js

                                import { Turbo } from "@hotwired/turbo-rails"
                                
                                import RoleModelConfirm from "@rolemodel/turbo-confirm"
                                Turbo.setConfirmMethod(RoleModelConfirm.confirm)
                                
                                RoleModelConfirm.init()

html.erb using link_to:

<%= link_to "Log Out", logout_path, class: "dropdown-item",
data: {
turbo_method: :delete,
turbo_confirm: "Are you Sure?",
confirm_details: tag.h2('This actually works')
}
%>

Thanks in advance for any help.

[Braden-077]

@nrichardson1951 Thank you for your question! Do you have any elements on your page with the data attribute id? The way we have things setup internally, we have something like this:

  <div class="modal-wrapper flex items-center justify-center modal-wrapper--active" id="confirm">
    <div class="modal-wrapper__backdrop confirm-cancel"></div>
    <div class="modal text-center margin-md card-padded">
      <h3 id="confirm-title">Are you sure?</h3>
      <div class="margin-bottom-lg" id="confirm-body">
        <p>This action cannot be undone.</p>
      </div>
      <div class="flex justify-center items-center gap-sm">
        <button class="confirm-cancel btn btn-primary btn--outline" id="confirm-cancel">Cancel</button>
        <button class="btn-delete" id="confirm-accept">Yes, I'm Sure</button></div></div></div>

[Braden-077]

I should note, this is the example that is in the README.md.

[OutlawAndy]

Thanks @Braden-077 , this is correct. This error indicates that there is not a matching element for the dialog on the page. By default, it should have an id of "confirm".

I'll put "better error messages" on the road map.

[nrichardson1951]

Thanks for the quick response. I placed your example dialogue on the page and now don’t get the “Uncaught Type error”, so, it’s finding the element id, but the dialogue box doesn’t show. I noticed a comment in the README, that the dialogue isn’t visible without a ‘modal—active’ class. I tried adding ‘modal—active’ to the dialogue template, but still no joy. Where does that class definition need to be defined or what else am I missing? Thanks for your patience. From: Braden Rich ***@***.***> Sent: Wednesday, December 6, 2023 5:09 PM To: RoleModel/turbo-confirm ***@***.***> Cc: nrichardson1951 ***@***.***>; Mention ***@***.***> Subject: Re: [RoleModel/turbo-confirm] Rails 7 -- RoleModel Turbo-Confirm error --"Uncaught TypeError: this.dialogTarget is null" (Discussion #16) @nrichardson1951 <https://github.com/nrichardson1951> Thank you for your question! Do you have any elements on your page with the data attribute id? The way we have things setup internally, we have something like this: <div class="modal-wrapper flex items-center justify-center modal-wrapper--active" id="confirm"> <div class="modal-wrapper__backdrop confirm-cancel"></div> <div class="modal text-center margin-md card-padded"> <h3 id="confirm-title">Are you sure?</h3> <div class="margin-bottom-lg" id="confirm-body"> <p>This action cannot be undone.</p> </div> <div class="flex justify-center items-center gap-sm"> <button class="confirm-cancel btn btn-primary btn--outline" id="confirm-cancel">Cancel</button> <button class="btn-delete" id="confirm-accept">Yes, I'm Sure</button></div></div></div> — Reply to this email directly, view it on GitHub <#16 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUC22O6BTFTA524CVU77ND3YIDUI5AVCNFSM6AAAAABAKBQJ76VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TOOBRHAYTA> . You are receiving this because you were mentioned. <https://github.com/notifications/beacon/AUC22O6PQXO55K4NDRVCQKLYIDUI5A5CNFSM6AAAAABAKBQJ76WGG33NNVSW45C7OR4XAZNRIRUXGY3VONZWS33OINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAO263E.gif> Message ID: ***@***.*** ***@***.***> >

[Braden-077]

That would just be a CSS class defining your visibility and styling for your modal.

[OutlawAndy]

Yes, you'll need to define your own dialog styles, or use a style library like Bootstrap, Bulma, or Optics. They will all provide a modal dialog component of some kind. If you're using a style library with a different active class for their modal component, you can pass that into RoleModelConfirm.init like RoleModelConfirm.init({activeClass: "custom-active-modal-class"})

[nrichardson1951]

Thank you for your update as it helped me to understand what I needed to make it work for a bootstrap modal. Here’s my configuration: 1. application.js RoleModelConfirm.init() 2. Bootstrap modal definition <div class="modal fade" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" id="confirm"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title" id="confirm-title">Are you sure?</h3> <button type="button" class="btn-close confirm-cancel" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" id="confirm-body"> <!-- <p>This action cannot be undone.</p> --> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary confirm-cancel" data-bs-dismiss="modal" id="confirm-cancel">Cancel</button> <button type="button" class="btn btn-primary" id="confirm-accept">Yes, I'm Sure</button> </div> </div> </div> </div> 3. Using link_to <%= link_to 'Log Out', logout_path, class: 'dropdown-item', data: { \ turbo_method: :delete, turbo_confirm: 'Are you Sure?', confirm_button: 'Yes' } %> 4. Update to ConfirmationController.js for showing a bootstrap modal. Note: It looks like there’s a way to pass Javascript to RoleModelConfirm.init() for showConfirmCallback, but I’m not sure how to do it, so I added the following js code in red, in the #showConfirm section, after this.dialogTarget.classList.add(this.#config.activeClass) var bootModal = new bootstrap.Modal(this.dialogTarget, { keyboard: false }); bootModal.show(); Thanks again, From: Andy Cohen ***@***.***> Sent: Monday, December 11, 2023 12:25 PM To: RoleModel/turbo-confirm ***@***.***> Cc: nrichardson1951 ***@***.***>; Mention ***@***.***> Subject: Re: [RoleModel/turbo-confirm] Rails 7 -- RoleModel Turbo-Confirm error --"Uncaught TypeError: this.dialogTarget is null" (Discussion #16) Yes, you'll need to define your own dialog styles, or use a style library like Bootstrap <https://getbootstrap.com/> , Bulma <https://bulma.io/> , or Optics <https://docs.optics.rolemodel.design/> . They will all provide a modal dialog component of some kind. If you're using a style library with a different active class for their modal component, you can pass that into RoleModelConfirm.init like RoleModelConfirm.init({activeClass: "custom-active-modal-class"}) — Reply to this email directly, view it on GitHub <#16 (reply in thread)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUC22O2Q3VFFPXTK7WMK4CTYI46YTAVCNFSM6AAAAABAKBQJ76VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TQMRSGU2TC> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[OutlawAndy]

Hi @nrichardson1951.

I'm glad you managed to get it working. Yes, TurboConfirm does allow an open callback function to be supplied in the initial config object. This is mainly to support the native dialog element, since it requires javascript to open.

However, you could supply your bootstrap show function and TurboConfirm will call it for you at the appropriate time. I'll attach an example below.

In my opinion however, it would be ideal to allow TurboConfirm to handle modal show & hide for you, by just providing the appropriate bootstrap class to TurboConfirm's config object. Assuming Bootstrap's CSS is designed to animate automatically, which I cannot say for certain... See the second example below.

/* Using Bootstrap JS */
const confirmElement = document.getElementById('confirm')
const bootstrapModal = new Bootstrap.Modal(confirmElement, {keyboard: false})

RoleModelConfirm.init({showConfirmCallback: bootstrapModal.show})

You'll want to double check your version of Bootstrap for the correct css class. I did a quick google search and came up with 'modal-open' for Bootstrap v4..

/* Ignoring Bootstrap JS */
RoleModelConfirm.init({activeClass: 'modal-open'})

Hope this helps!

- Andy
RoleModel Software