CODEWITHSUNDEEP
jqueryajaxasp.net-mvcasp.net-mvc-4
rumi
rumi

Reputation: 3298

Subsequent ajax call using jquery not working in mvc 4 application

My partial view has a form and on a button click i'm making an ajax call. The controller returns the partial view and is rendered. It all works perfectly but when I click the button again no ajax call is made. I have seen few similar issues with subsequent calls failing but none of the solution works for me. My code for ajax call is

  $(document).ready(function () {
        $('#btnUpdateRequest').click(function (e) {
            e.preventDefault();
            $.ajax({
                url: '/Request/UpdateRequest',
                cache: false,
                data: $('form[id="RequestForm"]').serialize(),
                type: 'POST',
                success: function (data) {
                    $('.divPartial').html(data);
                    $('#ResponseContainer').addClass('show').removeClass('hide');
                }
            });
        });
    });

My form is like below

@using (Html.BeginForm("UpdateRequest", "Request", FormMethod.Post, new {@class = "form", id = "RequestForm" }))
{
// form elements 
 <input class="btn btn-danger pull-right" id="btnUpdateRequest" value="Update" />
 }

Any ideas? thanks

Upvotes: 0

Views: 259

Answers (2)

Matt Bodily
Matt Bodily

Reputation: 6423

your script should be on the main page and not on the partial. with the partial loaded after page load your click events won't be seen. To fix this you need to tie your click event to the document

$(document).on('click', '#btnUpdateRequest', function (e) {
    //your script here
});

Upvotes: 1

King
King

Reputation: 1

Try like this 

$('#btnUpdateRequest').click(function (e) {
    e.preventDefault(); //preventing the default action
    var $form = $('#RequestForm');
    $.ajax({
        url: $form.prop('action'),
        data: $form.serializeArray(),
        type: 'POST',
        success: function (data) {
            $('.divPartial').html(data);
            $('#ResponseContainer').addClass('show').removeClass('hide');
        }
    //you can return false;
    });


});

Upvotes: 0

Related Questions