[SOLVED] Gridster reading positions from Cookie

Gridster reading positions from Cookie

I am new to PHP, JavaScript, and JQuery. Just thought it would be fun to build a Football Scoreboard. So after doing some research I came up with this. I'm sure there is a better way, but I have just been borrowing ideas from lots of articles at this site. I've run into a hurdle with Gridster. I believe it is writing the cookie correctly with my table positions. I've put the tables inside the listed items, because I couldn't get tables to work when defined as the widget_selector.

Here is my code. What do I need to do in order to read the cookie's position data and order my tables accordingly? Thanks very much for the help!

<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/jquery.gridster.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<title>Scores</title>

</head>
<body>

<script type="text/javascript" src="assets/jquery.js"></script>
<script type="text/javascript" src="assets/jquery.gridster.js" charster="utf-8"></script>
<script type="text/javascript" src="assets/jquery.cookie.js"></script>
<script type="text/javascript">
var gridster;

$(function() {
gridster = $(".gridster ul").gridster({
widget_margins: [5, 5],
widget_base_dimensions: [140, 110],
min_cols: 2,
max_cols: 10,
serialize_params: function($w, wgd) {
    return {
    id: wgd.el[0].id,
    col: wgd.col,
    row: wgd.row,
    size_y: wgd.size_y,
    size_x: wgd.size_x          
    }
},
draggable: {
    stop: function(event, ui) {
    var positions = JSON.stringify(gridster.serialize());
    console.log(positions);
    $.cookie("grid-data", positions, { expires : 7 });
    }
}
}).data('gridster');    
});
</script>

<?php 
//this array contains sports and their URLs 
$sports = array( 
"NFL" => "http://wu.apple.com/nfl/bottomline/xml/scores",); 

// load logo files
$nfllogoxml = simplexml_load_file('nfllogo.xml');

foreach ( $sports as $sport => $url ) { 
//get the page pointed to by $url 
$simplexml = simplexml_load_file($url);
echo "<h2>".$sport."</h2>";
echo "<div id='gamescores' class='gridster'>";
echo "<ul>";
// If game is in progress, change URL given by feed to point to boxscore
foreach ($simplexml->GAME as $game){

    echo "<li id='".$game->GAMEID."' data-row='1' data-col='1' data-sizex='2' data-sizey='1'>";

    if ($game->STATUSID == 2 || $game->STATUSID ==22 || $game->STATUSID ==23){
        $boxurl = preg_replace("/scoring/", "boxscore", $game->URL);
        echo "<table id='".$game->GAMEID."' cols='4' style='background-color:#CCF5CC' ondblclick=\"this.className='tableclick';window.location='".$boxurl."'\">";
    }
    elseif ($game->STATUSID == 7){
        echo "<table id='".$game->GAMEID."' cols='4' style='background-color:#CCF5CC' ondblclick=\"this.className='tableclick';window.location='".$boxurl."'\">";
    }
    elseif ($game->STATUSID == 3){
        echo "<table id='".$game->GAMEID."' cols='4' style='background-color:#BCBCCA' ondblclick=\"this.className='tableclick';window.location='".$game->URL."'\">";
    }
    else {
        echo "<table id='".$game->GAMEID."' cols='4' ondblclick=\"this.className='tableclick';window.location='".$game->URL."'\">";
        }
    echo "<col width='30'>";
    echo "<col width='180'>";
    echo "<col width='30'>";
    echo "<col width='60'>";
    echo "<th colspan='3' align='center'>";
    echo "<b>Matchup #".$game->attributes()->count."</b>";
    echo "</th>";
    echo "<th align='right'><b>Bets</b></th>";
    echo "<tr>";
    if (strpos($sport,'NFL') !==false){
        $gamestatus=$game->STATUSID;
        $teamnamev=$game->AWAY->TEAM;
        $teamnameh=$game->HOME->TEAM;

        //  Get NFL Team Icon from icon XML file stored locally
        $iconurlv = $nfllogoxml->xpath(" /TRM/teamRecord/iconURL[../team/text() = '".$teamnamev."'] ");
        $iconurlh = $nfllogoxml->xpath(" /TRM/teamRecord/iconURL[../team/text() = '".$teamnameh."'] ");
        foreach ($iconurlv as $iconpathv){
            echo "<td><img src='".$iconpathv."' height='25' width='25'></img></td>";
            }                   
        echo "<td>".$game->AWAY->TEAM."</td>";
        echo "<td>".$game->AWAY->SCORE."</td>";
        echo "</tr>";
        echo "<tr href='".$game->URL."'>";
        foreach ($iconurlh as $iconpathh){
            echo "<td><img src='".$iconpathh."' height='25' width='25'></img></td>";
            }               
        echo "<td>".$game->HOME->TEAM."</td>";
        echo "<td>".$game->HOME->SCORE."</td>";
        echo "</tr>";
        echo "<tr>";
        if ($game->STATUSID == 7){
            echo "<td colspan='3'>DELAYED</td>";
            }
        elseif ($game->STATUSID == 23){
            echo "<td colspan='3'>HALFTIME</td>";
            }
        else{
            echo "<td colspan='3'>".$game->STATUS."</td>";
            }
        echo "</tr>";       
        echo "</table>";
        echo "</li>";

        }
}
        echo "</ul>";
        echo "</div>";
echo "<p class=\"clear\">";
}

?>

</body>
</html>

Solution

I figured out a way to do this with the following code. Seems to work in case anyone is interested...

if ($.cookie("grid-data") !== null) {
    var scorepos = JSON.parse($.cookie("grid-data"));   
}

for (var i = 0; i < scorepos.length; i++){
    var position = scorepos[i];
    var list = document.getElementsByTagName("ul")[0]
    list.getElementsByTagName("li")[i].setAttribute("data-row",position.row);
    list.getElementsByTagName("li")[i].setAttribute("data-col",position.col);
}