How to load partial view and main view after submit form from bootstrap modal

Question

I have main view and partial view,

main view contains drop down for person's name. when I am choosing any specific person's name that time person's details are loading in partial view

when partial view is loading with person's details,I have to give checkbox for edit details when user clicks on checkbox ,I am loading edit view with bootstrap modal.

but when I submit edit form from modal that time when view is loading ,it is not scrolling and it is just loading partial view and not main view which contains dropdown

This is code for checkbox <input type="checkbox" id="divchkBox" /> Update Details

This is ajax call for checkbox

$('#divchkBox').click(function () {       
           if ($(this).is(':checked')) {
               $('#myModal').modal();
               $('#divchkBox').prop('checked', false);
           }        
   });

Thi is modal code

<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id='myModalContent'>
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title heading" id="myModalLabel">Edit records</h4>
            </div>
            <form id="person">
                <div class="modal-body">                    
                      some editable feilds..                       
                </div>
            </form>
            <input type="submit" class="btn btn-primary searchbtn" value="Save changes" id="Edit_Person" />
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

This is ajax call when click on save changes button

 $("#Edit_Person").on("click", function (e) {                       
        $.ajax({
            url: "some url",
            data: $('#person').serialize(),
            type: "Get",
            dataType: "html",
            success: function (result) {               
                $("#PartialView").html(result) 
                var $j = jQuery.noConflict();
            },            
        });
    });

where I need to change to load view with its main and partial view ? and it will be scrollable.

Modal and above ajax calls are in partial view.

Thank you in advance.

Did you try $('#myModal').modal('show'); after $("#PartialView").html(result)? — Sowmyadhar Gourishetty
– Sowmyadhar Gourishetty, Commented Sep 20, 2020 at 16:57
@Sowmyadhar Gourishetty Thank u so much..I have tried it and it is working now — Explorer
– Explorer, Commented Sep 20, 2020 at 17:02
Added the same as answer so that it could be useful for others too — Sowmyadhar Gourishetty
– Sowmyadhar Gourishetty, Commented Sep 20, 2020 at 17:03

Sowmyadhar Gourishetty · Accepted Answer · 2020-09-20 17:03:30Z

1

Please try the below code after $("#PartialView").html(result)

$('#myModal').modal('show');

answered Sep 20, 2020 at 17:03

Sowmyadhar Gourishetty

1,8981 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to load partial view and main view after submit form from bootstrap modal

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related