<html>
<head>
<title></title>
<script type="text/javascript" src="JS/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
/* AJAX JSON DATA is
[
{
"ID": "001",
"PosX": "106",
"PosY": "104"
},
{
"ID": "002",
"PosX": "207",
"PosY": "209"
},
{
"ID": "003",
"PosX": "299",
"PosY": "292"
}
]
*/
var x = 430;
var y = 220;
var ManMap1 = $('#ManMap');
// IT NOT WORKS!!!
$(function () {
$.ajax({
type: "POST",
url: "GetNPosAjaxJson.aspx",
dataType: 'json',
success: function (json_data) { // if success
$.each(json_data, function (index, item) {
var val = item['ID'];
var seq_id = val;
var dev_id = 'dman' + seq_id;
var img_id = 'man' + seq_id;
var TopPos = item['PosY'];
var LeftPos = item['PosX'];
// I don't know What is wrong ???
ManMap1.append('<div id ="' + dev_id + '" > <img src="man.png" width="11px" height="24px" title="' + TopPos + "," + LeftPos + '" id = "' + img_id + '" /> </div>');
$('#' + dev_id).css({ top: (TopPos * 1) + 'px', left: (LeftPos * 1) + 'px', position: 'absolute', 'z-index': 2 });
});
// var Arr = $.parseJSON(json_data);
// alert(Arr[0].ID);
},
error: function (XMLHttpRequest, textStatus, errorThrown) { // if error
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
});
});
// BUT , IT WORKS!!!
// $(function () {
// // $.getJSON('getIDPosXY.aspx', function (data) {
// // $.each(data, function (key, val) {
// var ManMap1 = $('#ManMap');
// var seq_id = 1;
// var dev_id = 'dman' + seq_id;
//
// var img_id = 'man' + seq_id;
// var TopPos = '' + (seq_id * 100) ;
// var LeftPos = '' + (seq_id * 100);
// for (seq_id = 1; seq_id < 4; seq_id++)
// {
// TopPos = '' + (seq_id * 100) ;
// LeftPos = '' + (seq_id * 100);
// dev_id = 'dman' + seq_id;
// ManMap1.append('<div id ="' + dev_id + '" > <img src="man.png" width="11px" height="24px" title="' + TopPos+","+LeftPos + '" id = "' + img_id + '" /> </div>');
//
// $('#'+dev_id).css({ top: (seq_id * 100) + 'px', left: +(seq_id * 100) + 'px', position: 'absolute', 'z-index': 2 });
//
// }
// // });
// // });
// });
</script>
</head>
<body>
<form id="form1" runat="server">
<table width="80%">
<tr>
<td colspan='3'>
</td>
</tr>
<tr>
<td>
</td>
<td width="80%">
<div style="background-image: url(domeun.jpg); width: 800px; height: 549px; background-repeat: no;
z-index: 1; position: relative;" id="ManMap">
</div>
</td>
<td>
</td>
</tr>
<tr>
<td colspan='3'>
</td>
</tr>
<tr>
<td colspan='3'>
</td>
</tr>
</table>
</form>
</body>
</html>