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, 2017 at 9:15
  • could you paste code inside success function setTimeout(function () { close.closeModal(); }, 3000) Dec 26, 2017 at 9:18
  • Am I need to place inside success, after the else part ??
    – Jaisa
    Dec 26, 2017 at 9:20
  • see the updated post @Vinz
    – Jaisa
    Dec 26, 2017 at 9:20
  • yes inside success function after else part Dec 26, 2017 at 9:22

3 Answers 3

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, 2017 at 4:58
  • @Kumar M , You saved my day. :) it works.Nice explanation, U appreciate it. Nov 5, 2020 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, 2017 at 10:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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