Develop Reference

Updating HTML after Ajax or jQuery call

I've created two calls, one is ajax call to my controller, and other one is jquery call. I've did both just to check if my HTML would update once I trigger the event... But none of these methods update my HTML (it stays the same way). Here are the methods:
Method #1:
$("#btnSearch").click(function(){
var startDate = $.trim($("#startDate").val());
var endDate = $.trim($("#endDate").val());
$.post("/history/list",{'startDate':startDate,"endDate":endDate},function(data){
var result = $('<div />').append(data).find('#historyList').html();
$('#historyList').append(result);
console.log(result);
// the result is displayed correctly in the console...
});
});
// This is supposed to update my HTML in the browser now, but it's not showing anything new...
Method #2:
$('#btnSearch').click(function () {
console.clear();
$.ajax({
url: "/history/list",
data: {
startDate: $('#startDate').val(),
endDate: $('#endDate').val(),
},
type: "GET",
dataType: "html",
success: function (data) {
var result = $('<div />').append(data).find('#historyList').html();
$('#historyList').append(result);
console.log(result);
// the result is displayed correctly in the console...
},
error: function (xhr, status) {
alert("Sorry, there was a problem!");
},
complete: function (xhr, status) {
//$('#showresults').slideDown('slow')
}
});
});
None of these methods update my HTML once the call is finished and data is returned... The data object holds the HTML as the result, and I'd like that HTML in the data object replaces everything what is in div tag under id #historyList.. What am I doing wrong here?
P.S. I'm using chrome browser (if this is a useful information)

I don't get the result. Could you use .html, like so:
$('#historyList').html(data);
Or the whole code like this.
$('#btnSearch').click(function () {
console.clear();
$.ajax({
url: "/history/list",
data: {
startDate: $('#startDate').val(),
endDate: $('#endDate').val(),
},
type: "GET",
dataType: "html",
success: function (data) {
$('#historyList').html(data);
console.log(result);
// the result is displayed correctly in the console...
},
error: function (xhr, status) {
alert("Sorry, there was a problem!");
},
complete: function (xhr, status) {
//$('#showresults').slideDown('slow')
}
});
});

Make sure $('#historyList') is not an empty array and exists in the DOM. If it exists,
$('#historyList').html(data);
should solve the problem.
Correct me, if my understanding of the question is wrong.

Parsing response text as key value pairs in an elegant way

Can't seem to find what I'm looking for in searches so this might be a duplicate but I haven't found an original yet sooo....
I have a an ajax call:
$.ajax({
url: "/events/instructor/",
type: 'POST',
data: {
instructorID: $(this).attr("id")
},
complete: function (data) {
$("#name").html(data["responseText"]["name"]);
$("#email").html(data["responseText"]["email"]);
$("#photo").html(data["responseText"]["photo"]);
$("#summary").html(data["responseText"]["summary"]);
$("#url").html(data["responseText"]["url"]);
}
});
The data being returned is encoded in JSON by the server (C#).
Obviously, data["responseText"]["fieldName"] isn't doing the trick. I could do splits and whatnot but that would mean that if the format changes, I'd need to make sure that the code above keeps up with the changed shape of the data.
How can I say something as simple as data["responseText']["fieldName"] to get the value out of that key?

i think you need to parse json first. look at the api.jquery.com/jquery.parsejson
// data = '{ "name": "John" }'
var obj = jQuery.parseJSON( data );
console.log( obj.name);
// result will be "John"
P.S. also better use 'succes' instead 'complete', you can read about this here Difference between .success() and .complete()?
success: function(data) {
console.log("response is good", data);
},
error: function (){
console.log("something is went wrong");
}

try using like this:
complete: function (data) {
var data=JSON.parse(data);
$("#name").html(data.responseText.name);
$("#email").html(data.responseText.email);
$("#photo").html(data.responseText.photo);
$("#summary").html(data.responseText.summary);
$("#url").html(data.responseText.url);
}
to get only correct response use success.

How to set function as value to property that expects anonymous function

I'm using jquery API - jquery DataTables and I have this code snippet :
oSettings.aoDrawCallback.push({
"fn": function(){
},
"sName": "user"
});
Inside the body of the function I want to execute an Ajax request. when I write it drectly here like so:
"fn": function(){
$.ajax({
url: "url",
type: "POST",
async: false,
data: data,
success: function (data) {
console.log(data);
}
}),
There is more that is just an example to show the way everything's work fine. Then I create my own function :
function initCredits(id, inputVal, chkSelected) {
console.log(id);
$.ajax({
url: "URL",
type: "POST",
async: false,
data: data
success: function (data) {
}
})
}
and try to assing it do fn like so:
oSettings.aoDrawCallback.push({
"fn": initCredits(id, inputVal, chkSelected),
"sName": "user"
});
which gives me an error Uncaught TypeError: Cannot read property 'apply' of undefined. Now the text comes from the jquery DataTables API but there may be only two reasons I can think of that may break my code, since it's working befor taking it to outer function. First - I'm tryng to assing the function in a wrong way and second - as you may see I need three variables for my ajax request (id, inputVal, chkSelected) which are collected from the function where I'm doing this :
oSettings.aoDrawCallback.push({
"fn": initCredits(id, inputVal, chkSelected),
but the console log shows that the values are correct so I think this is less likely to be the problem, but still I consider it.

This:
"fn": initCredits(id, inputVal, chkSelected),
… calls the function and assigns the return value.
To assign the function, just do:
"fn": initCredits,

Unable to get value from json object

I am trying to get a value from a json object after making an ajax call. Not sure what I am doing wrong it seems straight forward but not able to get the data
The data that comes back looks like this
{"data":"[{\"Id\":3,\"Name\":\"D\\u0027Costa\"}]"}
The code, removed some of the code
.ajax({
type: 'POST',
url: "http://localhost:1448/RegisterDetails/",
dataType: 'json',
data: { "HomeID": self.Id, "Name": $("#txtFamilyName").val()},
success: function (result) {
console.log(result.data); //<== the data show here like above
alert(result.data.Id); //<==nothing show
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
I tried in the Chrome console like this
obj2 = {}
Object {}
obj2 = {"data":"[{\"Id\":3,\"Name\":\"D\\u0027Costa\"}]"}
Object {data: "[{"Id":3,"Name":"D\u0027Costa"}]"}
obj2.data
"[{"Id":3,"Name":"D\u0027Costa"}]"
obj2.data.Id
undefined
obj2.Id
undefined
Update
The line that solved the issue as suggested here is
var retValue = JSON.parse(result.data)[0]
Now I can used
retValue.Name
to get the value

Actually, looking at this, my best guess is that you're missing JSON.parse()
.ajax({
type: 'POST',
url: "http://localhost:1448/RegisterDetails/",
dataType: 'json',
data: { "HomeID": self.Id, "Name": $("#txtFamilyName").val()},
success: function (result) {
var javascriptObject = JSON.parse(result);
console.log(javascriptObject ); //<== the data show here like above
alert(javascriptObject.Id); //<==nothing show
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
I also find that doing ajax requests like this is better:
var result = $.ajax({
url: "someUrl",
data: { some: "data" },
method: "POST/GET"
});
result.done(function (data, result) {
if (result == "success") { // ajax success
var data = JSON.parse(data);
//do something here
}
});
For clarity it just looks better, also copying and pasting into different functions as well is better.

The id property is in the first element of the data-array. So, alert(result.data[0].Id) should give the desired result. Just for the record: there is no such thing as a 'JSON-object'. You can parse a JSON (JavaScript Object Notation) string to a Javascript Object, which [parsing] supposedly is handled by the .ajax method here.

The data field is just a string, you should parse it to a JSON object with JSON.parse(result.data), since data is now an array you will need to need to use an index [0] to have access to the object. Know you will be able to get the Id property.
JSON.parse(result.data)[0].Id

jSON tree search with jQuery, error

I have been using code from other questions on stackoverflow such as here and here.
I get the error Uncaught TypeError: Cannot read property 'length' of undefined that I can see in the developer console when I try to run my function. This error is within the jQuery file itself supposedly, not in my code. (I know ofc it is still my own error somewhere).
Here is the code I'm trying to execute:
function populate_api(){
var json = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "test.txt",
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})(); //^-from SOflow: https://stackoverflow.com/questions/2177548/load-json-into-variable
//Put the JSON into a variable ---^
$.each(json.result.matches.players, function(i, v){
if (v.account_id == 38440257) {
alert(v.hero_id);
return;
}
}); //use variable to run a search on the JSON tree --^
}
The file itself with the Json in has quite a lot of info, but this is the small area at the top of the file I've been testing with:
{
"result": {
"status": 1,
"num_results": 10,
"total_results": 500,
"results_remaining": 490,
"matches": [
{
"match_id": 514348401,
"match_seq_num": 468628758,
"start_time": 1392061295,
"lobby_type": 7,
"players": [
{
"account_id": 38440257,
"player_slot": 0,
"hero_id": 42
},
...
To quickly summarise again. I am searching for the "hero_id" where the account ID is 38440257 within the matches tree.

It's because json.result.matches.players is undefined and jQuery.each() doesn't have any checks for the first argument being undefined, it instead assumes you're passing it something valid that it can access the length property of.
In your JSON json.result.matches is an array of objects (each one representing a match), and each of those objects has a players property; the array itself does not have a players property. You need to iterate through each of the matches first, then through each of its players:
$.each(json.result.matches, function(index, match) {
$.each(match.players, function(i, v) {
// code here
});
});
Alternatively just check the players for a particular match (in this case, the first one):
$.each(json.result.matches[0].players, function(i, v) {
// code here
});
You should also move away from synchronous AJAX calls (such a ridiculous notion...) and instead call functions with your data processing logic from the success callback function, passing the JSON in.

You can always check if json is undefined before using it, like this:
if (typeof json != 'undefined') {
// Do things with json
}
And you could wrap it in your success callback, and check if data is defined before using it, skipping the return json part all together:
function populate_api() {
$.ajax({
'async': false,
'global': false,
'url': "test.txt",
'dataType': "json",
'success': function (data) {
if (typeof data != 'undefined') {
$.each(data.result.matches, function (i, v) {
v.players.forEach(function(player){
if (player.account_id == 38440257) {
alert(player.hero_id);
}
});
});
}
}
});
}

You are getting the json variable value outside of the "success" function, so it will execute before the ajax call has ended. Try changing this way:
'success': function (json) {
return json;
}
});