3

I have created Popup modal form, the form is successfully submitted and showing response, but after showing response I need to close the popup modal but failed to close the popuup modal

js file

 define([
    "jquery",
    "jquery/ui",
    "Magento_Ui/js/modal/modal"

],
        function ($) {
            "use strict";
            // Review form 
            var xxx = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: false,
                title: "aaa",
                modalClass: "popup-center",
                clickableOverlay: true,

            };
           var abc = $('#form-div-id').modal(xxx);
            $(".link").click(function () {
                abc.modal("openModal");
            });

            return function (config) {
                $('#review-form').on("click", "#review-submit", function () {
                    var form_data = $("#review-form").serialize();
                    var reviewurl = config.url;
                    $.ajax({
                        url: reviewurl,
                        type: 'POST',
                        // Pass the submitted form data to Controller
                        data: form_data,
                        success: function (response) {

                            var returnedData = JSON.parse(response);
                            if (returnedData.status === 'success')
                                $("#success").html(returnedData.messages);
                            else
                                $("#error").html(returnedData.messages);


                        },
                        error: function (response) {
                            var returnedData = JSON.parse(response);
                            $("#error").html(returnedData.messages);
                        }

                    });
                    var close = this;
                    setTimeout(function () {
                        close.closeModal();
                    }, 3000);
                   return false;

                });
            };

        });
8
  • Have you got an error in your console ? How do you open the modal ? – Vinz Dec 26 '17 at 9:15
  • could you paste code inside success function setTimeout(function () { close.closeModal(); }, 3000) – Rakesh Jesadiya Dec 26 '17 at 9:18
  • Am I need to place inside success, after the else part ?? – Jaisa Dec 26 '17 at 9:20
  • see the updated post @Vinz – Jaisa Dec 26 '17 at 9:20
  • yes inside success function after else part – Rakesh Jesadiya Dec 26 '17 at 9:22
3

In your code you have used this:

var close = this;

Where 'this' will represent $('#review-form') object. While you have initiated modal for $('#form-div-id'). So This is the reason that's why modal is not closing, closeModal method belongs to modal($('#form-div-id')) object not form object.

Please use model like this:

  1. Initialize model like

define([ "jquery", "Magento_Ui/js/modal/modal", "jquery/ui"],

function ($,modal) {

  1. Assign to Dom elements like this:

var abc = modal(xxx, $('#form-div-id'));

Where xxx is modal options.

  1. And call modal open and close like this:

abc.openModal();

And closing

abc.closeModal();

Please note:

close modal should be called before return of function please use alert method to put before close modal and debug is alert is coming or not while closing.

2
  • I have tried as you said but popup is failed to open – Jaisa Dec 27 '17 at 4:58
  • @Kumar M , You saved my day. :) it works.Nice explanation, U appreciate it. – Sameer Bhayani Nov 5 '20 at 6:05
1

just add condition in success section like below:

 define([
    "jquery",
    "jquery/ui",
    "Magento_Ui/js/modal/modal"

],
        function ($) {
            "use strict";
            // Review form 
            var xxx = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: false,
                title: "aaa",
                modalClass: "popup-center",
                clickableOverlay: true,

            };
           var abc = $('#form-div-id').modal(xxx);
            $(".link").click(function () {
                abc.modal("openModal");
            });

            return function (config) {
                $('#review-form').on("click", "#review-submit", function () {
                    var form_data = $("#review-form").serialize();
                    var reviewurl = config.url;
                    $.ajax({
                        url: reviewurl,
                        type: 'POST',
                        // Pass the submitted form data to Controller
                        data: form_data,
                        success: function (response) {

                            var returnedData = JSON.parse(response);
                            if (returnedData.status === 'success')
                                $("#success").html(returnedData.messages);
                              //to close form
                              $('#review-form').modal('closeModal');
                            else
                                $("#error").html(returnedData.messages);


                        },
                        error: function (response) {
                            var returnedData = JSON.parse(response);
                            $("#error").html(returnedData.messages);
                        }

                    });
                    var close = this;
                    setTimeout(function () {
                        close.closeModal();
                    }, 3000);
                   return false;

                });
            };

        });

Hope, this will help you some extend.

Thanks!

0
var abc = $('#form-div-id').modal(productreview);
            $(".link").click(function () {
                abc.modal("openModal");
            });
    return function (config) {
        $('#review-form').on("click", "#review-submit", function () {
            var form_data = $("#review-form").serialize();
            var reviewurl = config.url;
            $.ajax({
                url: reviewurl,
                type: 'POST',
                // Pass the submitted form data to Controller
                data: form_data,
                success: function (response) {

                    var returnedData = JSON.parse(response);
                    if (returnedData.status === 'success')
                        $("#success").html(returnedData.messages);
                    else
                        $("#error").html(returnedData.messages);
                },
                error: function (response) {
                    var returnedData = JSON.parse(response);
                    $("#error").html(returnedData.messages);
                }
            });
            //But failed to close
            var close = this;
            setTimeout(function () {
                close.closeModal();
            }, 3000);
            return false;
        });

    };

You have set closemodel() function after function return false so your call is not executing.

You need to set return false at last in your js.

1
  • Thank you for the response, I have done as you said , but popup failed to close, See the updated post – Jaisa Dec 26 '17 at 10:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.