Databases
StackOverflow2013
Postsdbo
POGridster reading positions from Cookie
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGridster reading positions from Cookie
    text
    copied!<p>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.</p> <p>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!</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="assets/css/jquery.gridster.css"&gt; &lt;link rel="stylesheet" type="text/css" href="assets/css/styles.css"&gt; &lt;title&gt;Scores&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script type="text/javascript" src="assets/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="assets/jquery.gridster.js" charster="utf-8"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="assets/jquery.cookie.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; 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'); }); &lt;/script&gt; &lt;?php //this array contains sports and their URLs $sports = array( "NFL" =&gt; "http://wu.apple.com/nfl/bottomline/xml/scores",); // load logo files $nfllogoxml = simplexml_load_file('nfllogo.xml'); foreach ( $sports as $sport =&gt; $url ) { //get the page pointed to by $url $simplexml = simplexml_load_file($url); echo "&lt;h2&gt;".$sport."&lt;/h2&gt;"; echo "&lt;div id='gamescores' class='gridster'&gt;"; echo "&lt;ul&gt;"; // If game is in progress, change URL given by feed to point to boxscore foreach ($simplexml-&gt;GAME as $game){ echo "&lt;li id='".$game-&gt;GAMEID."' data-row='1' data-col='1' data-sizex='2' data-sizey='1'&gt;"; if ($game-&gt;STATUSID == 2 || $game-&gt;STATUSID ==22 || $game-&gt;STATUSID ==23){ $boxurl = preg_replace("/scoring/", "boxscore", $game-&gt;URL); echo "&lt;table id='".$game-&gt;GAMEID."' cols='4' style='background-color:#CCF5CC' ondblclick=\"this.className='tableclick';window.location='".$boxurl."'\"&gt;"; } elseif ($game-&gt;STATUSID == 7){ echo "&lt;table id='".$game-&gt;GAMEID."' cols='4' style='background-color:#CCF5CC' ondblclick=\"this.className='tableclick';window.location='".$boxurl."'\"&gt;"; } elseif ($game-&gt;STATUSID == 3){ echo "&lt;table id='".$game-&gt;GAMEID."' cols='4' style='background-color:#BCBCCA' ondblclick=\"this.className='tableclick';window.location='".$game-&gt;URL."'\"&gt;"; } else { echo "&lt;table id='".$game-&gt;GAMEID."' cols='4' ondblclick=\"this.className='tableclick';window.location='".$game-&gt;URL."'\"&gt;"; } echo "&lt;col width='30'&gt;"; echo "&lt;col width='180'&gt;"; echo "&lt;col width='30'&gt;"; echo "&lt;col width='60'&gt;"; echo "&lt;th colspan='3' align='center'&gt;"; echo "&lt;b&gt;Matchup #".$game-&gt;attributes()-&gt;count."&lt;/b&gt;"; echo "&lt;/th&gt;"; echo "&lt;th align='right'&gt;&lt;b&gt;Bets&lt;/b&gt;&lt;/th&gt;"; echo "&lt;tr&gt;"; if (strpos($sport,'NFL') !==false){ $gamestatus=$game-&gt;STATUSID; $teamnamev=$game-&gt;AWAY-&gt;TEAM; $teamnameh=$game-&gt;HOME-&gt;TEAM; // Get NFL Team Icon from icon XML file stored locally $iconurlv = $nfllogoxml-&gt;xpath(" /TRM/teamRecord/iconURL[../team/text() = '".$teamnamev."'] "); $iconurlh = $nfllogoxml-&gt;xpath(" /TRM/teamRecord/iconURL[../team/text() = '".$teamnameh."'] "); foreach ($iconurlv as $iconpathv){ echo "&lt;td&gt;&lt;img src='".$iconpathv."' height='25' width='25'&gt;&lt;/img&gt;&lt;/td&gt;"; } echo "&lt;td&gt;".$game-&gt;AWAY-&gt;TEAM."&lt;/td&gt;"; echo "&lt;td&gt;".$game-&gt;AWAY-&gt;SCORE."&lt;/td&gt;"; echo "&lt;/tr&gt;"; echo "&lt;tr href='".$game-&gt;URL."'&gt;"; foreach ($iconurlh as $iconpathh){ echo "&lt;td&gt;&lt;img src='".$iconpathh."' height='25' width='25'&gt;&lt;/img&gt;&lt;/td&gt;"; } echo "&lt;td&gt;".$game-&gt;HOME-&gt;TEAM."&lt;/td&gt;"; echo "&lt;td&gt;".$game-&gt;HOME-&gt;SCORE."&lt;/td&gt;"; echo "&lt;/tr&gt;"; echo "&lt;tr&gt;"; if ($game-&gt;STATUSID == 7){ echo "&lt;td colspan='3'&gt;DELAYED&lt;/td&gt;"; } elseif ($game-&gt;STATUSID == 23){ echo "&lt;td colspan='3'&gt;HALFTIME&lt;/td&gt;"; } else{ echo "&lt;td colspan='3'&gt;".$game-&gt;STATUS."&lt;/td&gt;"; } echo "&lt;/tr&gt;"; echo "&lt;/table&gt;"; echo "&lt;/li&gt;"; } } echo "&lt;/ul&gt;"; echo "&lt;/div&gt;"; echo "&lt;p class=\"clear\"&gt;"; } ?&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload