The assignment is to use JQuery to capture the player number entered in the text
ID: 3594551 • Letter: T
Question
The 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.
I am working on Visual Studio if that helps any.
Here is the information to use:
HTML Info:
</html>
JavaScript Info:
});
CSS Info:
<html> <head> <title>Assignment 8</title> <link href="~/Styles/Home.css" rel="stylesheet" /> <script src="~/Scripts/JQuery.js"></script> <script src="~/Scripts/Home.js"></script> </head> <body> <div class="player-number-label">Enter Player Number: </div> <div class="player-number-textbox"> <input class="player-number-textbox-input" type="text" value="" /> </div> <hr /> <div class="player-number-button"> <button type="button">Get Player Information</button> </div> <div class="output"></div> </body></html>
JavaScript Info:
$(document).ready(function () { var textbox = $(".player-number-textbox-input"); var button = $(".player-number-button"); var output = $(".output"); button.click(function () { $.ajax({ url: "Home/GetPlayerInformation", data: { PlayerNumber: textbox.val() }, success: function (stringResponse) { response = JSON.parse(stringResponse); output.html(response.PlayerName); } }); });});
CSS Info:
.player-number-label { padding: 10px; display: inline-block; } .player-number-textbox { padding: 10px; display: inline-block; } .player-number-button { padding: 20px; display: block; } .output { width: 300px; height: 75px; border: 1px solid red; margin-left: 20px; }Explanation / Answer
Here Im writting simple html and jquery code.
You can merge this code into your code easily.
<body>
<input type="text" id="playerNo" name="playerNo" />
<button type="button">Get Player Information</button>
<div id="playerInfo"></div><!-- to print player info use CSS whatwhere you want-->
<div id="errorInfo"></div> <!-- if player does not exist or in any other error case -->
</body>
<script>
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>");
}
});
}
</script>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.