Andriy Kravchenko Andriy Kravchenko - 6 months ago 119
jQuery Question

Jquery: show message on disabled button click/hover

I want to display info message if user click disabled button. My code makes it but info message appears only for short moment and then previous success message continues displaying. How to change code to force info message halt and don't disappear?


UPDATED: I made tiny changes in my code and now it disables button
just after first click and displays success message(earlier to disable I should click once again)but I'd want if user occasionally press disabled button again he will receive info message. How to make it possible?


$(document).ready(function() {
$('#s1-btn').click(function(e) {
e.preventDefault();
$(this).prop('disabled', true)
$.post(
"/run-key-gen-process/",
onAjaxSuccess
);

function onAjaxSuccess(data) {
if (data == "Key was succesfully generated an tested!") {
$("#jmessage").addClass("alert alert-success")
.text(data).fadeOut(6000);
}
$('#s1-btn').click(function() {


$("#jmessage").removeClass("alert alert-success").addClass("alert alert-info")
.text("Button is disabled since you already generated and tested the key");
});
};
});
})


template.html

<div class="row" id="div-st1">
<div class="col-md-3 ">
<button type="submit" method="POST" id="s1-btn" class="form-inline btn btn-info pull-left">Generate</button>
</div>
<div class="col-md-6 " id="jmessage" role="alert"></div>
</div>

Answer

I've modified my code like this and now it does what it should. If user clicks button it runs key generation, success message displays and button became disabled. If user clicks/moves mouse on disabled button info message appears.

 $(document).ready(function(){
  $('#s1-btn').click(function(e){

    e.preventDefault();
    $(this).prop('disabled', true);
    $( "#div-st1" ).mouseenter(function() {
      $("#jmessage").removeClass("alert alert-success").addClass("alert alert-info")
          .text("Button is disabled since you already generated and tested the key");

       });
        $.post(
                "/run-key-gen-process/",
                onAjaxSuccess
            );
                function onAjaxSuccess(data)
            {
                if(data == "Key was succesfully generated an tested!") {
                    $("#jmessage").addClass("alert alert-success")
                    .text(data);
                }
            };
        });
    });