jQuery模式自动关闭

Question

I have this jquery code

$(document).ready(function () {
$('.btn.btn-primary.patientId').on('click',
            function (e) {
                var $this = $(e.target),
                    $tr = $this.closest("tr");
                var cid = $tr.find(".hdncid").eq(0).val();
                var search;
                    eLoader(true);
                loadUsers('/Companies/AssociateWithCaregiver', true);

    function loadUsers(url, addData) {
        $.get({
            url: url,
            data: addData ? { id: cid, search: search } : {}
        }).done(function (e) {
            eLoader(false);   
            $("#listOfCaregivers .modal-body").html(e);
            $('.btn.btn-primary.submit').click(function () {
                $("#searchForm").submit();
                search = $('#search').val();
                loadUsers('/Companies/AssociateWithCaregiver', true);
            });
            $('.btn.btn-primary.addcaregiver').click(function (b) {
                var $thiscaregiver = $(b.target),
                    $tr = $thiscaregiver.closest("tr");
                var caregiverid = $tr.find(".cgcid").eq(0).val();
                $.post("/Companies/Associate", { patientId: cid, caregiverId: caregiverid });
                $('.close').click();
            });
            $('.btn.btn-default.btn_delete.removecaregiver').click(function (b) {
                var $thiscaregiver = $(b.target),
                    $tr = $thiscaregiver.closest("tr");
                var caregiverid = $tr.find(".cgcid").eq(0).val();
                $.post("/Companies/AssociateRemove", { patientId: cid, caregiverId: caregiverid });
                $('.close').click();
            });

        }).fail(function (e) {
            eLoader(false);

Button <form id="searchForm"> <div class="patientsearch" style="padding-left: 311px;"> <div class="input-group" style="width: 250px;"> @Html.TextBox("search", "", new { placeholder = "Search Caregivers", @class = "form-control" }) <span class="input-group-btn"> <button type="submit" class="btn btn-primary submit">Search</button> </span> </div> </div> </form>

Problem is that when I opening modal window - geting data and want to search I click Search (.btn.btn-primary.submit) and then I received filtered data But in few second modal window automatically closes. And after this I can see in the address bar my link + ?search='my search request'.

What's wrong in my code? Help me please. Thank you.

Answer 1

The default behaviour of clicking a button will submit the form which is why your modal closes and the address changes.

There are two ways around this, you can add a type="button" attribute to your button or you can add a listener for your form and return false to prevent the submit.

eg $('#your_form').submit(function() { return false; });

Answer 2

can you try e.preventDefault() to prevent form submission before ajax request to keep model open

$('.btn.btn-primary.submit').click(function (e) {
        e.preventDefault();
        //$("#searchForm").submit();
        search = $('#search').val();
        loadUsers('/Companies/AssociateWithCaregiver', true);
});