Form/Widget not working in partial view

I have a widget/form in a partial view and on submit it just takes the user home/goes to base url.

No validation is done etc.

I have set custom widget id so it doesn’t clash with other widgets/forms.

The partial is loaded via ajax not sure if that effects things.

What does it mean that "not working" ?

"I have a widget/form in a partial view and on submit it just takes the user home/goes to base url."

No validation for example without adding an input an error message should appear underneath as it usually does however just not when rendering in a partial/within the ajax loaded modal.

Post code so we can check.

In my partial view I have the following


<?= NewsletterWidget::widget(['id' => 'modal_newsletter']) ?>

In my main index view I load the partial using the following javascript


$(document).ready(function() {

    $('a.btnsolid-sm').click(function() {

       document.getElementById('product-loading').style.display = 'block';

        var Id = jQuery(this).attr('id');

        $.ajax({

            type: 'POST',

            data: {

                modal_id: Id,

            },

            url : 'http://localhost:8888/product/viewmodal?id='+Id,

            success: function(response) {

                if(response) {

                    document.getElementById('product-loading').style.display = 'none';

                    $('.modal_product_wrapper').html(response);

                    $('#modal_'+Id).modal('show');

                    $(document).on('hidden.bs.modal', function (event) {

                        $(this).remove();

                    });

                } else {

                    alert('Error');

                }

            }

        });


    });


});

The widget code works fine when used within normal view/layout files so I things it a problem to with the fact its used within a partial view.

Using Firebug (or other developer tool), have you javascript errors when widget is in partial view?

No javascript errors

Hi,

Form validation, date pickers etc… won’t work if we populate the form using ajax. I think you can use pjax to solve this.

Use




$(document).on('click', 'a.btnsolid-sm', function() {

});



instead




$('a.btnsolid-sm').click(function() {

});