jquery cookie - How can I implement my default html into the json portion of gridster? -


i'm experimenting gridster.js , jquery-cookie store layout , have following implementation working. displays json , i'd have default/display html content.

i'm sure solution simple/elegant i'm new json , gridster. believe need edit the, "if ($.cookie("grid-data") == null) { var json =..."

i know can change values, sizes, want know how put html content in.

hoping steer me in right direction. have far.

<section class="demo">         <div id="main" class="gridster">           <ul>              <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">my content</li>             <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">some text</li>             <li data-row="3" data-col="2" data-sizex="2" data-sizey="1">maybe image , text</li>             <li data-row="1" data-col="2" data-sizex="2" data-sizey="2">maybe image</li>              <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">more content</li>             <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>             <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>             <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>             <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>              <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>             <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>           </ul>         </div>     </section> <script> var gridster; $(function ()  {     $('<div id="main" class="gridster"></div>').appendto('section');      if ($.cookie("grid-data") == null) {         var json = [{             "id": "foo",             "html": "<h3>my content<\/h3>", //testing failed             "col": 1,             "row": 1,             "size_y": 2,             "size_x": 3         }, {             "id": "bar",             "col": 4,             "row": 1,             "size_y": 2,             "size_x": 2         },          {             "id": "tar",             "col": 6,             "row": 1,             "size_y": 2,             "size_x": 2         },           {             "id": "boo",             "col": 1,             "row": 3,             "size_y": 2,             "size_x": 3         }, {             "id": "aar",             "col": 4,             "row": 3,             "size_y": 2,             "size_x": 2         },          {             "id": "dar",             "col": 6,             "row": 3,             "size_y": 2,             "size_x": 2         }          ];     }     else     {         var json = json.parse($.cookie("grid-data"));     }     var grid = $("#main").gridster({     draggable: {         stop: function(event, ui){              $.cookie("grid-data", json.stringify(grid.serialize()));         }     },         widget_margins: [10, 10],         widget_base_dimensions: [140, 140],         max_size_y: 3,         serialize_params: function ($w, wgd) {             return {                 id: wgd.el[0].id,                 html: wgd.html,                 col: wgd.col,                 row: wgd.row,                 size_y: wgd.size_y,                 size_x: wgd.size_x             }         }     }).data('gridster');      (i = 0; < json.length; i++) {         grid.add_widget(             '<div id="' + json[i]['id'] + '"></div>',         json[i]['size_x'],         json[i]['size_y'],         json[i]['html'],         json[i]['col'],         json[i]['row']);     } }); </script>

you must asking add data of page dynamically, must use this

var grid = $("#main").gridster();//grid holding reference of gridster object grid.add_widget('<li class="new"><h1>the html of widget...</h1></li>', 2, 1); //grid.add_widget( html, [size_x], [size_y], [col], [row] )

like if json array iterate if add_widget this

for(var index=0;index<json.length;index++) {     grid.add_widget('<li class="new" id="'+json[index].id+'">'+json[index].html+'</li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row); }

Comments

Post a Comment

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

i'm learning java , have question regarding reading file want read numbers file contains strings well. here example of file: 66.56 "3 java 3-43 5-42 2.1 1 and here coding: public class test { public static void main (string [] args){ if (0 < args.length) { file x = new file(args[0]); try{ scanner in = new scanner( new fileinputstream(x)); arraylist<double> test = new arraylist<>(); while(in.hasnext()){ if(in.hasnextdouble()){ double f=in.nextdouble(); test.add(f);} else {in.next();} } catch(ioexception e) { system.err.println("exception during reading: " + e); } } my problem add 66.56,2.1 , 1 doesn't add 3 after "3 or ignores 3-43 , 5-42 can tell me how skip strings , add doubles here? thanks all said 3 ie; "3, 3-43 , 4-42 strings either u read string , split , check number @ " , - or put in space between characters , integers. jvm after compilation tre...
Read more

rewrite - Trouble with Wordpress multiple custom querystrings -

i'm working on adding multiple querystring , doesn't seem work. i've found codes seems work others might i'm missing something. i want like: http://mydomain.com/board/?getyear=2013&getsometext2=sometext to http://mydomain.com/board/2013/sometext/ i added code below functions.php file. doesn't seem work should though. this works. echoing querystring gets both variable without problem. http://mydomain.com/board/2013/sometext/ but doesn't. tested querystring vis isset() seems nothing being set/get http://mydomain.com/board/2013/ function add_query_vars($vars) { $vars[] = "getyear"; $vars[] = "getsometext2"; return $vars; } add_filter('query_vars', 'add_query_vars'); function add_rewrite_rules($arules) { $anewrules = array('board/([^/]+)/([^/]+)/?$' => 'index.php?pagename=board&getyear=$matches[1]&getsometext2=$matches[2]'); $arules = $a...
Read more