I am building a list from an array that I then pass via AJAX using the data parameter.
Everything looks good when I write out my list to the console, but my AJAX method doesn't like it.
for (i = 0; i < carList.length; i++) {
var carData = { "data": { "CarId": '"' + CarList[i] + '"', "PassengerCar": "true", "Automatic":"true" } };
console.log(carData);
}
$.ajax({
dataType: "json",
data: carData
....
Am I doing something improper?
Thanks
var carData = {};
for (i = 0; i < carList.length; i++) {
carData["data_"+i] = {
CarId : CarList[i],
PassengerCar: true,
Automatic : true
};
}
$.ajax({
url : 'someurl.php',
dataType: 'json', //expects returned data from server to be JSON
data : carData
}).done(function(data) {
console.log(data);
});
Related
I have the following javascript using ajax:
function MoveToWeek(weekIndex) {
if (weekIndex == 1) {
var index = #Model.WeekIndex;
index = index+1;
$.ajax({
url: '#Url.Action("RenderCalendar", "Calendar")',
data: { weekIndex: index },
type: "GET",
success: function (data) {
$("#RenderCalendarArea").html(data);
}
});
}
else if (weekIndex == -1) {
var index = #Model.WeekIndex;
index = index+-1;
$.ajax({
url: '#Url.Action("RenderCalendar", "Calendar")',
data: { weekIndex: index},
type: 'GET',
success: function (data) {
$('#RenderCalendarArea').html(data);
}
});
}
}
And the following method in my controller "CalendarController":
[HttpGet]
public ActionResult RenderCalendar(int weekIndex = 0)
{
//..snip
}
I have confirmed the ajax code runs (if I put a javascript breakpoint on the $.ajax line, it'll break there). In addition the values in the ajax method do seem to be set correctly. In the debugger the javascript method has been compiled as such:
function MoveToWeek(weekIndex) {
if (weekIndex == 1) {
var index = 0;
index = index+1;
$.ajax({
url: '/Calendar/RenderCalendar',
data: { weekIndex: index },
type: "GET",
success: function (data) {
$("#RenderCalendarArea").html(data);
}
});
}
else if (weekIndex == -1) {
var index = 0;
index = index+-1;
$.ajax({
url: '/Calendar/RenderCalendar',
data: { weekIndex: index},
type: 'GET',
success: function (data) {
$('#RenderCalendarArea').html(data);
}
});
}
}
However, when this code runs, it does not break inside the method in the controller. Can anyone see why this doesn't work?
This particular partial view didn't use the layout file... which meant it didn't import the jquery lib. That's why it didn't work. Ooops.
I have gotten TypeAhead to work properly with static data and am able to call my controller function properly and get data but it is either A: Not parsing the data properly or B: The TypeAhead is not set up correctly.
JavaScript :
<input type="text" id="itemSearch" data-provide="typeahead" value="#ViewBag.Item" name="itemSearch"/>
$('#itemSearch').typeahead({
source: function (query, process) {
parts = [];
map = {};
$.ajax({
url: '#Url.Action("MakePartsArray")',
dataType: "json",
type: "POST",
data: {query: query},
success: function (data) {
$.each(data, function (i, part) {
map[part.description] = part;
parts.push(part.description);
});
typeahead.process(parts);
}
});
},
updater: function (item) {
selectedPart = map[item].itemNumber;
return item;
},
matcher: function (item) {
if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
return true;
}
},
sorter: function (items) {
return items.sort();
},
highlighter: function (item) {
var regex = new RegExp('(' + this.query + ')', 'gi');
return item.replace(regex, "<strong>$1</strong>");
}
});
Controller :
public ActionResult MakePartsArray(string query)
{
var possibleItem = query.ToLower();
var allItems = Db.PartInventorys.Where(l => l.ItemNumber.Contains(possibleItem)).Select(x => new { itemNumber = x.ItemNumber, description = x.Description });
return new JsonResult
{
ContentType = "text/plain",
Data = new { query, total = allItems.Count(), suggestions = allItems.Select(p => p.itemNumber).ToArray(), matches = allItems, },
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
In my controller I see the data being retrieved correctly and it appears to parse properly but nothing is showing up for my TypeAhead.
Any idea on how to verify exactly where the breakdown is occurring or does anyone see direct fault in my code?
Problem was in the ajax call-
$.ajax({
url: '#Url.Action("MakePartsArray")',
dataType: "json",
type: "POST",
data: {query: query},
success: function (data) {
$.each(data.matches, function (i, part) {
var composedInfo = part.description + ' (' + part.itemNumber + ')';
map[composedInfo] = part;
parts.push(composedInfo);
});
process(parts);
}
});
and in the controller on the return type
return new JsonResult
{
ContentType = "application/json",
Data = new { query, total = allItems.Count(), suggestions = allItems.Select(p => p.itemNumber).ToArray(), matches = allItems },
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
I'm trying to make a simple AJAX call to the Justin TV API, which seems to be failing consistently.
When making the AJAX call with url1, the console reports Object { readyState=4, status=200, statusText="success"}, yet it falls into the error function of the AJAX call. When visiting the URL with my browser, I notice the returned data is [{ ... json ...}].
When making the AJAX call with 'url', the call passes, entering the success function. I notice the returned object is { ...json... }.
How do I get a valid JSON object out of the AJAX request for url1?
Here's a snip of what I'm doing:
var url1 = "http://api.justin.tv/api/stream/list.json"
var url = "https://api.twitch.tv/kraken/streams/";
channelNames = "";
for (channelName in streams)
{
channelNames = channelNames + ',' + channelName;
}
channelNames = channelNames.slice(1);
console.log(channelNames);
console.log(url1);
$.ajax({
url: url1,
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
data: { channel : channelNames },
success: function(data)
{
console.log(data);
if(data.streams.length > 0)
{
$("#streamStatus").html("<ul class='zebra'>");
for(i = 0; i < data.streams.length; i++)
{
stream = data.streams[i];
channel = data.streams[i].channel;
listItem = "<li id='stream"+i+"'>";
streamName = "<span class='name'>" + streams[stream.name.slice(10)] + "</span>";
viewers = "<span class='viewers'>viewers:" + stream.viewers + "</span>";
gameName = "<div class='game'>" + ((channel.game != null) ? channel.game : "No Game Specified") + "</div>";
listItem += streamName + viewers + gameName + "</li>";
screenCap = "<div class='screenCap' style='display:none;'>" + channel.screen_cap_url_small + "</div>"
$("#streamStatus ul.zebra").append(listItem);
$("#streamStatus ul.zebra").append(screenCap);
//console.log(channel);
}
$("#streamStatus").append("</ul>");
}
},
error: function(data)
{
console.log(data);
}
EDIT: Here is the working solution...
var url1 = "http://api.justin.tv/api/stream/list.json"
var url = "https://api.twitch.tv/kraken/streams/";
channelNames = "";
for (channelName in streams)
{
channelNames = channelNames + ',' + channelName;
}
channelNames = channelNames.slice(1);
console.log(channelNames);
console.log(url1);
$.ajax({
url: url1,
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
jsonp: 'jsonp',
data: { channel : channelNames },
success: function(data)
{
...
},
error: function(data)
{
console.log(data);
}
You're passing jsonp as the dataType in the ajax call. They're not interchangeable.
As you've noted yourself, the data returned from url1 is JSON, not JSONP: JSONP requires wrapping the returned JSON data in a javascript function call.
A mismatch like this between dataType and the data in the response body will always cause the ajax call to fail.
In my ASP.NET page I have the following method:
public static void UpdatePage(string accessCode, string newURL)
{
HttpContext.Current.Cache[accessCode] = newURL;
}
It actually should receive the accessCode and newURL and update the Cache accordingly. I want to pass the values to that method from JavaScript, using an AJAX request. The code for it is as follows:
function sendUpdate() {
var code = jsGetQueryString("code");
var url = $("#url_field").val();
var dataToSend = [ {accessCode: code, newURL: url} ];
var options = { error: function(msg) { alert(msg.d); },
type: "POST", url: "lite_host.aspx/UpdatePage",
data: {"items":dataToSend},
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function(response) { var results = response.d; } };
$.ajax(options);
}
However this doesn't seem to work. Could anybody help me figure out where the bug is?
UpdatePage is a void method that doesn't return anything, so there is nothing to look at in the response.
You could look at the HTTP return code and check that it was 200 OK or you could modify the web method:
public static bool UpdatePage(string accessCode, string newURL)
{
bool result = true;
try {
HttpContext.Current.Cache[accessCode] = newURL;
}
catch {
result = false;
}
return result
}
Edit:
It looks like your JSON arguments to the WebMethod are incorrect, you don't need the "items" in your JSON. The arguments should match your webmethod exactly.
function sendUpdate() {
var code = jsGetQueryString("code");
var url = $("#url_field").val();
var options = { error: function(msg) { alert(msg.d); },
type: "POST", url: "lite_host.aspx/UpdatePage",
data: {'accessCode': code, 'newURL': url},
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function(response) { var results = response.d; } };
$.ajax(options);
}
I was trying loop over the ajax request continuously but it was doing the ajax thing only for the last loop.
while(i<3){
var query = site_url+keywords[i]+'"' ;
$.ajax({
url: query,
type: "GET",
dataType: "html"
success: function(html) {
var el = $(html).find("#tagID");
if(el.length) {
console.log("Element exists");
var cont = 1;
}
else{
console.log("Element doesnt exist");
var cont = 0;
}
}
});
console.log(cont);
i=i+1;
}
Something along those lines:
processKeyword(0);
function processKeyword(i) {
if(i < keywords.length) {
var query = site_url+keywords[i]+'"' ;
$.ajax({
url: query,
type: "GET",
dataType: "html"
success: function(html) {
var el = $(html).find("#tagID");
if(el.length) {
//found, stop processing
result(i);
} else{
//not found, process next
processKeyword(i + 1);
}
}
});
} else {
//all processed, nothing found
result(-1);
}
}
function result(i) {
//i contains keyword index if was found, -1 otherwise
}