Modal undefined error while extending JS : Mage Modal popup inside js

[rutulritz]

Hi There,

I tried the above solution for my popup issue as well. It is working fine for separate popup modal elements.

Now, I am implementing Login/Signup popup on click with using require js component like this in phtml file:

<script type="text/x-magento-init">
        {
            "*": {
                "Magento_Customer/js/block-submit-on-send": {
                    "formId": "login-form"
                },
                "#customer-popup-account": {
                "Magento_Customer/js/customer-authentication-popup": {
                    "popupTitle": "<?php /* @escapeNotVerified */ echo '' ?>",
                    "innerWidth": "50%"
                }
            }
            }
        }
    </script>

And the js file created also trying to override already created widget form existing js like as below attaced screenshot:
code-sc

But, I am getting error the "modal is undefined" in browser console. Can you please guide me how can I fix this error.

I am aataching my js file as well to review
customer-authentication-popup.txt

Thanks
Rutul

[vovayatsyuk]

Current breeze version does not expose modal function from modal.js file.

I recommend creating modal using widget notation $(el).widget(options):

this.element.modal(authentication_options);

[rutulritz]

This is working fine @vovayatsyuk thanks,

Now I am getting error here : $(e.target).serializeArray(); with this Uncaught TypeError: $(...).serializeArray is not a function

[vovayatsyuk]

We do not have this function available. Please attach a short code snippet on how you use this method. Eg for ajax send or something else?

[rutulritz]

I am submitting form using AJAX :

Also please let me know if I need to change anything or other functions

_ajaxSubmit: function () {
            var self = this,
                form = $('#login-form'),
                inputElement = form.find('input');

            inputElement.on('keyup', function (e) {
                self.element.find('.messages').html('');
            });

            form.submit(function (e) {
                console.log('target : ', e.target);
                if (form.validation('isValid')) {
                    var submitData = {},
                        formDataArray = $(e.target).serializeArray();
                    formDataArray.forEach(function (entry) {
                        submitData[entry.name] = entry.value;
                    });
                    $('body').loader('show');
                    storage.post(
                        $(e.target).attr('action'),
                        JSON.stringify(submitData)
                    ).done(function (response) {
                        if (response.errors == true) {
                            $('body').loader().loader('hide');
                            self._showFailingMessage(response.message);
                        } else if (response.errors == false) {
                            var locationHref = form.find('input[name="redirect_url"]').val();
                            window.location.href = locationHref;
                        }
                    }).fail(function () {
                        $('body').loader().loader('hide');
                        var message = 'An error occurred, please try again later.';
                        self._showFailingMessage(message);
                    });

                }
                return false;
            });
        },

[vovayatsyuk]

Sorry, but I can't do your job.

1. In the example code you add a listener to the form (Read how to add the listeners using cash: https://github.com/fabiospampinato/cash)
2. Then you make an ajax request to save your form (Read how to make ajax requests in breeze: https://breezefront.com/globals#ajax-requests)

Regarding serializeArray. You don't need it here. Just pass the form to the post method:

$.post(url, {
    data: form
})

However, if for some reason you want to serialize the form - use native FormData functionality: https://gomakethings.com/how-to-serialize-form-data-with-vanilla-js/

[rutulritz]

It was working for me @vovayatsyuk

thanks you so much :)