I've am trying to create a dynamic heatmap by calling code behind methodw that supplies the data to the heatmap. I have a timer that calls the function GetNewHeatMapDataTable(). The function fetches new data and pushes it to an existing array (pointArray) to dynamaically update the map. The timer runs as expecte. However, the value of the variable newheatmapdata does not change and the function only calls the code behind method GetIAHeatMapDataTable("XXXXXXX") only once. I'm not sure what I am doing wrong. I'm hoping someone can point me in the right direction.
Below is a snippet of my code
var heatmapData = [];
function GetDataTableFromCodeBehind() {
heatmapData = <%=GetIAHeatMapDataTable("XXXXXXX")%>;
}
var pointArray = new google.maps.MVCArray(heatmapData);
var heatmapLayer = new google.maps.visualization.HeatmapLayer({
data: pointArray,
dissipating: false,
radius: 0.00001
});
function GetNewHeatMapDataTable() {
var newheatmapdata = []
newheatmapdata = <%=GetIANewHeatMapDataTable("XXXXXXX")%>;
if (newheatmapdata.length > 0){
for (i = 0; i < newheatmapdata.length; i++) {
pointArray.push.apply(pointArray, newheatmapdata);
}
}
}
setInterval(function() {GetNewHeatMapDataTable();},3000);
Thanks in advance.
SOLVED: Thank you very much Stephen. I did just as you suggested. Worked like a charm. This is my new code for fetching new data and pushing it to the heatmap
function fetchNewData() {
$.ajax({
type: "POST",
url: "Webform1.aspx/GetIANewHeatMapDataTable",
data: JSON.stringify({ level: "XXXXXXX" }),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function(data) {
var newheatmapdata = [] ;
newheatmapdata = eval('(' + data.d + ')');
if (newheatmapdata.length > 0){
for (i = 0; i < newheatmapdata.length; i++) {
pointArray.push.apply(pointArray, newheatmapdata);
heatmapLayer.setData(pointArray);
}
}
},
});
}
setInterval(function() {fetchNewData();},1000);
Related
I need to figure out how to have a link that I pull from a JSON object an ACTUAL link that the user can click and follow to the site instead of just text. I feel like it's gotta be a quick fix, but I can't seem to figure it out! Thanks for the help!!
function sqoot(URL) {
$.ajax({
url: URL,
method: "GET"
}).done(function(response) {
var deals = response.deals
var untrackedURL = $("#untrackedURL");
var couponInfo = $("#info");
for (i = 0; i < deals.length; i++) {
var newUntrackedURL = $("<a href='deals[i].deal.untracked_url'>" + deals[i].deal.untracked_url + "</a>");
couponInfo.append(newUntrackedURL)
}
})
};
Assuming your fetched data is correctly used, here's why your link doesn't work : the href is actually deals[i].deal.untracked_url instead of its content.
try this instead :
function sqoot(URL) {
$.ajax({
url: URL,
method: "GET"
}).done(function (response) {
var deals = response.deals
var untrackedURL = $("#untrackedURL");
var couponInfo = $("#info");
for (i = 0; i < deals.length; i++) {
var newUntrackedURL = $('' + deals[i].deal.untracked_url + "");
couponInfo.append(newUntrackedURL)
}
})
};
Without the generated JSON, I can't help you further if this solution doesn't helps.
Look like maybe you had a typo:
'deals[i].deal.untracked_url' should be 'deals["+ i +"].deal.untracked_url'
function sqoot(URL) {
$.ajax({
url: URL,
method: "GET"
}).done(function (response) {
var deals = response.deals
var untrackedURL = $("#untrackedURL");
var couponInfo = $("#info");
for (i = 0; i < deals.length; i++) {
var newUntrackedURL = $("<a href='deals["+ i +"].deal.untracked_url'>" +
deals[i].deal.untracked_url + "</a>");
couponInfo.append(newUntrackedURL)
}
});
Scratch that - you want it to pull the value not write out "deals[i].deal.untracked_url." To do that you do the below.
function sqoot(URL) {
$.ajax({
url: URL,
method: "GET"
}).done(function (response) {
var deals = response.deals
var untrackedURL = $("#untrackedURL");
var couponInfo = $("#info");
for (i = 0; i < deals.length; i++) {
var newUntrackedURL = $("<a href='"+deals[i].deal.untracked_url+"'>" +
deals[i].deal.untracked_url + "</a>");
couponInfo.append(newUntrackedURL)
}
});
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "MapImages.aspx/GetCctvData",
data: "{}",
dataType: "json",
success: function (data) {
var markers = '';
var c = 0;
for (var j = 0; j < data.d.length; j++) {
markers = markers + '{'+
' "title":'+'"'+ data.d[j].Name+'"'+','+ '"lat":'+'"'+data.d[j].Lat +'"'+','+' "lng":'+'"'+data.d[j].Lng +'"'+','+
'"img":' +'"'+ data.d[j].Url +'"'+ '}';
{
if(c!=97)
markers = markers +',';
}
c++;
}
markers= '[' + markers + ']';
},
error: function (result) {
alert(data.d[i].Name);
}
});
</script>
The output of markers consists such as:
"[{
"title":"Simpang Pulai KM285.2",
"lat":"4.5425", "lng":"101.141",
"img":"http://plus.aviven.net/push/images/cctv/c3781ad96bde24b6a588c875ec58a57c.jpg"
}]"
Required output is:
[{
"title":"Simpang Pulai KM285.2",
"lat":"4.5425", "lng":"101.141",
"img":"http://plus.aviven.net/push/images/cctv/c3781ad96bde24b6a588c875ec58a57c.jpg"
}]
The type of markers is string, that's why you are getting "" surrounding the object. Your required output looks like a json array. If you want markers to be a json array then make it an array like below:
var markers = [];
for (var j = 0; j < data.d.length; j++) {
var marker = {
title: data.d[j].Name,
lat: data.d[j].Lat,
lng: data.d[j].Lng,
img: data.d[j].Url
};
markers.push(marker);
}
agree with Toma.Never try to append the json string.When you need it,try to get it from the object, and will be more beautiful and clear and efficient.
Just parse the returned data from server.
using:
$.parseJSON()
Example:
var data = $.parseJSON(data);
I have the following javascript code having class named as PurchaseHistory.
var baseUrl = null;
var parameters = null;
var currentPageNumber = null;
var TotalPages = null;
var PageSize = null;
$(document).ready(function () {
baseUrl = "http://localhost/API/service.svc/GetOrderHistory";
parameters = '{"userId":1 , "page":1 ,"pageSize":4}';
currentPageNumber = 1;
var history = new PurchaseHistory();
history.ajaxCall(parameters);
});
function PurchaseHistory() {
/* On ajax error show error message
-------------------------------------------------*/
this.onAjaxError = function() {
$('#error').text('No internet connection.').css('color', 'red');
}
/* Ajax call
-------------------------------------------------*/
this.ajaxCall = function (parameters) {
$.support.core = true;
$.ajax({
type: "POST",
url: baseUrl,
data: parameters,
//dataType: 'json',
contentType: "application/json; charset=UTF-8",
error: function () { this.onAjaxError() }
}).done(function (data) {
var json = data.GetOrderHistoryResult;
var jsonObject = $.parseJSON(json);
var history = new PurchaseHistory();
history.populateOrderHistory(jsonObject);
TotalPages = jsonObject.PgCnt;
currentPageNumber = jsonObject.CrntPg;
});
}
this.populateOrderHistory = function(results) {
var rowOutput = "";
var his = new PurchaseHistory();
for (var i = 0; i < results.Results.length; i++) {
rowOutput += this.renderCartList(results.Results[i], 1);
}
}
this.renderCartList = function(res, i) {
var container = $('#prototype-listelement>li').clone();
container.find('.order-date').text(res.OdrDate);
container.find('.item-count').text(res.Qty);
container.find('.total').text(res.Amt);
container.find('.order-id').text(res.OdrId);
$('#mainul').append(container).listview('refresh');
}
this.loadNextPage = function () {
parameters = '{"userId":1 , "page":' + currentPageNumber + 1 + ',"pageSize":4}';
this.ajaxCall(parameters);
}
}
The ajaxCall is made on the ready function of the javascript.
This ajax calls returns Json object with pages information, which includes current page number, total pages and page size.
Currently I am able to display the information on the UI, when the page gets loaded.
My Issue:-
I want to call the ajax method again, on the button click event.
How this can be made possible and where can I store the information obtained from previous ajax call?
For pagination I would create a link that will load more items onto the page, and save a starting number to pass to your data layer. This example loads 20 at a time.
<a class="more" href="#" data-start="0">show more</a>
$("a.more").click(function(e){
e.preventDefault();
var start = $(this).attr('data-start');
$.get('/more-data, { start: start }, function(d){
var next = start+20;
$("a.more").attr('data-start', next);
//process results here, do something with 'd'
});
});
i have many pieces of code like:
<script type="text/javascript">
dojo.query("body").delegate("#input0 > select.estatistica", "onchange", function(evt){
dojo.xhrPost({
url: "drop2.php",
handleAs: "json",
postData: "data=" + $(this).val(),
preventCache: true,
load: function(json) {
$m0 = [];
for (var i = 1; i < 10; i++) {
$m0.push(parseFloat(json[i]["valor" + i]));
}
dojo.addOnLoad(refreshChar0);
}
});
});
</script>
<script type="text/javascript">
dojo.query("body").delegate("#input1 > select.estatistica", "onchange", function(evt){
dojo.xhrPost({
url: "drop2.php",
handleAs: "json",
postData: "data=" + $(this).val(),
preventCache: true,
load: function(json) {
$m1 = [];
for (var i = 1; i < 10; i++) {
$m1.push(parseFloat(json[i]["valor" + i]));
}
dojo.addOnLoad(refreshChart1);
}
});
});
</script>
i tried this loop, but i am not sure about the script. Probably i have syntax errors.
<script type="text/javascript">
for(x=0; x<10; x++) {
dojo.query("body").delegate("'#input'+x+'> select.estatistica'", "onchange", function(evt) {
dojo.xhrPost({
url: "drop2.php",
handleAs: "json",
postData: "data=" + $(this).val(),
preventCache: true,
load: function(json) {
$m+x = [];
for (var i = 1; i < 10; i++) {
$m+x.push(parseFloat(json[i]["valor" + i]));
}
dojo.addOnLoad(refreshChart+x);
}
});
});
}
</script>
thanks
to create a variable name dynamicaly you have to use bracket notation
e.g: this['$m'+x] or window['$m'+x] will create a variable called $m1 where x = 1
try:
window['foo' + 'bar'] = 'hello';
alert(foobar);
By the looks of $m+x I'm guessing that you're trying to create a variable dynamically such as $m0 to $m9 based on iterating from 0 - 10. You can't do that in Javascript as far as I'm aware it will give you an error. I suggest instead of creating a dynamic variable sort of thing why not fill the values inside an array based on the indexes of x.
Here's something:
var $m = [];
for(x=0; x<10; x++)
{
// some of your codes here ...
// make $m[x] an array
if (typeof $m[x] == "undefined")
$m[x] = [];
// some of your codes here...
for (var i = 1; i < 10; i++)
{
// of course you need to change this to what you need to push
$m[x].push(i);
}
}
console.log($m[0]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
So basically $m will be an array with arrays. I don't know if my guess is right but I hope it gives an idea.
Hi jquery/javascript gurus,
I am trying to use jquery ajax function to populate the dropdown, it works fine with FF, but IE give the javascript error snow below in the scrnshot. howver IE does get the data and selects it.
Am i doing something wrong?
function getAjaxFunction(thisval, curval) {
$.ajax({
type: "POST",
url: "lookup.do?param="+thisval,
cache: false,
success: function(data) {
var values = data;
var vals = values.split(";");
$("#dropdown").find("option").remove().end();
for (var i = 0; i < vals.length; i++) {
var parts = vals[i].split(":");
$("#dropdown").append($('<option />').val(parts[0]).text(parts[1]));
}
$("#dropdown").val(curval);
}
});
}
You say val(curval) at the end of your function, but your function parameter is named currval with two Rs.
This worked!
function getAjaxFunction(thisval, curval) {
$.ajax({
type: "POST",
url: "lookup.do?param="+thisval,
cache: false,
success: function(data) {
var values = data;
var vals = values.split(";");
$("#dropdown").find("option").remove().end();
for (var i = 0; i < vals.length; i++) {
var parts = vals[i].split(":");
$("#dropdown").append($('<option />').val(parts[0]).text(parts[1]));
}
try {
$("#dropdown").val(curval);
} catch(ex) {
setTimeout("$('#dropdown').val('"+curval+"')",1);
}
}
});
}