So, as I am working, relentlessly, to try to get this to work I still cannot get
ID: 3597329 • Letter: S
Question
So, as I am working, relentlessly, to try to get this to work I still cannot get it and am BEGGING for help. Here is my assignment:
Your assignment is to use JQuery to capture the player number entered in the textbox on the screen, and when the user clicks the “Get Player Information”, use the JQuery ajax method to retrieve the player’s name upon receiving the response from the server. If the number entered does not exist in the database, you will receive an error message. Either way, you will indicate the player’s name and number, or the error message, in the red output box on the screen. (attached is a copy of the data in the back end database, but you should NOT have to look at any of the C# back end code)
Here is my html;
<html>
<head>
<title>Cavs Assignment</title>
<link href="~/Styles/Home.css" rel="stylesheet" type="text/css" />
<script language=“javascript” src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="~/Scripts/JQuery.js" type="text/javascript"></script>
<script src="~/Scripts/Home.js" type="text/javascript"></script>
</head>
<body>
<input type="text" id="playerNo" name="playerNo" />
<button type="button">Get Player Information</button>
<div id="playerInfo"></div>
<div id="errorInfo"></div>
</body>
</html>
Here is my JS;
function getPlayerInfo() {
var data = $("#playerNo").val();//get value from text field
//below is the ajax call, success function will receive information about the player that will be appended to a div id and same for in case of error
$.ajax({
url: "Home/GetPlayerInformation",
data: { PlayerNumber: data },
success: function (response) {
$("playerInfo").empty();
$("playerInfo").append("<label>Player Name </label><label>" + response.Name + "</label><label> Player No </label><label>" + response.PNo + "</label>");
},
error: function (error) {
$("#errorInfo").empty();
$("#errorInfo").append("<label >Player does not exist </label>");
}
});
}
Please help or at least point me in the right direction. Thnak you in advance.
Explanation / Answer
Explanation:
You need to know that ajax call will go to error function only when call fails. As you said if palyer number doesn't exist in database we will get error message from server which is also a valid response. So, we need to write data into corresponding divs in success function only.
You missed # for playerInfo div in success function.
Comments: I dont know your response. Please handle accordingly in success function. Remove errors if any as this is not executed. Comment for any help.
Refined Jquery function:
function getPlayerInfo() {
var data = $("#playerNo").val();//get value from text field
//below is the ajax call, success function will receive information about the player that will be appended to a div id and same for in case of error
$.ajax({
url: "Home/GetPlayerInformation",
data: { PlayerNumber: data },
success: function (response) {
//check object is empty or not
//this may be not correct but you need to handle response according to your backend response
$.isEmptyObject(response){
$("#errorInfo").empty();
$("#playerInfo").empty();//we need to hide info div
$("#errorInfo").append("<label >Player does not exist </label>");
}else{
$("#playerInfo").empty();
$("#errorInfo").empty(); //we need to hide error div
$("#playerInfo").append("<label>Player Name </label><label>" + response.Name + "</label><label> Player No </label><label>" + response.PNo + "</label>");
}
},
error: function (error) {
}
});
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.