How to display Saving when click the Create button if not finish?

bhoang

25-10-2018

Hi,

When I create a property page, input the content and click the Create button. The aem save very slow, the user don't understand it saving. So they click again on the Create button. After that the aem save two time and the content is duplicate (it create two page content). I want to display the gif file (example Saving or Creating) it will showing when click on the Create button for the user know and waiting for create finish.

How to do that?

Thanks & Best regards,

BienHV

Accepted Solutions (1)

Accepted Solutions (1)

Arun_Patidar

MVP

03-11-2018

Below code should work:

Clientlib category - granite.ui.coral.foundation

/* JS Code  to disable create button*/

(function(document, $) {

  $( document ).ready(function() {

        console.log( "ready!" );

        var formSelector = "form.cq-siteadmin-admin-createpage";

        var selector = "form.cq-siteadmin-admin-createpage .foundation-layout-wizard2-header .coral-Panel button[type=submit]";

        var selectorBtn = "coral-dialog.coral-Dialog.coral-Dialog--success.is-open>div.coral-Dialog-wrapper>coral-dialog-footer>button";

       

        $(formSelector).on('submit', function() {

            $(selector).attr("disabled", "disabled");

            console.log("button disabled");

        });

        $("body").on('click', selectorBtn, function() {

            $(selector).removeAttr("disabled");

            console.log("button enabled");

        });

    });

})(document, Granite.$);

Answers (4)

Answers (4)

bhoang

30-10-2018

Last week I tried disabled Create button when clicked and enabled it again as soon as page created. However, it work fine with save button, but it not right for Create button.

Arun_Patidar

MVP

30-10-2018

Hi,

You can disabled Create button once clicked and enable it again as soon as page created and OOTB popup displayed.

in popup there are two buttons, open and done. on click of any button you can enabled create button again. Thats how you can prevent duplicate page creation.