I am trying to get a single widget's(li) JSON/positions in second textarea. i tried a lot to find it but it's not working properly.
I am sharing you my code if anybody can help me out of it. If anybody is not aware of gridster, find the link below as a reference. .html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Respo Temp</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- Script -->
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/jquery.gridster.min.js"></script>
<script type="text/javascript">
var gridster;
$(function(){
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
widget_margins: [5, 5],
helper: 'clone'
}).data('gridster');
//gridster.serialize();
$('.js-seralize').on('click', function() {
var s = gridster.serialize();
$('#log').val(JSON.stringify(s));
})
//gridster.serialize();
$('li').on('click', function($widget) {
var t = gridster.serialize();
$('#log_2').val(JSON.stringify(t));
})
});
</script>
</head>
<body>
<div id="wrapper">
<header id="header">Header</header>
<div id="main_container">
<textarea id="log" class="log"></textarea>
<button class="js-seralize">Serialize</button> <br/> <br/>
<textarea id="log_2" class="log"></textarea>
<button class="js-seralize_2">Serialize</button> <br/> <br/>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><span class="box_no">1</span></li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><span class="box_no">2</span></li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><span class="box_no">3</span></li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"><span class="box_no">4</span></li>
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1"><span class="box_no">5</span></li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1"><span class="box_no">6</span></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><span class="box_no">7</span></li>
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1"><span class="box_no">8</span></li>
<li data-row="3" data-col="3" data-sizex="1" data-sizey="1"><span class="box_no">9</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
I am trying to get a single widget's(li) JSON/positions in second textarea. i tried a lot to find it but it's not working properly.
I am sharing you my code if anybody can help me out of it. If anybody is not aware of gridster, find the link below as a reference. http://gridster/demos/serialize.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Respo Temp</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- Script -->
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/jquery.gridster.min.js"></script>
<script type="text/javascript">
var gridster;
$(function(){
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
widget_margins: [5, 5],
helper: 'clone'
}).data('gridster');
//gridster.serialize();
$('.js-seralize').on('click', function() {
var s = gridster.serialize();
$('#log').val(JSON.stringify(s));
})
//gridster.serialize();
$('li').on('click', function($widget) {
var t = gridster.serialize();
$('#log_2').val(JSON.stringify(t));
})
});
</script>
</head>
<body>
<div id="wrapper">
<header id="header">Header</header>
<div id="main_container">
<textarea id="log" class="log"></textarea>
<button class="js-seralize">Serialize</button> <br/> <br/>
<textarea id="log_2" class="log"></textarea>
<button class="js-seralize_2">Serialize</button> <br/> <br/>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><span class="box_no">1</span></li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><span class="box_no">2</span></li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><span class="box_no">3</span></li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"><span class="box_no">4</span></li>
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1"><span class="box_no">5</span></li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1"><span class="box_no">6</span></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><span class="box_no">7</span></li>
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1"><span class="box_no">8</span></li>
<li data-row="3" data-col="3" data-sizex="1" data-sizey="1"><span class="box_no">9</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
-
so all you want is data pertining to the element clicked on, not whole collection? If so, will need a unique ID for each element to pass to the serialization object using
serialize_paramsoption. Create a demo in jsfiddle. Can use cdn version of plugin files from cdnjs. – charlietfl Commented Dec 25, 2013 at 14:04 - Ok, Here is the jsfiddle link jsfiddle/ajoshi13/LUn8z – Ajoshi Commented Dec 26, 2013 at 5:00
1 Answer
Reset to default 7First you will need a unique ID for each element
You can modify the params object stored for each element using the serialize_params option of plugin
gridster = jQuery(".gridster > ul").gridster({
/* other options*/
serialize_params: function ($w, wgd) {
return {
/* add element ID to data*/
id: $w.attr('id'),
/* defaults */
col: wgd.col,
row: wgd.row,
size_x: wgd.size_x,
size_y: wgd.size_y
}
}
})
Then when you select an item can filter the gridster data array to locate the current ID. I'm using jQuery.grep() in this example
jQuery('.gridster ul li').click(function () {
var id=this.id;
var t = jQuery.grep(gridster.serialize(),function(item){
return item.id==id;
})
jQuery('#log_2').val(JSON.stringify(t));
})
DEMO