CODEWITHSUNDEEP
javascriptjqueryajax
Kevin
Kevin

Reputation: 331

Ajax request submitting input multiple times

I have table rows that creates a sidebar with input fields through an ajax get request when pressed on a row. The sidebar will in turn have another ajax post request that submits the input fields in the sidebar.

The problem I'm having is that if the user presses around on different table rows and then submits the input fields, it will run the ajax calls for all the table rows that have been pressed but it should only submit for the row that it's currently "standing" on.

Ajax call to create sidebar with input fields:

var ajaxRequest = null;

$('.detailedTable tbody').on('click', '.tablerow', function() {
  var somedata = $(this).attr('data-somedata');

  ajaxRequest = $.ajax({
    url:"/ajax/showAccountSidebar",
    method:"GET",
    data: {
      somedata: somedata,
    },
    beforeSend:function() {
        if(ajaxRequest != null) {
            ajaxRequest.abort();
        }
     },
    success:function(data) {
      $('#sidemenu').html(data);
    }
  });
});

Ajax call to submit the input fields in sidebar:

var sidebarRequest = null;

$(document).on('click', '#sidebarMenu', function() {
  var someData = $("#someData").val();

  sidebarRequest = $.ajax({
    url:"/ajax/saveAccountNote",
    method:"POST",
    data: {
      inputData: someData
    },
    beforeSend:function() {
        if(sidebarRequest != null) {
            sidebarRequest.abort();
        }
    }
  });
});

Upvotes: 0

Views: 64

Answers (1)

Kevin
Kevin

Reputation: 331

The issue I had was calling the second AJAX call with

$(document).on('click', '#sidebarMenu', function() {

Changed it to the following and now it only submits for the input fields I've clicked last: 

$('#sidebarMenu').on('click', $(this), function() {

Upvotes: 1

Related Questions