Do not reload page when giving submit in modal

1

I have a modal to search for clients:

Whatiscalledaregistrationformasfollows:

$('#linkSearchShipperCustomer').on("click", function (e) {
            showDialogList("@Url.Action("IndexShadow", "ShipperCustomer")", "IdShipperCustomerDiv", "IdShipperCustomer", "ShipperCustomerFullName", "Buscar Cliente", function (value, text) {
                loadCustomerAddress(value);
            });

        });

showDialog has this body:

function showDialogList(url, idDiv, idValueUpdate, idTextUpdate, dialogTitle, callback) {
debugger;
elementChoosedCallback = callback;

idElementValueUpdate = idValueUpdate;
idElementTextUpdate = idTextUpdate;

$.post(url, {}, function (result) {
    $("#" + idDiv).html(result);
    if (dialogTitle != undefined)
        $("#" + idDiv).dialog({ width: 670, title: dialogTitle });
    else
        $("#" + idDiv).dialog({ width: 670 });

  });
}

and call this action:

public ActionResult IndexShadow(ShipperCustomerFilter filter)
    {
        filter.IsActive = true;
        filter.PageSize = 12;

        var modelList = new ShipperCustomerListViewModel()
        {
            ShipperCustomers = ShipperCustomerViewModel.ConvertFromModelList(repository.GetAllShipperCustomers(filter, out totalRecords)),
            LegalTypes = GetAllLegalTypes()
        };

        CreateRouteValuesForFilters();

        ViewBag.PagingModel = SetCurrentPage(totalRecords, filter.Page, filter.PageSize, true);
        ViewBag.PagingModel.FormId = "ShipperCustomerFormSearchId";

        return View(modelList);
    }

What I think is the problem is, when I submit submit in the modal it reloads the back page and returns it, reloaded the parent with the modal fields:

Howdoyounottoreloadthepagethatcalledthemodal,anddisplaytheresultsinthemodalitself?(notintheimagebutitreturnstheresultsonthatwrongpage).

EDIT:Afterhitting@Harrison,Isawthatmycodedoesnotgointothefunctionthatcallse.preventDefault();Idonotknowwhy.

$("#ShipperCustomerFormSearchId").on("submit", function (e) {
        debugger;
        e.preventDefault();

        $.post($(this).attr("action"), $(this).serialize(), function (result) {
            $("#IdShipperCustomerDiv").html(result);
        });
    });'

My beginForm:

@using (Html.BeginForm("IndexShadow", "ShipperCustomer", ViewBag.Routes as RouteValueDictionary, FormMethod.Get, new { @id = "ShipperCustomerFormSearchId", @class = "middle-forms" }))
    
asked by anonymous 08.06.2017 / 21:30

1 answer

2

To cancel a submit of the form you have to use preventDefault in the event, for example:

$('form').on('submit', function(e) {
    e.preventDefault();
    // insira aqui sua chamada ajax
})
    
09.06.2017 / 03:49