I have an app for a bowling game. The players names are listed along with their scores. When the "roll" button is pressed, the scores will update. Problem is, the updated score will not appear on screen unless the page is refreshed.
If anyone can help, I would really appreciate it!
This is what the main play page looks like:
Welcome players!
1: John: 0
2: Mark: 0
3: Paolo: 0
Pins :
Roll: 0
this is the UserController.java file:
package ajaxbowlgame;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.validation.ValidationUtils;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class UserController {
GameProperties gameProps = new GameProperties();
int htmlPlayerNo = 0;
private List<Player> players = new ArrayList<Player>();
private int currPlayScore;
private int roll;
private boolean showStrike;
private int playerNo = 0;
@RequestMapping(value="/AddUser.htm",method=RequestMethod.GET)
public String showForm(){
return "AddUser";
}
@RequestMapping(value="/AddUser.htm",method=RequestMethod.POST)
public @ResponseBody JsonResponse addUser(@ModelAttribute(value="player") Player player, BindingResult result){
JsonResponse res = new JsonResponse();
ValidationUtils.rejectIfEmpty(result, "name", "Name can not be empty.");
if(!result.hasErrors()){
htmlPlayerNo++;
player.setHtmlPlayerNo(htmlPlayerNo);
players.add(player);
res.setStatus("SUCCESS");
res.setResult(players);
}else{
res.setStatus("FAIL");
res.setResult(result.getAllErrors());
}
return res;
}
@RequestMapping(value = "/play.htm", method = {RequestMethod.POST})
public String playPage(GameProperties gamePropsIn, ModelMap model) {
players.get(playerNo).setScore(currPlayScore);
players.get(playerNo).setRoll(roll +1);
gameProps.setRoll(roll);
model.addAttribute("players", players);
Player currPlay = players.get(playerNo);
int pins = gamePropsIn.getPins();
currPlay.getGame().roll(pins);
if (pins == 10) {
showStrike = true;
} else {
showStrike = false;
}
currPlayScore = currPlay.getGame().score();
roll = currPlay.getGame().getRoll();
model.addAttribute("roll", roll);
model.addAttribute("pins", pins);
if (playerNo < players.size()-1){
playerNo++;
}else{
playerNo = 0;
}
if (showStrike ) {
gameProps.setStrikeMessage("Well done, you hit a strike!");
} else {
gameProps.setStrikeMessage("");
}
return "play";
}
}
And this is play.jsp:
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Ajax-JQuery Bowling</title>
<script src="/ajaxbowlgame/js/jquery.js"></script>
<script type="text/javascript">
function rollBall() {
var pins = $('#pins').val();
$.ajax({
type: "POST",
url: "/ajaxbowlgame/play.htm",
data: "pins=" + pins,
success: function(response){
// we have the response
$('#pins').val('');
},
error: function(e){
alert('Error: ' + e);
}
});
}
</script>
</head>
<body>
<h2>Welcome players!</h2>
<table id = "playerslist">
<c:forEach var="player" items="${players}">
<tr><td>${player.htmlPlayerNo}:</td><td>${player.name}:</td><td id="plScore">${player.score}</td></tr>
</c:forEach>
</table>
<table>
<tr><td> Pins: </td><td> <input id="pins"><br/></td></tr>
<tr><td colspan="1"><input type="button" value="Roll" onclick="rollBall()"><br/></td></tr>
</table>
Roll: <span id="roll">0</span>
<h2> ${command.strikeMessage}</h2>
</body>
</html>
