We Keep Coding

json returns nothing after value changed

I have DataTables table with row details which are opening by clicking on row. The row details are displayed in 3 different languages which are selected by checkbox. When the row is clicked, the language is send to details.php script (langy:chLanguage) which returns json values for this selected language.
Initialy the language is set to chDe and everything is working fine until I click on another language. When the language is changed to EN or RU, or even back to DE, the returned json is empty.
index.php :
<h5>Language</h5>
<input type="checkbox" id="chDe" name="languages" checked>DE
<input type="checkbox" id="chEn" name="languages">EN
<input type="checkbox" id="chRu" name="languages">RU
<script>
var chLanguage = "chDe";
$('input[name=languages]').click(function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
chLanguage = [];
$('input[name=languages]:checked').each(function() {
chLanguage.push($(this).attr('id'));
});
if (chLanguage == '') {
chLanguage = 5;
}
$('#example').DataTable().ajax.reload();
});
function format ( rowData, row, $chLanguage ) {
// FOLLOWING CONSOLE.LOG RETURNS THE ACTUALLY SELECTED LANGUAGE CORRECTLY
console.log("chLanguage in format function: " + chLanguage);
var div = $('<div/>')
.addClass( 'loading slider' )
$.ajax( {
url: 'scripts/details.php',
data: {
name: rowData[0],
langy: chLanguage,
},
dataType: 'json',
type: 'post',
success: function ( json ) {
// FOLLOWING CONSOLE.LOG RETURNS [Object object] unless the language is changed, then it returns nothing
console.log("json: " + json);
var childTable = '<div id="rowdetails" class="slidera"><ul class="slider">';
childTable = childTable.concat(
'<div class="row rdstyle">' +
'<table class="detailstable detailserrors">' +
'<tr><td><b>Error class:</b></td><td>' + json[0].ERRTRIEDA + '</td></tr>' +
'<tr><td><b>Error group:</b></td><td>' + json[0].ERRSKUPINA + '</td></tr>' +
'<tr><td><b>Error:</b></td><td>' + json[0].ERRPOPIS + '</td></tr>' +
'</table>' +
'</div>
);
});
}
details.php :
$language = $_POST['langy'];
if ($language == 'chDe' ) {
$setLang = 'DE';
}else if($language == 'chEn') {
$setLang = 'EN';
} else{$setLang = 'RU';}
and $setLang is used in SQL query to filter data by language.
I hope I'm not far away from working solution, because it's working already, just the language switch don't work. Sorry not to attach working sample. I don't know how to implement all these parts including mysql db and several differenct php scripts :(

AngularJS Iterate over ajax returned object

I am writing a program to learn AngularJS. This program has an ajax function that returns an object from an API endpoint, like so:
$.ajax(
{
url: "/api/request.json",
dataType: "json",
statusCode: {
404: function(){
console.log("Error 404");
}
},
success: function(data){
console.log("Successfully copied data to meteo_values");
fn(data); // do something with the data
},
error: function(err){
console.log(err);
}
}
);
I would like to iterate through the object that is returned using AngularJS. Right now I'm using jQuery to inject the data inside a div, like so:
function fn(val){
// populate the webpage with the values
var data_table = "<div class='data_table'><p>" + datetext + "</p>";
// iterate through val array
for (var value in val){
data_table += "<div class='card'><h2>" + val[value]["city"] + "</h2>";
data_table += "<table><tr><th>Orario</th><th>Temperatura</th><th>Umidità</th></tr>";
data_table += "<tr><td>" + val[value]["t1"]["ora"] + "</td><td>" + val[value]["t1"]["temperatura"] + "</td><td>" + val[value]["t1"]["humidity"] + "</td></tr>";
data_table += "<tr><td>" + val[value]["t2"]["ora"] + "</td><td>" + val[value]["t2"]["temperatura"] + "</td><td>" + val[value]["t2"]["humidity"] + "</td></tr>";
data_table += "<tr><td>" + val[value]["t3"]["ora"] + "</td><td>" + val[value]["t3"]["temperatura"] + "</td><td>" + val[value]["t3"]["humidity"] + "</td></tr>";
data_table += "</table></div>";
}
data_table += "</div>"
$(".results").append(data_table);
}
Instead of doing that (which works, but it doesn't seem elegant), I would like to use AngularJS. I tried using ng-repeat but It didn't work out.
Consider that the returned object is an object that contains an array of n objects which also contain another set of three objects.
I already tried ng-repeat="(key,value) for name_of_the_variable_in_the_$scope"
I might have forgot useful info for you to help me and answer and I already searched for the answer but I didn't find it.
EDIT:
var meteoApp = angular.module('meteoapp', []);
meteoApp.controller('meteoPopulateCtrl', function ($scope) {
$scope.data = [];
$.ajax(
{
url: "/api/request.json",
dataType: "json",
statusCode: {
404: function(){
console.log("Error 404");
}
},
success: function(data){
$scope.data = data;
},
error: function(err){
console.log(err);
}
}
);
HTML MARKUP
<div ng-app="meteoapp">
<div ng-controller="meteoPopulateCtrl">
<div class="results" ng-repeat="???">
something that is repeated
</div>
</div>
</div>
RETURNED OBJECT (To be prettified)
[
{
"city":"a city",
"t1":
{
"ora":"01",
"temperatura":"7.2°",
"humidity":"92%"},
"t2":
{
"ora":"04",
"temperatura":"7.1°",
"humidity":"93%"},
"t3":
{
"ora":"07",
"temperatura":"7.4°",
"humidity":"94%"
}
}]

If your code is in angularjs, you should use ng-repeat for displaying it on html page.
Here is the basic example of ng-repeat:
HTML:
<h3>FIFA Mactch Summary:</h3>
<div ng-app ng-controller="MyCtrl">
<ul>
<li ng-repeat="(country,goals) in items">{{country}}: {{goals}}</li>
</ul>
</div>
Javascript:
var m = {
"India": "2",
"England": "2",
"Brazil": "3",
"UK": "1",
"USA": "3",
"Syria": "2"
};
function MyCtrl($scope) {
$scope.items = m;
}
Working example
For ajax request you should be using $http because $http callbacks are all wrapped in $scope.$apply(). Else you need to call $scope.$apply() which will call $scope.$digest() for you.

ng-repeat will do the job - you need to remember to refresh the scope before asynchronously loaded content will be displayed. Try $scope.$apply() after receiving the response and the ng-repeat should pick it up.
Hope this helps.

how to display JSON Array into table using AJAX in JSP

I am new to ajax. I am trying to display data into table in JSP file.
API is called using AJAX.
Controller pass below response:
BatchwiseStudent [name=Ram, course=MCA (Commerce), emailId=rammansawala#gmail.com, placed=null, batch=2016, mobileNo=7.276339096E9]
In JSP page:
<script type="text/javascript">
function getStudentDetails(){
$batch = $('#batch');
$course = $('#course');
$.ajax({
type: "GET",
url: "./batchAjax?batchId="+$batch.val()+"&courseId="+$course.val(),
success: function(data){
console.log("SUCCESS ", data);
if(data!=null){
$("#batchwiseTable").find("tr:gt(0)").remove();
var batchwiseTable = $("#batchwiseTable");
$.each(JSON.parse(data),function(key,value){
console.log(key + ":" + value);
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).text(value['name']);
rowNew.children().eq(2).text(value['emailId']);
rowNew.children().eq(3).text(value['placed']);
rowNew.children().eq(4).text(value['batch']);
rowNew.children().eq(5).text(value['mobileNo']);
rowNew.appendTo(batchwiseTable);
});
$("#batchwiseTable").show();
}
},
error: function(e){
console.log("ERROR ", e);
}
});
}
</script>
I can see new row into the table but there is no data. I want name, emaild, mobileNo, etc into particular field.
can anyone guide me where am i wrong?

Below code should be keep in the .jsp Page where you show table you don;t need to write html code for table jsp page.
<div id="insert-table-here"></div>
Javascript code:
below code is for ajax call
replace uri with your url value that is used in your url.
$.ajax({
type: 'GET',
url: uri,
success: function (data) {
var str = '<table class="table table-bordered"><thead>'+
'<tr><td>Name</td><td>Course</td><td>EmailId</td><td>Place</td><td>Batch</td><td>Mobile Number</td></tr></thead><tbody>';
$.each(data, function (key, value) {
str = str + '<tr><td>' +
value.name + '</td><td>' +
value.course + '</td><td>' +
value.emailId + '</td><td>' +
value.placed + '</td><td>' +
value.batch + '</td><td>' +
value.mobileNo + '</td></tr>';
});
str = str + '</tbody></table>';
$('#insert-table-here').html(str);
}, error: function (data) {
}, complete: function (data) {
}
});

Run a function when element rendered

I have a javascript function, for example:
function SuperTD(id,str,tooltip) {
return '<td id="' +id+ '" title="' +tooltip+ '">' +str+ '</td>';
}
The SuperTD called and concatenated with many elements, and I don't want to change how it works (into generating element without using html string).
And I need to trigger a function when that elements are rendered, for example:
function SuperTD(id,str,tooltip) {
var onwhat = 'onwhat="executeFixedFunction(' + "'" +id+ "'" + ')"';
return '<td><div id="' +id+ '" title="' +tooltip+ '" ' +onwhat+ '>' +str+ '</div></td>';
}
where executeFixedFunction is:
function executeFixedFunction(id) {
$('#' + id).uploadFile({
url:"/file/upload"
});
}
what the correct event to do this? I need to initialize a file-upload element everywhere SuperTD called
The users still using Firefox 3.5.
EDIT more context:
GridBuilder.render = function() {
// return from cache
var html = '';
// calls html += SuperTD( ... )
return html;
}
GridBuilder.renderTo = function(id) {
$('#'+id).html(this.render());
// I guess this is where I should initialize the file upload, but still, is there another way?
}

If you are already using jquery i would consider doing it this way:
function superTD (id, str, tooltip) {
return $('<td/>', {
id: id,
title: tooltip,
text: str
}).uploadFile({
url: '/your-url'
})
}
Then you can call appendTo method on superTD to insert it into table row

You can use a setTimeout function to delay the callback function.
function SuperTD(id,str,tooltip) {
var onwhat = 'onwhat="executeFixedFunction(' + "'" +id+ "'" + ')"';
setTimeout(function(){ executeFixedFunction(id) }, 1000);
return '<td><div id="' +id+ '" title="' +tooltip+ '" ' +onwhat+ '>' +str+ '</div></td>';
}

Everything put together with slightly modified Jakubs suggestion. See on Plunkr.
function superTD(id, str, tooltip, callback) {
var td = $('<td/>', {
id: id,
title: tooltip,
text: str
});
var up = $('<span/>'); // <-- this elm will be replaced
td.append(up);
$('#container').append(td);
callback(up, str);
}
function onCreated(elm, fname) {
elm.uploadFile({
url: '/url',
fname: fname
});
}
$(document).ready(function() {
superTD(1, 'foo', 'bar', onCreated);
superTD(2, 'bar', 'foo', onCreated);
});

How to call Rails form helper with params in jQuery AJAX?(SUPER SIMPLE)

I'm new on Rails, and i think this is super simple, just not used to the syntax.
this is the jQuery part,
$.ajax({
type: "get",
contentType: "application/json; charset=utf-8",
url: "/users/search_users",
data: {
name: name
},
dataType: "text",
success: function (result) {
var test = "<%=get_user_list_html(result)%>";
if (result == "User not found") {
alert("User not found");
} else {
//console.log(result);
var peopleData = jQuery.parseJSON(result);
var resultHTML = "<tr>";
resultHTML += "<th></th><th style='display:none'>User ID</th>" + "<th>First Name</th><th>Last Name</th><th>Email Address</th>" + "<th style='display:none'>Time Zone</th>";
resultHTML += "</tr>";
$.each(peopleData, function (index, obj) {
resultHTML += "<tr>";
resultHTML += "<td><input type='checkbox'></td>" + "<td style='display:none;'>" + obj.id + "</td>" + "<td>" + obj.firstname + "</td>" + "<td>" + obj.lastname + "</td>" + "<td>" + obj.email + "</td>" + "<td style='display:none;'>" + "Etc/GMT+9 (Japan)" + "</td>";
//consider now
resultHTML += "</tr>";
});
$("#internal_table").html(resultHTML);
}
},
error: function () {
window.alert("something wrong!");
}
});
in here, i'm going to call get_user_list_html, which is in the helper.
But my problem is, how can i use the result from the respone, i have to send this as a param?
if i just put it like that, it says undefined var.

Ruby code must be executed on the server side, this line: var test = "<%=get_user_list_html(result)%>"; won't work after an ajax call, and it should be in a .erb file.
You can have a ruby + javascript view template with .js.erb extension but ruby code is always executed before your document loads.
I don't know what the helper does but this is not the way to do it.

Solution 1: Render a HTML partial instead of JSON from server. That's make things much easier in you case.
Solution 2: Use a template to render JSON response, say jQuery template or Underscore template.
The usage in your case is not good. You missed better part in both server and client side.