Ajax call multiple time onclick event on bootstrap modal

Question

By clicking a button Its loaded a bootstrap modal. On the modal there have a form and on click save button I am trying to submit form by ajax call. At first time the ajax call trigger one time, but 2nd time the ajax url trigger two times. I see on firebug console section the post url is called multiple times.

Here Is my jquery code.

 $(".show-modal").click(function() {
                    $('.upload-modal').modal();

                    $(".save-logo").click(function(e) {

                        e.preventDefault();
                        $.ajax({
                              type : "POST",
                              data : data,                        
                              contentType: false,
                              cache : false,
                              processData: false, 
                              url : "../../io/upload/"
                        }).done(function(rawData) {
                            $('.modal-header .close').click();

                         })

                    });
             })

Answer 1

The problem is that you have your .save-logo click handler inside the .show-modal click handler. So every time the modal is shown, you attach another click handler to the .save-logo element. The code below should fix that problem:

$(".show-modal").click(function () {
    $('.upload-modal').modal();
});

$(".save-logo").click(function (e) {

    e.preventDefault();
    $.ajax({
        type: "POST",
        data: data,
        contentType: false,
        cache: false,
        processData: false,
        url: "../../io/upload/"
    }).done(function (rawData) {
        $('.modal-header .close').click();

    })

});

Answer 2

$(function(){
var editUserId;
$('#edit-user-modal').on('show.bs.modal', function(e) {
    editUserId = $(e.relatedTarget).data('userid');
});
$("#edit-user-form").submit(function(event) {
 
    event.preventDefault();
    var form = $(this);
    var route = "/edit-user/" + editUserId;

    if(validateEditUserForm()){
        $.ajax({
        type: "POST",
        url: route,
        data: form.serialize(), 
        success: function(Response)
        { 
            if(Response){
                console.log(Response.status);
                console.log(Response.message);
                if(Response.status == 'success'){
                    $('#adduser-alert-box').hide();
                    $("#add-user-form")[0].reset();
                    $('#adduser-success-box').show();
                    $('#adduser-success-box').html(Response.message);
                }
                else{
                    console.log('User could not be added');
                    $('#adduser-alert-box').show();
                    $('#adduser-alert-box').html(Response.message);
                }
            }
            else{
                console.log('No Response');
                $('#adduser-alert-box').show();
                $('#adduser-alert-box').html('No Response');
            }
        }
        });
    }
    else{
        console.log('Validation Error');
        $('#adduser-alert-box').show();
        $('#adduser-alert-box').html('Please Fill All the Fields Correctly');
    }


});});

I faced the same issue and randomly i tried something . so if you create a global variable to store the 'id' you pass from your button then store the id from the 'data' attribute of your button then it won't make multiple requests when clicked since you have declared the variable globally!

Hope it helps.