CODEWITHSUNDEEP
javascriptjqueryajax
Rei
Rei

Reputation: 323

Limit the number of appends in JQuery

I wan't to limit the number of append that happen in Jquery whenever I click the button

    function standardRoom() {
  var flag = 0
  if ($('select#selectBoxStandard option').length > 1 ) {
    flag++
    $('#selectBoxStandard').find("option:nth-last-child(-n+" + $('#selectBoxStandard').val() + ")").remove();
    if (flag <= 1) {
        $("#roomDetail ul").append('<li><strong>Standard Room - Regular Online Rate</strong> </li>').append('<li class="pull-right"><h4 style="color:darkorange">PHP {{$availableRooms[0]['nightRate']}}</h4></li>').append('<li>Number of night(s): {{$n_nights}} </li>').append('<li>Number of person(s): </li>').append('<li class="hr">Number of room(s): </li>').append(flag);
    }
  }else {
    alert("No more rooms");
  }
}

I tried using if statement based on what I find here. But it's not working, it just keeps on appending.

Upvotes: 0

Views: 179

Answers (3)

gaetanoM
gaetanoM

Reputation: 42054

You may use custom data attributes instead of your local variable. At dom ready you can set the value of flag data attribute for your selectBoxStandard element and after you can use it:

// init flag value
$('#selectBoxStandard').data('flag', 0);

function standardRoom() {
    // get flag value
    var flag = $('#selectBoxStandard').data('flag');


    if ($('select#selectBoxStandard option').length > 1 ) {

        // update flag value
        $('#selectBoxStandard').data('flag', flag++)

        $('#selectBoxStandard').find("option:nth-last-child(-n+" + $('#selectBoxStandard').val() + ")").remove();
        if (flag <= 1) {
            $("#roomDetail ul").append('<li><strong>Standard Room - Regular Online Rate</strong> </li>').append('<li class="pull-right"><h4 style="color:darkorange">PHP {{$availableRooms[0]['nightRate']}}</h4></li>').append('<li>Number of night(s): {{$n_nights}} </li>').append('<li>Number of person(s): </li>').append('<li class="hr">Number of room(s): </li>').append(flag);
        }
    }else {
        alert("No more rooms");
    }
}

Upvotes: 1

Laurens
Laurens

Reputation: 2607

Everytime you call standardRoom function the flag variable is reset to 0, so it will always keeps adding the elements. Make sure you store that variable somewhere more global where you don't need to reset it:

   var flag = 0;
   function standardRoom() {
       if ($('select#selectBoxStandard option').length > 1 ) {
           flag++
           $('#selectBoxStandard').find("option:nth-last-child(-n+" + 
           $('#selectBoxStandard').val() + ")").remove();
           if (flag <= 1) {
               $("#roomDetail ul").append('<li><strong>Standard Room - Regular Online Rate</strong> </li>').append('<li class="pull-right"><h4 style="color:darkorange">PHP {{$availableRooms[0]['nightRate']}}</h4></li>').append('<li>Number of night(s): {{$n_nights}} </li>').append('<li>Number of person(s): </li>').append('<li class="hr">Number of room(s): </li>').append(flag);
           }
       } else {
          alert("No more rooms");
       }
    }

Upvotes: 2

ellipsis
ellipsis

Reputation: 12152

flag gets reset on every function call. Define it outside the function. 

 var flag = 0    
    function standardRoom() {

          if ($('select#selectBoxStandard option').length > 1 ) {
        flag++
        $('#selectBoxStandard').find("option:nth-last-child(-n+" + $('#selectBoxStandard').val() + ")").remove();
        if (flag <= 1) {
            $("#roomDetail ul").append('<li><strong>Standard Room - Regular Online Rate</strong> </li>').append('<li class="pull-right"><h4 style="color:darkorange">PHP {{$availableRooms[0]['nightRate']}}</h4></li>').append('<li>Number of night(s): {{$n_nights}} </li>').append('<li>Number of person(s): </li>').append('<li class="hr">Number of room(s): </li>').append(flag);
        }
      }else {
        alert("No more rooms");
      }
    }

Upvotes: 1

Related Questions