0

There is a form in the popup window that sends data to Ajax. After a successful form, a message about successful submission with the .form-message--success class appears below. I would like that when this class appears in 5 seconds, the window close button with the id #close_pop a is clicked.

Is this possible when a class is added dynamically to the DOM?

I tried something like this, but it doesn't work(

jQuery(document).ready(function($) {
    $('.jet-form-message--success').on(function(){
        setTimeout(function(){
            $('#close_pop a').click();
        }, 2000);
    });
});
Sergey Pervushin
  • 363
  • 2
  • 11
  • This checks the DOM when the document is "ready". You need to attach an eventListener to the DOM and check if this element ever appears. But this is not the most efficient way to do it (probably the least efficient). You should move the logic after the trigger (after the api request) – Tasos Oct 20 '20 at 13:56
  • 1
    Not, not possible. Does the ajax call, modal fire any events when it loads? – epascarello Oct 20 '20 at 13:56
  • Do you have access to the code that performs the Ajax request? Can you attach it to your question? – Tasos Oct 20 '20 at 13:57
  • @epascarello Honestly, I don't know. Didn't check it. – Sergey Pervushin Oct 20 '20 at 14:29
  • @TasosBu This is a form from jetengine forms. I don't know how to pass this code here( – Sergey Pervushin Oct 20 '20 at 14:30
  • 1
    Wrong link, does this answer your question? https://stackoverflow.com/questions/2844565/is-there-a-javascript-jquery-dom-change-listener – freedomn-m Oct 20 '20 at 14:32

1 Answers1

0
<script>
$(function() {
    $("#user-form").on("submit", function(event) {
        event.preventDefault();
        $.ajax({
            url: "form.php",
            method: "POST",
            data: $( this ).serialize(),
            success: function(data) {
                alert('form send success');

                setTimeout(function(){
                    $('#close_pop a').click();
                }, 2000);
           },
         error: function(xr) {
            alert("error "+xhr.status+' '+xhr.statusText);
        }
        });
    });
});

</script>
sidhik
  • 1
  • 1
  • The tricky part here seems to be, that there is no access to the ajax code itself and that you would need an outside observer to detect that the form was successfuly sent. – Lapskaus Oct 20 '20 at 14:37