0

I have created popup modal using ajax and it works successfully. But once the form submitted, it saves in DB. But if I click again to perform action, It simply shows prefilled message instead of new form in popup. How to resolve it??

history.phtml

<div>
    <a href="#" id="click" class="click-me" data-id="<?= $_order->getEntityId(); ?>">Cancel</a>
</div>
<div id="popup-modal" style="display:none;">
    <form action="<?php echo $block->getBaseUrl() . 'sales/index/index'; ?> " method="post" id="form-validate"
          enctype="multipart/form-data" autocomplete="off" data-mage-init='{"validation":{}}'
          data-hasrequired="<?php /* @escapeNotVerified */
          echo __('* Required Fields') ?>">
        <div id="result"></div>
        <div>
            <label>Reason:</label>
            <textarea id="reason" rows="4" cols="6" name="reason"></textarea>
        </div>
    </form>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function ($,
                  modal) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Reason for Cancelled the item',
                buttons: [{
                    text: $.mage.__('submit'),
                    class: '',
                    click: function () {
                        var form_data = jQuery("#reason").val();

                        var post_id = $('#click').data('id');

                        jQuery.ajax({
                            url: "<?php echo $block->getBaseUrl() . 'oxsales/index/index'; ?>",
                            type: 'POST',
                            data: {'id': post_id, 'form_data': form_data},

                            success: function (response) {

                                $("#result").html("Order cancelled successfully");

                            },
                            error: function (response) {
                                $("#result").html("Error");
                            }
                        });

                        this.closeModal();

                    }
                }]
            };

            var popup = modal(options, $('#popup-modal'));
            $(".click-me").on('click', function () {
                $('#reason').empty();
                $("#popup-modal").modal("openModal");
            });

        }
    );
</script>

2 Answers 2

0

Remove this.closeModal(); from submit button action in your current code and add another button which will close the modal.

buttons: [
    {
      //here is your submit button, remove this.closeModal();
    },
    {
      text: $.mage.__('close'),                                                        
      class: '',
      click: function () {
        this.closeModal();
      }
    }
}]
0

You can simply use $('#reason').val(""); in your click .click-me event like below:

$(".click-me").on('click', function () {
     $('#reason').valu("");
     $("#popup-modal").modal("openModal");
});

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.