Add a close modal/popup option with the submit rules

[Peter]

We get more and more possibilities with popup pages. and this is great.
As a consequence I would propose to add a new option at the submit rules:

• close popup (modal)
  
  

The case: I use pop-up forms to add new data to the datatable.
If you are on the overview page of this table and then add a record you can not chose to close the popup after submit. If you are on the page where you want to land after submit you can also not use the “redirect to an existing page”. This option is not working and the popup just empties itself for a new record.

[moe]

This is a very interesting idea. I’m sure we can use some basic JS for now for this…

@Chem?

[Chem]

Hey @Peter,

Are you discussing the “Allow New Record Popup Page” setting for a Table Component?

If so, the default is that the popup will close after submission, as shown in the GIF below.

Please let me know if you are discussing something else.

[Peter]

@Chem No that is not the case. This button inside the component is UX-wise for me not a very good solution.

So my trick:

1. I have added a new page: called add a new applicant (a recruitment app)
2. This is a menu option, so within the menu you click on this option and you get a pop-up form to add a new applicant
3. It happens to be that the start page is the page with a table full of applicants.
4. But because this is part of a workflow, the only buttons I have in this table are to move an applicant to the next phase.
5. So the pop-up form is filled with data and with the submit rule of this form, that data is being saved. The popup doesn’t get closed.
6. I have the option to move to the same page I am on, but that doesn’t work. Because it is already on this page, the modal doesn’t get closed???
7. I could have been on another page as well. This option to add an applicant should be available always, wherever you are in the application. So the best thing is not to move to a defined page, but just close the modal.
8. This doesn’t happen, because the option is not there, to just have the modal closed. Any of the other options does also not close the modal. So you fill in the data, save the data, the form gets emptied and you have to click the cross to close the modal.
9. so the best option would be if you had the possibility to just close the modal as part of the submit rules.

The current options are:

1. show a confirmation message
2. redirect to an existing page
3. redirect to another website URL (this one I did not try out, because I want to stay on the same website)

So
option 1) No closing of the modal, just the message and form gets emptied,
option 2) no closing of the modal, form gets emptied
option 3) I did not try this.

In this case I would not want to redirect to an existing page, as I just would want to stay on the same page you are, by closing the modal form.

But I see more use cases: for better UX, have a better visible button, not the one part of the component. The current one works, but it is not nice and not very visible.
I can imagine using a link button for that, but alas, the link button has no pop-up option. But if that would be made, then I still had the problem with closing the modal form.

I tried to be as clear as possible, but it is not my strong point. So if you have any additional questions, kindly let me know.

[Peter]

@Moe @Chem @tim.young
I never got a reply on this.
My question: add a close modal action with the submit roles.
Update?

[Peter]

@Moe @Chem @tim.young
Any update on this feature request. It should not be that difficult and it is very much needed, at least by me

[Chem]

Hey Peter, I think you can use the following JavaScript for now. But keep in mind that if you have validation rules that do not pass, meaning the form isn’t submitted, the modal will close regardless.

Paste the following into the JavaScript section of the page where the form is located.

TB.render('component_ID', function(data) {
    data.ele.find('.af-form-submit').click(function(){
       $('.model-close').click(); 
    });
});

Just remember to change ‘component_ID’ to the component ID of the form you are submitting.

[Peter]

@Chem thanks but that is no solution for me, validation rules must run usually.

So my question remains:

1. is it on the to-do list
2. is it planned on the roadmap
3. is there a timeline for this to become a native solution within Tadabase.

Closing a modal after submit is very normal behaviour normally, so it should be possible within Tadabase as well.

[Chem]

@Peter, I’m going to have a chat with the team about this and report back! I agree, this is a simple thing that should be a native option within Tadabase.

[Marty]

@Peter I’ve come up with a work around for this, although my use case is slightly different.

You can set your form to redirect to an existing page, and use the Tadabase action “TB.registerEvent” https://docs.tadabase.io/categories/manual/article/javascript-callbacks-and-actions
to catch this event and close the modal. As this event is only fired after the form submission is complete it allows the validation rules to run. My sample code below:

TB.registerEvent('before-page-change', '4AXQvaNLYp', function() { 
    console.log('Form Submitted, closing modal');
    $('.model-close').click();
});

In my case, I’m using an iframe to display shared forms. You need a function on your modal page that you can target from the page inside the iframe:

// Add to the page that holds your form
TB.registerEvent('before-page-change', '4AXQvaNLYp', function() { 
    console.log('Form Submitted, closing modal');
    window.parent.closeModal();
});

// Add to your modal page that hosts the iframe
window.closeModal = function(){
    $('.model-close').click();
};

[Rez]

Hey Marty, would this work with an Action Button? I’d like to close a pop-up when a user clicks on an “Action Link”.

[Marty]

Yes, you would just assign a class for your action button, and create an event listener…something like this:

TB.render('component_XX', function(data) {
    $('.my-action-button').click( function() {
	    // close modal
	    $('.model-close').click();
    });
});

Be sure to update the code with your component number and custom class you assign to the button.

[Rez]

Awesome, thanks a lot!

[Peter]

@Chem how did this chat go? I still would love to see this as a native and simple option for handling with pop-up forms.

[Peter]

Any news. Will this be part of the new builder you are working on? @Chem @moe @tim.young

[christopher93]

Yes, @Peter, you are right. There is no option to check if it’s submitted.
I think, @moe, you can just add an events like below so users can capture data on every event. This is just an idea; you know better than me.

TB.render("COMPONENT_XX_on_form_submit", function(data) {

});

TB.render("COMPONENT_XX_on_form_submit_success", function(data) {

});

[abridges]

Ran into this today, it would be great to have access to these events

[SafetyUniversity]

This may help…anyone that can confirm would be great.

TB.render('component_ID', function(data) {
    // Bind the form submit event
    data.ele.find('form').on('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission
        var form = $(this);

        // Submit the form using AJAX
        $.ajax({
            type: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize(),
            success: function(response) {
                // Check if the response indicates success
                if (response.success) {
                    // Close the modal if the form was successfully submitted
                    $('#yourModalID').modal('hide');
                } else {
                    // Handle errors (e.g., display error messages)
                    alert('Form submission failed. Please try again.');
                }
            },
            error: function() {
                // Handle AJAX errors
                alert('An error occurred. Please try again.');
            }
        });
    });
});