How do I disable/enable buttons using jQuery?

Question

I'm working on a project for class, and I'm pretty much an absolute beginner at this sort of thing. I have a server running on Ubuntu. Inside script.js I have

$(document).ready(function(){
    $.get('/var/www/html/hadoopstatus.txt', function(response) {
        var $hadoopstatus = response;
    }, "text");
    if ($hadoopstatus == 'Running'){
        document.getElementById('b2').disabled = false;
    }
    if ($hadoopstatus == 'Stopped'){
        document.getElementById('b1').disabled = false;
    }
});

And inside index.html I have

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="script.js"></script>
// some stuff
</head>

<body>
// stuff
<form method="post">
<button type="submit" id="b1" disabled>Start Hadoop</button>
<button type="submit" id="b2" disabled>Stop Hadoop</button>
</form>
// stuff
</body>

/var/www/html/hadoopstatus.txt contains only

Running

The problem I'm having is that the buttons, in this case the button "Stop Hadoop", will not enable. What am I doing wrong?

irfan · Accepted Answer · 2016-03-07 21:33:29Z

1

$.get function is async, so you have to wait until it complete.

so change you code to :

 $.get('/var/www/html/hadoopstatus.txt', function(response) {
   var $hadoopstatus = response;
   if ($hadoopstatus == 'Running') {
     document.getElementById('b2').disabled = false;
   }
   if ($hadoopstatus == 'Stopped') {
     document.getElementById('b1').disabled = false;
   }
 }, "text");

for complete control :

var jqxhr = $.get('/var/www/html/hadoopstatus.txt', function(response) {
  alert( "success" );

  if (response == 'Running') {
     document.getElementById('b2').disabled = false;
   }
   if (response == 'Stopped') {
     document.getElementById('b1').disabled = false;
   }


}, "text")
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });

edited Mar 7, 2016 at 21:33

answered Mar 7, 2016 at 21:22

irfan

6184 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gaetanoM · Accepted Answer · 2016-03-07 21:35:29Z

0

Another possible solution is:

$(function() {
  $.get('hadoopstatus.txt', function(response) {
    switch (response.trim()) {
      case 'Running':
        document.getElementById('b2').disabled = false;
        break;
      case 'Stopped':
        document.getElementById('b1').disabled = false;
        break;
    }
  }, "text");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<form method="post">
    <button type="submit" id="b1" disabled>Start Hadoop</button>
    <button type="submit" id="b2" disabled>Stop Hadoop</button>
</form>

Evaluate the response in the .get function. It is an asyncronous function.

answered Mar 7, 2016 at 21:35

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

1 Comment

Tauschung Over a year ago

This worked for me! I guess I simply wasn't sure of the correct approach to solve my problem. Thank you!

Dr. Cool · Accepted Answer · 2016-03-07 21:31:29Z

You've got two problems. The first is that you've defined the $hadoopstatus variable in your callback function. Once the callback function exits, the variable will be wiped out. But another and more serious problem is that you're making an AJAX call which could take a couple seconds to complete. But immediately after initiating that call, you're checking for the value of $hadoopstatus.

This is a problem with asynchronous programming. You need to remember that AJAX calls will finish some time after you initiate it. That's WHY there is a callback function. That code will run when the AJAX call has finished loading data... whether that's a few milliseconds or 10 seconds.

I adjusted your code to fit all of the business logic into your callback function. When the AJAX call is complete, it will create the $hadoopstatus variable from the response, then check the value and disable the appropriate button.

$(document).ready(function(){
    $.get('/var/www/html/hadoopstatus.txt', function(response) {
        var $hadoopstatus = response;
        if ($hadoopstatus == 'Running'){
            document.getElementById('b2').disabled = false;
        }
        if ($hadoopstatus == 'Stopped'){
            document.getElementById('b1').disabled = false;
        }
    }, "text");

});

Remember that the value of $hadoopstatus won't be available outside of this function because you created the "var" inside the function. When the function is finished, so is the variable. If you use the "var" command before the AJAX call, you'll still have a problem because maybe it won't contain the value when your code tries to run it because of the loading delay. In other words, be careful when expecting your AJAX call to be instantaneous. It probably won't be.

Collectives™ on Stack Overflow

How do I disable/enable buttons using jQuery?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related