第n次单击后禁用AJAX按钮

Question

Given I have a model Post which can have up to n Comments (the number is controlled by the Backend) and I have a view which allows to add a Comment via a AJAX request. What is the best way to tell the view upon the nth request to disable the Add-Comment-Form?

The nth request is successfull so status code should still be 200/201 but the backend already "knows" that the nth + 1 call will invalidate the Post , so i want to somehow tell this to the view so it can take action before the user experiences the (catched) error upon nth + 1 submit.

By now the backend renders html which is then simply attached to a div in the DOM, with JSON I might add an additional field but then would move the templating to the view again.

If someone has an idea for an elegant solution?

Answer 1

Just hide the "Add comment" button by JavaScript, when it will be "nth + 1". Or remove eventListener from button and change caption to smth like "You reached max comments".

Answer 2

Keep a track of the number of clicks. After the n th click, you can change the disabled attribute of your button to true .

$(".myButton").attr("disabled",true);

Answer 3

Try having your server render javascript value for comment count and max comments. Then you can increment the count value in your success function as well as perhaps render the html comment.

Something like

 var commentCount = *value from server*;
 var maxComments =*value from server*;

 $('#mybutton').click(function(){
     $.ajax({
             // your code here 
     })
    . success(function (response) {
             // process response
             commentCount ++;
             if( commentCount >= maxComments) 
                  $('#mybutton). prop('disabled', true);
     });