jquery problem in IE with dynamic dropdown selection - javascript

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);
}
}
});
}

Related

Pulling a Usable Link out of a JSON Object

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)
}
});

Can't pass an array and a string into controller with JavaScript

I hope someone can help me with this issue that I have.
I'm trying to pass an array into controller with JavaScript like this:
$('#send') .lick(function () {
var items = {};
var grid = $('#grid') .ata('kendoGrid');
var selectedElements = grid .elect();
for (var j = 0; j < selectedElements .ength; j++) {
var item = grid .ataItem(selectedElements[j]);
items['grid[' + j + '] .arecidoCodigo'] = item .arecidoCodigo;
}
$ .jax({
type: "POST",
data: items,
url: '#Url .ction("Index", "Busqueda")',
success: function (result) {
console .og(result);
}
})
})
This works fine.
But when I tried to pass another value, in this case a string data, the array is sending null into the controller but the string value is not null.
This is my code when I tried to send another value, in this case the array and the string data:
$('#send') .lick(function () {
var items = {};
var grid = $('#grid') .ata('kendoGrid');
var selectedElements = grid .elect();
var enviarDest = $('#destinatario') .al();
for (var j = 0; j < selectedElements .ength; j++) {
var item = grid .ataItem(selectedElements[j]);
items['grid[' + j + '] .arecidoCodigo'] = item .arecidoCodigo;
}
var postData = { marcas: items, destinatario: enviarDest };
$ .jax({
type: "POST",
data: postData,
url: '#Url .ction("Index", "Busqueda")',
success: function (result) {
console .og(result);
}
})
})
And this is the code of my controller:
public async Task<ActionResult> Index(List<MarcaParecido> marcas, string destinatario)
{
..
}
Here is when I receive the list marcas null and the string destinatario is not null, I don't know what am I doing wrong.
Try using JsonResult instead of async in your controller:
public JsonResult Index(List<MarcaParecido> marcas, string destinatario)
{ .. }

Javascript timer calls a Code behind method only once

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);

CSV-import via jquery - variable locked in

i use a nice code to import csv data.
However, my variable seems to be somehow caught within the function so i cannot access it from other places in my .js ...
see my two alert functions in the code below.
Code copied from post(How to read data From *.CSV file using javascript?)
$(document).ready(function () {
$.ajax({
type: "GET",
url: "../recipes.csv",
dataType: "text",
success: function (data) {
processData(data);
}
});
});
function processData(allText) {
var allTextLines = allText.split(/\r\n|\n/);
var headers = allTextLines[0].split(',');
var lines = [];
for (var i = 0; i < allTextLines.length; i++) {
var data = allTextLines[i].split(',');
if (data.length == headers.length) {
var tarr = [];
for (var j = 0; j < headers.length; j++) {
tarr.push(data[j]);
}
lines.push(tarr);
}
}
dataArray = (lines + "").split(';');
alert(dataArray[1]); // here it works
}
alert(dataArray[1]); // here it doesn't work: "ReferenceError: dataArray is not defined"
The dataArray variable that the function processData(...) uses exists only inside the function.
In order to use it outside the function you need to declare it. For example:
var dataArray = {};
function processData(allText) {
var allTextLines = allText.split(/\r\n|\n/);
var headers = allTextLines[0].split(',');
var lines = [];
for (var i=0; i<allTextLines.length; i++) {
var data = allTextLines[i].split(',');
if (data.length == headers.length) {
var tarr = [];
for (var j=0; j<headers.length; j++) {
tarr.push(data[j]);
}
lines.push(tarr);
}
}
dataArray = (lines + "").split(';');
alert(dataArray[1]);
}
$(document).ready(function () {
$.ajax({
type: "GET",
url: "../recipes.csv",
dataType: "text",
success: function (data) {
processData(data);
alert(dataArray[1]); // here it will return the data from processData(...)
}
});
});
What is the scope of variables in JavaScript?. Here is an interesting thread for variable scope in JavaScript.

Get closest elments of corresponding list of elements in javascript/jquery

I have a list of elements:
var checked_inputs = $('.select-feedback:checked');
Now i want to get their closest division element whose class is 'MessageRow'. I have done this trick to get it:
$('.radiusRight').click(function(event) {
event.preventDefault();
var feedbacks = new Array();
var checked_inputs = $('.select-feedback:checked');
for (var i=0; i<checked_inputs.length; i++) {
feedbacks.push($(checked_inputs[i]).closest('.messageRow').attr('id'));
}
var feedback_ids = feedbacks.map(function(val) { return val.split('-')[1] });
var feedback_divs = feedbacks.map(function(val) { return '#' + val }).join(',');
$.ajax({
url: '/business/feedback/delete/',
type: 'POST',
data: {'ids': feedback_ids},
success: function(data) {
$(feedback_divs).fadeOut();
}
})
})
Is there any better way to accomplish this? Or is this a good way? Thanks in advance.
Your way is a little bit complicated - imho...
$('.radiusRight').click(function(event) {
event.preventDefault();
var feedback_ids = $(".select-feedback:checked").map(function() {
var id = $(this).closest(".messageRow").attr("id");
return id.split("-")[1];
});
$.ajax({
url: "/business/feedback/delete",
type: "POST",
data { "ids": feedback_ids },
success: function() {
$("#" + feedback_ids.join(", #")).fadeOut();
}
});
})

Categories