Avoid "nervous finger" switch button change

Asked

Viewed 76 times

-1

I have a switch button, and I want to do a post every time it changes from true to fake. But I need to keep the guy from clicking over and over again. And just make the change from true to false after completing the previous post.

For those who want to see my function today is like this:

http://codepen.io/anon/pen/jrbZOg

$(function() {

  $('.switch').on('change', function() {
    $(this).toggleClass('checked');
  });

});
body {
  background-color: #fafafa;
  margin: 60px;
}
.switch {
  background-color: #bebebe;
  border-radius: 4px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 14px;
  height: 26px;
  margin-bottom: 12px;
  position: relative;
  width: 60px;
  -webkit-transition: background-color 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
}
.switch.checked {
  background-color: #76d21d;
}
.switch input[type="checkbox"] {
  cursor: pointer;
  height: 10px;
  left: 12px;
  position: absolute;
  top: 8px;
  -webkit-transition: left 0.05s ease-in-out;
  -moz-transition: left 0.05s ease-in-out;
  -o-transition: left 0.05s ease-in-out;
  -ms-transition: left 0.05s ease-in-out;
  transition: left 0.05s ease-in-out;
  width: 10px;
}
.switch.checked input[type="checkbox"] {
  left: 38px;
}
.switch input:before {
  background: #fff;
  background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #f0f0f0));
  background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
  border: 1px solid #fff;
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  content: '';
  height: 18px;
  position: absolute;
  top: -5px;
  left: -9px;
  width: 26px;
}
.switch input:after {
  background: #f0f0f0;
  background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #fff));
  background: -webkit-linear-gradient(top, #f0f0f0 0%, #fff 100%);
  background: -o-linear-gradient(top, #f0f0f0 0%, #fff 100%);
  background: -ms-linear-gradient(top, #f0f0f0 0%, #fff 100%);
  background: linear-gradient(to bottom, #f0f0f0 0%, #fff 100%);
  border-radius: 10px;
  content: '';
  height: 12px;
  margin: -1px 0 0 -1px;
  position: absolute;
  width: 12px;
}
.switch .icon-ok,
.switch .icon-remove {
  line-height: 28px;
  text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2);
  margin: 0 9px;
}
.switch .icon-ok {
  float: left;
}
.switch .icon-remove {
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch checked">
  <i class="icon-ok"></i>
  <i class="icon-remove"></i>
  <input type="checkbox" checked>
</label>
<label class="switch">
  <i class="icon-ok"></i>
  <i class="icon-remove"></i>
  <input type="checkbox">
</label>

javascript jquery
  • 3

    Why not give a "disabled" button when it changes state?

  • You can put a flag to see if it clicked or not

  • o Post ai you speak is an ajax request, this?

  • @Fleuquerlima after the post happens, you have to give a "enabled" button in case it wants to change to false for example.

  • @adelmo00 that even he does via ajax

  • I solved the problem with disabled. But who has any solution with mocking for example, and want to share, please feel free.

  • You can place a loading on the screen and hide the button on/off. Here’s an example: http://answall.com/questions/75743/loading-no-ajax

Show 2 more comments

1 answer

1


Try using these functions here:

$(function() {

  $('.switch').on('change', function(){
    $(this).toggleClass('checked');
    var input = $(this).find('input');
    input.attr('disabled', true); //desativa o botão

    var data = { name: "John", time: "2pm" }; //seus dados vão aqui

    var jqxhr = $.post('http://suaurl.com', data);

    jqxhr.done(function() {}); //código de sucesso

    jqxhr.fail(function() {}); //código de erro

    jqxhr.always(function() {
      input.attr('disabled', false);
    }); //Sempre vai ser executado depois da promisse

 });

});

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.