0

I have a modal containing a drop-down list, on selection / the onchange event I would like the new view to be displayed in a modal. I have used this solution for implementing multiple modal overlays and have tried changing the javascript from onclick to on change but there was no luck

My partial view

@using (Html.BeginForm("GameAssignerTable", "Admin", FormMethod.Post, new {role = "form"}))
{
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title">Select Investigator Group</h3>
    </div>
    <div class="modal-body">
        @Html.DropDownListFor(m => m.SelectedGroupUserId, Model.GroupList, "Select Investigator Group", new { @class = "form-control modal-link3", onchange = "this.form.submit();" })
    </div>
}

My layout page

  <div class="container">
    <div class="row">
        <div id="modal-container3" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content col-sm-8 col-lg-offset-2">
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
        $(document).on('show.bs.modal', '.modal', function() {
            var zIndex = 1040 + (10 * $('.modal:visible').length);
            $(this).css('z-index', zIndex);
            setTimeout(function() {
                $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
            }, 0);
        });

        // Initialize popover
        $(function() {
            $('[data-toggle="popover"]').popover({ html: true });
        });

        // Used for modals
        $(function() {
            // Initialize modal dialog
            // attach modal-container bootstrap attributes to links with .modal-link class.
            // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.

            $('body').on('change', '.modal-link3', function (e) {
                e.preventDefault();
                $(this).attr('data-target', '#modal-container3');
                $(this).attr('data-toggle', 'modal');
            });

            // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
            $('body').on('click', '.modal-close-btn', function() {
                $('#modal-container').modal('hide');
            });
            //clear modal cache, so that new content can be loaded
            $('#modal-container3').on('hidden.bs.modal', function() {
                $(this).removeData('bs.modal');
            });
            $('#CancelModal').on('click', function() {
                return false;
            });
        });

    </script>
Community
  • 1
  • 1
Eitan K
  • 837
  • 1
  • 17
  • 39

1 Answers1

0

I'd recommend pulling the JS out to a handler like the others, and do the following:

$("#@Html.IdFor(m => m.SelectedGroupUserId)").on("change", function(e) { 
    $(this).closest("form").trigger("submit");
});

Note that this submits the form, posting back to the action. That action would then return a view of some sort to show the results. You indicated another modal, but a synchronous postback is going to take you away from your current view.

Brian Mains
  • 50,520
  • 35
  • 148
  • 257
  • This is just another way of submitting my form. How would i go about loading a modal once the page is submitted? – Eitan K Apr 13 '16 at 19:31
  • Once submitted, you could trigger a modal to show but remember, the current page is destroyed (from the client perspective), and when you go to the new page, you have to find a way to trigger it (like by passing a flag through the model to the view, which ends up calling the JavaScript modal("show");) – Brian Mains Apr 13 '16 at 19:55