Okay
  Public Ticket #2726142
toggling modal window loses event listeners
Closed

Comments

  • Denis started the conversation

    Hi,

    I've added amelia booking into a bootstrap 4.6 modal, which loads fine and a customer can complete bookings. However if you close the modal before completing a booking and open it again, the buttons in amelia don't work anymore. So amelia in a modal works fine unless a customer closes the modal and opens it again.

    Looking at the inspector, it seems that when the modal gets set to display:none, the buttons in amelia lose their event listeners and will not regain them when modal is visible again.

    Is there a way to reset amelia on modal close? I've tried, on modal closure, to remove the elements that amelia inserts in place of the shortcode <booking> tag and adding the original shortcode booking tag back in, but that doesn't work. Amelia does replace the tag again on the second run and I can see the elements in the dom, but nothing gets displayed.

    So I'd either need to know how to destroy the instance of the amelia form or how to manually load a new one.

    Thanks

    Denis

  • [deleted] replied

    Hi Denis,

    thank you for reaching out to us; I am sorry to hear that this is not working.

    I apologize for the belated response; as we don't work on weekends, and I have forwarded this to the developers for a consultation, as I could not replicate the issue here.

    Would you kindly provide me with temporary WP credentials, and the page where we can replicate this, and I will provide a solution.

    We just need to be able to see it "from your point" in order to find the exact reason why it won't work on the second run.

    Thank you so much!

  • Denis replied

    Hi Ivana,

    Unfortunately the WP installation is on an internal network, which doesn't allow external access.

    You should be able to test it by adding bootstrap 4.6 and then do:

    <button id="booking-button-22" type="button" class="btn btn-primary" data-coupon-id="22" data-toggle="modal" data-target="#booking-modal-22">Schedule</button>
    <div id="booking-modal-22" class="modal fade modal-centered">   
    <div class="modal-dialog modal-dialog-centered">      
    <div class="modal-content">         
    <?php echo do_shortcode( "[ameliabooking trigger=booking-button-22 service=1 employee=11]" ); ?>
    </div>
    </div>
    </div>

    Then press button, modal opens, choose day/time and click continue. Then click outside of modal to close it. Then click button again and try any of the amelia buttons. They won't be clickable.

    Thanks

    Denis


  • [deleted] replied

    Hi Denis, 

    thank you for the kind reply!

    At the moment, the most efficient way to go would be to ask you to "clone" your website.

    I'll ask you to install the Duplicator plugin. It will generate a couple of files which you can send me (along with the log-in credentials), and then I can create an exact copy of your website, see what the issue is and try to resolve it.

    Please note that the files will be too large to attach to the ticket, so you can upload them via wetransfer.com and just send me the link.

  •   Denis replied privately
  • [deleted] replied

    Hi Denis,

    thank you for the information provided.

    However, again, we would need the duplicator in order to be certain where the issue is and resolve it.

    Please kindly let me know.

  •   Denis replied privately
  • [deleted] replied

    Hi Denis!

    thank you for the kind reply; I apologize for the later response, as we don't work on weekends.

    Thank you for the credentials, but we need the duplicated website on our local environment in order to debug the plugin. Debugging can't be achieved with just wp-admin user. Sometimes FTP access can work, but it's much faster and safer if we can do it locally. We are not able to pin-point any issues just with wp-admin credentials.

  •   Denis replied privately
  • [deleted] replied

    It has been forwarded, Denis, thank you very much.

    I will contact back with the solution; in the meantime, I wish you a great day!

  • Denis replied

    Hi Ivana,

    I wanted to check if there is any update on a solution for this? If not, I'll need to implement something like creating an endpoint or separate page for the amelia scheduler and then loading it through an iframe into a popup. If I can, I'd like to avoid that though.

    Thanks

    Denis

  • [deleted] replied

    Hi Denis,

    I apologize it's taking so long - as colleague and I could not find a solution, I reached out to a developer; they have more expertise and will be able to spot what we could not. I will be online until he contacts me back so that I can let you know immediately.

    Pop up is a good temporary solution, but honestly, I'd rather we have this fixed fully and leave a pop up as an optional solution that you would go to out of aesthetic reasons not out of need.