JSP, Java Beans, How to remember position

Question

For an assignment in "Web Engineering" we have to program a Web Application game with JSP, Servlets and Java Beans. The algorithms for the game, using a Servlet for the Control, JSP for the Model/View and Beans for the Data works already. What I have a Problem now is the visualization, the JQuery/Javascript function.

Basically I have a list with 7 fields, to which the cars can be appended to. (cars are spans) It is a dicing game, each round you dice and move fields forward.

I am experiencing the following problem, which I find hard to solve:

Of course at the beginning at the game the cars (spans) are appended to the starting field, but i dont know how to save the position of the car if it moves forward. Everytime the JSP is refreshed at the beginning the cars will be at the start field. What I tried already is to save the old position of the car in java beans and make an append to the right field in Jquery when the page loads, but somehow this doesnt work. The only thing I came up with is saving the whole code of the playfield in javabeans, but I don`t think thats an optimal solution, maybe somebody has a better idea, or know why the appendTo won't work?

Heres the code: HTML

                    <div class="field">
                        <h2 class="accessibility">Playfield</h2>
                        <ol id="road">
                            <li id="start_road">
                                <span class="accessibility">Startingfield</span>
                                <span id="player1">
                                    <span class="accessibility"><em>Player 1</em></span>
                                </span>
                                <span id="player2">
                                    <span class="accessibility"><em>Player 2</em></span>
                                </span>
                            </li>
                            <li class="empty_road" id="road_1">
                                <span class="accessibility">Field 2</span>
                            </li>
                            <li class="oil_road" id="road_2">
                                <span class="accessibility">Field 2</span>
                            </li>
                            <li class="empty_road" id="road_3">
                                <span class="accessibility">Field 2</span>
                            </li>
                            <li class="empty_road" id="road_4">
                                <span class="accessibility">Field 2</span>
                            </li>
                            <li class="oil_road" id="road_5">
                                <span class="accessibility">Field 2</span>
                            </li>
                            <li id="finish_road">
                                <span class="accessibility">Goalfield</span>
                            </li>
                        </ol>
                    </div>

As you can see the spans are in the startfield everytime the page reloads and thats the problem. Here the Jquery function:

$(document).ready(function() {
                $("player1").appendTo("<%= game.getoldPlayer1() %>");
                $("player2").appendTo("<%= game.getoldPlayer2() %>");
                prepareAnimation();
                $("#player1").fadeOut(700, function() {
                    $("#player1").appendTo("<%= game.getPlayer1() %>");
                    $("#player1").fadeIn(700);
                });
                $("#player2").delay(1400).fadeOut(700, function() {
                    $("#player2").appendTo("<%= game.getPlayer2() %>");
                    $("#player2").fadeIn(700,completeAnimation);                    
                });
});

I tried to fix the problem with the two appendTos at the beginning which should set the cars to their old position, which are saved in the JavaBean, but somehow it doesnt work.

Answer 1

Not sure if this was a typing mistake or not, but you are missing a #.

$("player1").appendTo("<%= game.getoldPlayer1() %>");
$("player2").appendTo("<%= game.getoldPlayer2() %>");

should be

$("#player1").appendTo("<%= game.getoldPlayer1() %>");
$("#player2").appendTo("<%= game.getoldPlayer2() %>");