Reputation: 59
I am trying to create a webpage that could check if a url is good or bad. The webpage is simple. There should be only a button on the webpage. Whenever the button is clicked it will check the status of the url. As a test case let's say I am checking for google.com. The problem is how do I connect the ajax function parameter with the html parameter? Here is what I got so far.
<input type="button" id="home" onclick="validate()" value="Start"/>
<br>
<p>Google Status: %s</p>
<script>
$('#home').click(function(){
var string;
$.ajax({
type:'get',
url:"https://www.google.com/",
cache:false,
async:asynchronous,
dataType:json,
success: function(result) {
string = 'Working';
}
error: functionfunction(result){
string = 'Failed';
}
});
});
</script>
Upvotes: 0
Views: 1270
Reputation: 23208
Update text after ajax response
<input type="button" id="home" onclick="validate()" value="Start"/>
<br>
<p id='status'>Google Status: %s</p><!-- >change<-->
<script>
$('#home').click(function(){
var string;
$.ajax({
type:'get',
url:"https://www.google.com/",
cache:false,
async:asynchronous,
dataType:json,
success: function(result) {
$("#status").html("Google Status: Working"); // change
}
error: functionfunction(result){
$("#status").html("Google Status: Failed");// change
}
}
);
});
</script>
Upvotes: 1
Reputation: 168
There were many errors in the ajax call itself, but the main changes I have made are to update the html of the statusText paragraph inside the success and error handlers and removed the onClick event from the button since you are adding the event handler in javascript.
<input type="button" id="home" value="Start"/>
<br>
<p id="statusText">Google Status:</p>
<script>
$('#home').click(function(){
$.ajax({
type:'get',
url:"https://www.google.com/",
cache:false,
async:true,
dataType:'json',
success: function(result) {
$("#statusText").html("Google Status: Working");
},
error: function(result){
$("#statusText").html("Google Status: Failed");
}
});
});
</script>
Upvotes: 0
Reputation: 11
You need to reference the HTML Controls with JQUery, And you are missing some commas, look at this fiddle:
https://jsfiddle.net/0g9zbzqr/3/
$('#home').click(function(){
$.ajax({
url:$('#url').val(),
type:'get',
async:false,
success: function(result) {
$("#lblResult").html($('#url').val()+': Working');
},
error: function(result){
$("#lblResult").html($('#url').val()+': Failed');
}
});
});
Upvotes: 0