CODEWITHSUNDEEP
jqueryasp.net-mvc
Joao Victor
Joao Victor

Reputation: 1171

Ajax form not submiting after the first submit event and not re-rendering partial view

I have a search form with 4 dropdownlists. Each time the user changes the values, the form submits and new results show within a partial view. Here's the code:

<script type="text/javascript">

   $(document).ready(function () {
        $("#DDLUF").change(function (event) {
            $("#loading").show();
            $("#DDLCidade").empty();
            $("#DDLBairro").empty();
            $("#DDLRua").empty();

            if ($("#DDLUF").val() !== '') {
                $.ajax({
                    type: 'POST',
                    url: '/CoberturaPainelRotas/ObterCidadesPorUf',
                    dataType: 'json',
                    data: { uf: $("#DDLUF").val() },

                    success: function (Ddd) {
                        $("#DDLCidade").append("<option value''>SELECIONE</option>");
                        $.each(Ddd, function (i, Cidade) {
                            $("#DDLCidade").append('<option value="' + Cidade.Id + '">' + Cidade.Nome + '</option>');
                        });
                        var form = $(event.target).parents('form');
                        form.submit();
                        $("#DDLCidade").prop('disabled', false);
                        $('#loading').hide();

                    }
                });


            } else {
                $('#loading').hide();
                $("#DDLCidade").prop('disabled', true);
                $("#DDLBairro").prop('disabled', true);
                $("#DDLRua").prop('disabled', true);
                $("#totalUf").text("");
                $("#totalCidade").text("");
            }

        });

        $("#DDLCidade").change(function () {
            $("#loading").show();
            $("#DDLBairro").empty();
            $("#DDLRua").empty();

            if ($("#DDLCidade").val() !== 'SELECIONE') {
                $.ajax({
                    type: 'POST',
                    url: '/CoberturaPainelRotas/ObterBairrosPorCidade',
                    dataType: 'json',
                    data: { cidade: $("#DDLCidade").val() },

                    success: function (Ddd) {
                        $("#DDLBairro").append("<option value''>SELECIONE</option>");
                        $.each(Ddd, function (i, Bairro) {
                            $("#DDLBairro").append('<option value="' + Bairro.Id + '">' + Bairro.Nome + '</option>');
                        });
                        var form = $(event.target).parents('form');
                        form.submit();
                        $("#DDLBairro").prop('disabled', false);
                        $('#loading').hide();
                    }
                });

            } else {
                $('#loading').hide();
                $("#DDLBairro").prop('disabled', true);
                $("#DDLRua").prop('disabled', true);
                $("#totalCidade").text("");
            }

        });

        $("#DDLBairro").change(function () {
            $("#loading").show();
            $("#DDLRua").empty();

            if ($("#DDLRua").val() !== 'SELECIONE') {
                $.ajax({
                    type: 'POST',
                    url: '/CoberturaPainelRotas/ObterRuasPorBairro',
                    dataType: 'json',
                    data: { bairro: $("#DDLBairro").val() },

                    success: function (Ddd) {
                        $("#DDLRua").append("<option value''>SELECIONE</option>");
                        $.each(Ddd, function (i, Rua) {
                            $("#DDLRua").append('<option value="">' + Rua.NomeRua + '</option>');
                        });
                        var form = $(event.target).parents('form');
                        form.submit();
                        $("#DDLRua").prop('disabled', false);
                        $('#loading').hide();
                    }
                });
            } else {
                $('#loading').hide();
                $("#DDLRua").prop('disabled', true);
            }

        });



    });
</script>

<div class="panel-body">
    <div class="row">
        <div class="col-lg 12">
            <h3 class="page-header">Consultar Cobertura</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="form-group">
                @using (Ajax.BeginForm("ConsultarCapacidadeSecundaria", "CoberturaPainelRotas", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "PartialConsultarCobertura" }, new { @id = "formID" }))
                {
                    <div class="row">
                        <div class="col-sm-2">
                            <label>Uf:</label>
                            @Html.DropDownListFor(x => x.UF , new SelectList((IEnumerable)ViewData["UF"]), "SELECIONE", new { @id = "DDLUF", @class = "form-control" })
                        </div>
                        <div class="col-sm-4">
                            <label id="totalUf"></label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <label>Cidade:</label>
                            @Html.DropDownListFor(x => x.Cidade, new SelectList(string.Empty), new { @id = "DDLCidade", @class = "form-control", @disabled = "true" })
                        </div>
                        <div class="col-sm-4">
                            <label id="totalCidade"></label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <label>Bairro:</label>
                            @Html.DropDownListFor(x => x.Bairro, new SelectList(string.Empty), new { @id = "DDLBairro", @class = "form-control", @disabled = "true" })
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <label>Rua:</label>
                            @Html.DropDownListFor(x => x.Rua, new SelectList(string.Empty), new { @id = "DDLRua", @class = "form-control", @disabled = "true" })
                        </div>
                    </div>
                }


            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div id="PartialConsultarCobertura">
                @{
                    Html.RenderPartial("PartialConsultaCobertura");
                }
            </div>
        </div>
    </div>
</div>

When the user changes the first dropdownlist, the ajax form submits and the results show. But when the user changes the selected item of the following dropdownlists, the form doesn't submit. Could it be that i need to re-attach the jquery event everytime? What am i doing wrong?

(ASP.MVC 5 BTW)

Upvotes: 1

Views: 104

Answers (2)

Joao Victor
Joao Victor

Reputation: 1171

I've managed to make it work:

1) Added the 'event' in the change events:

$("#DDLCidade").change(function (event) {}

2) Removed the Ajax begin form:

<div class="panel-body">
    <div class="row">
        <div class="col-lg 12">
            <h3 class="page-header">Consultar Cobertura</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="form-group">

                    <div class="row">
                        <div class="col-sm-2">
                            <label>Uf:</label>
                            @Html.DropDownListFor(x => x.UF , new SelectList((IEnumerable)ViewData["UF"]), "SELECIONE", new { @id = "DDLUF", @class = "form-control" })
                        </div>
                        <div class="col-sm-4">
                            <label id="totalUf"></label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <label>Cidade:</label>
                            @Html.DropDownListFor(x => x.Cidade, new SelectList(string.Empty), new { @id = "DDLCidade", @class = "form-control", @disabled = "true" })
                        </div>
                        <div class="col-sm-4">
                            <label id="totalCidade"></label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <label>Bairro:</label>
                            @Html.DropDownListFor(x => x.Bairro, new SelectList(string.Empty), new { @id = "DDLBairro", @class = "form-control", @disabled = "true" })
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <label>Rua:</label>
                            @Html.DropDownListFor(x => x.Rua, new SelectList(string.Empty), new { @id = "DDLRua", @class = "form-control", @disabled = "true" })
                        </div>
                    </div>



            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div id="PartialConsultarCobertura">
                @{
                    Html.RenderPartial("PartialConsultaCobertura");
                }
            </div>
        </div>
    </div>
</div>

3) Used another ajax call to populate my partial view:

$.ajax({
     type: 'GET',
     url: '/CoberturaPainelRotas/ConsultarCapacidadeSecundaria',
     data: { uf: $("#DDLUF").val(), cidade: $("#DDLCidade").val(), bairro: $("#DDLBairro").val(), rua: $("#DDLRua").val() },
     success: function (viewHTML) {
            $("#PartialConsultarCobertura").html(viewHTML);
     }
});

Upvotes: 1

Mohamed Kandeel
Mohamed Kandeel

Reputation: 147

try to replace this $("#DDLUF").change(function (event)

to this $(document).on('change', '#DDLUF', function (e)

and the same for the remaining dropdownlists

this is a common issue with ajax refresh as it dynamically creates new content and the events are lost on refresh

if this still didn't work you need to change this var form = $(event.target).parents('form');

and try to hardcode it like var form = $(event.target).parent().parent().parent().childern(...;

Upvotes: 0

Related Questions