A strange issue with jquery/ajax not updating variables inside a function during onClick

Question

I have a small issue which I can't seem to fix for 3 days. I don't think it is a code error but my understanding variables and why onClick event doesn't (work) properly

Basically I have a page a table and many rows in it. Each row has comment icon, and when you clicked on this icon, a jquery modal opens up with a textarea and your write your comment press submit (on the modal) and the comment is sent via ajax.

Everything works except:

The problem is that if I have 10 rows, and without refreshing/reloading the page if I open each of those 10 icons in one by one, submit my comment, all comments get inserted in the first row.

It is as if, If I open the first popup and submit and when I open a second popup then something about the first popup is being persisted.

Here is an example code.

this is a simple code to represent the modal

<!-- very minimilized example because the modal has no issues -->
<div class="modal fade" id="comment-viewer">
  <input type="comment" name="" id="my-comment">
  <input type="button" name="submit" class="btn-primary">
</div>

the table with rows and comment icon that triggers the modal to show (onclick)

<table>
  <td><i class="title_row_id_1" onClick="open_comment_modal(this)" data-id="1"></i> </td>
  <td><i class="title_row_id_2" onClick="open_comment_modal(this)" data-id="2"></i> </td>
  <td><i class="title_row_id_3" onClick="open_comment_modal(this)" data-id="3"></i> </td>
  <td><i class="title_row_id_4" onClick="open_comment_modal(this)" data-id="4"></i> </td>
  <td><i class="title_row_id_5" onClick="open_comment_modal(this)" data-id="5"></i> </td>
</table>

a function to open modal, and send submitted content to php file

function open_comment_modal(e){
  var id = e.dataset.id
  // code to display the modal goes here. (has no issues)


$('.btn-primary').click(function(){
 var comment = $("#my-comment").val() 
var dataString = "id=" + id + "&comment=" + comment
  ajaxRequest = jQuery.ajax({
    type: "POST",
    url: "foo.php",
    data: dataString,
      success: function(response) {
       $("#my-comment").val('') // no effect
    }
});    
  $("#my-comment").val('') // no effect
})
 $("#my-comment").val('') // no effect
}

So, in the above example it on each comment icon press it should update the id, get the comment and send it to db.

But all it does is insert into the database all comments with the 'id' of the first opened comment.

I have disabled caching but nothing still

Answer 1

You need to reset the fields when the popup is closed and repopulate the fields with new values when the modal is shown again.

For example suppose when you close the popup your comment box must be emptied like this

$("#comment-viewer").on("hidden.bs.modal", function () {
  $('#my-comment').val('');
});

hope you understand the point..

Answer 2

It's simply because of the id variable scope issue. You are attaching the click handler inside the open_comment_modal method . which you should not. Instead of this you should attach the click handler out side of that function and get the id from the dom dataset inside the click handler.

Answer 3

Second try ;). Please try to change open_comment_modal(e) like:

function open_comment_modal(e){
     var id = e.dataset.id
     // code to display the modal goes here. (has no issues)
     $('.btn-primary').off('click');
     $('.btn-primary').click(function(){
     ...

Because everytime you call open_comment_modal , you append another click handler to the .btn-primary and the old ones are still there. So you have to clear the previous (not valid) handler, before you attach new one.

Answer 4

You need to reset the text once modal is open and read the text once submit button is clicked.

Here is the updated code

var _Id;
var _comment;
function open_comment_modal(e){
   _Id = e.dataset.id;
   $("#my-comment").val('');
    // code to display the modal goes here. (has no issues)
  }
$( document ).ready(function() {
  $('.btn-primary').click(function(){
    _comment = $("#my-comment").val();
    var dataString = "id=" + _Id + "&comment=" + _comment
      ajaxRequest = jQuery.ajax({
        type: "POST",
        url: "foo.php",
        data: dataString,
          success: function(response) {
          $("#my-comment").val('');
          // code to hide the modal goes here.
        }
    }); 
  });
});