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?
3 answers
solution1
1 2016-03-07 21:22:00
$.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" );
});
solution2
0 2016-03-07 21:31:29
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.
solution3
0 ACCPTED 2016-03-07 21:35:29
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.