I have "load more" button, and if I click it fast enough it load the same content twice, and I want to prevent it.

This is how I call to the load more with ajax:

<script type="text/javascript">
  function loadmore() {
    var val = document.getElementById("result_no").value;
    var userval = document.getElementById("user_id").value;
    $.ajax({
      type: 'post',
      url: 'fetch.php',
      data: {
        getresult: val,
        getuserid: userval
      },
      context: this,
      success: function(response) {
        var content = document.getElementById("result_para");
        content.innerHTML = content.innerHTML + response;

        document.getElementById("result_no").value = Number(val) + 10;
      }
    });
  }

</script>

<div id="content">
  <div id="result_para">


  </div>
</div>

<input type="hidden" id="user_id" value="<?php echo $userid;?>">
<input type="hidden" id="result_no" value="15">
<input type="button" id="load" onclick="loadmore()" value="Load More Results">

I have "load more" button, and if I click it fast enough it load the same content twice, and I want to prevent it.

This is how I call to the load more with ajax:

<script type="text/javascript">
  function loadmore() {
    var val = document.getElementById("result_no").value;
    var userval = document.getElementById("user_id").value;
    $.ajax({
      type: 'post',
      url: 'fetch.php',
      data: {
        getresult: val,
        getuserid: userval
      },
      context: this,
      success: function(response) {
        var content = document.getElementById("result_para");
        content.innerHTML = content.innerHTML + response;

        document.getElementById("result_no").value = Number(val) + 10;
      }
    });
  }

</script>

<div id="content">
  <div id="result_para">


  </div>
</div>

<input type="hidden" id="user_id" value="<?php echo $userid;?>">
<input type="hidden" id="result_no" value="15">
<input type="button" id="load" onclick="loadmore()" value="Load More Results">

• javascript
• php
• jquery
• ajax

Share Improve this question Follow edited Apr 10, 2016 at 20:05 fbid 1,57022 gold badges1818 silver badges2929 bronze badges asked Apr 10, 2016 at 18:46 asdas asdaasdas asda 3311 silver badge66 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You could set a loading variable to true at the start of loadmore, and set it back to false in the ajax callback. loading should be declared outside of loadmore though (see what a closure is).

            var loading = false;
            function loadmore()
            {
              if (loading) {
                return ;
              }
              loading = true;
              var val = document.getElementById("result_no").value;
              var userval = document.getElementById("user_id").value;
              $.ajax({
              type: 'post',
              url: 'fetch.php',
              data: {
                getresult:val,
                getuserid:userval
              },
              context: this,
              success: function (response) {
                loading = false;
                var content = document.getElementById("result_para");
                content.innerHTML = content.innerHTML+response;

                document.getElementById("result_no").value = Number(val)+10;
              },
              error: function () {
                loading = false;
              }
              });
            }

Instead of using that variable, you could also programmatically disable/enable the button, but that means that your button will flicker if the request is fast.

You can prevent from this by disable the button after first click, so change this lines:

         success: function (response) {
            var content = document.getElementById("result_para");
            content.innerHTML = content.innerHTML+response;

            document.getElementById("result_no").value = Number(val)+10;
          }

With this lines:

             success: function (response) {
document.getElementById("load").disabled = true;
                var content = document.getElementById("result_para");
                content.innerHTML = content.innerHTML+response;

                document.getElementById("result_no").value = Number(val)+10;
document.getElementById("load").disabled = false;
              }

you could disable the button when the "load more" button is clicked then then use the javascript function setTimeout to remove the disabled attribute from the button after a period of time. This would mean that the button would not be able to be clicked after the first click and even if the ajax request returned an error the button would still be able to be clicked.

$('#load').click(function {
    // disable the button
    $(this).prop('disabled', true);

    // after three seconds enable the button again
    var timeout = setTimeout(function() { $(this).prop('disabled', false); }, 3000);

});