I'm trying to retrieve multiple data from my remote php file and display them dynamically, i usually do this with jquery when i'm coding cordova. i'm using nativescript now.
This is the jquery code i use before
$.getJSON(serviceURL + 'getroutes.php?station='+station, function(data) {
employees = data.items;
$.each(employees, function(index, employee) {
$('#employeeList').append('<li>'+
'<img src="js/citybus.png" class="list-icon"/>' +
'<p class="line1">' + employee.firstName + '</p>' +
'<p class="line2">' + difference + ' Out' + '</p>' +
'<p class="line3" style="color:'+ color +';margin-left:60px">' + SeatsLeft + ' seats left </p>' +
'<button style="display:'+ display +'" class="bubble" data-difference="' + hoursMin + '" data-route="' + employee.firstName + '" data-busnum="' + employee.lastName + '" onclick="bookSeat(this);">' + '<center><img src="js/seat.jpg" style="height:15px;width:15px;"/></center>' + '</button>'
+ '<button data-id="' + employee.id + '" data-diff="' + hoursMin + '" data-name="' + employee.firstName + '" class="bubble" style="margin-right:30px" onclick="setReminder(this);">' + '<center><img src="js/bell.png" style="height:15px;width:15px;"/></center>' + '</button></li>');
if(index && index % 4 === 0) {
$('#employeeList').append('<center><div class="adSpace2" style="margin-top:2.5px;margin-bottom:2.5px;">'+'</div></center>');
}
});
setTimeout(function(){
scroll.refresh();
});
});
Please how do i do this with nativescript?
You'll want to use the Fetch API.
const Observable = require('tns-core-modules/data/observable').Observable
const model = new Observable()
function loaded(args) {
args.object.bindingContext = model
fetch(serviceURL + 'getroutes.php?station='+station).then(res => model.set('employees', res.items))
}
exports.loaded = loaded
And then in your View XML:
<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:lv="nativescript-ui-listview" aloaded="loaded">
<StackLayout>
<ListView items="{{employees}}">
<Label class="line1" text="{{firstName}}" />
</ListView>
</StackLayout>
</Page>
Related
How can I change the background color of a particular
<p class="line3" style="color:green;margin-left:60px">' + SeatsLeft + ' seats left </p>
when its employee.managerId is greater than 19.
The data loads from my database. This is what I've tried and it doesn't work
$.each(employees, function(index, employee) {
var SeatsLeft = 20 - employee.managerId;
$('#employeeList').append('<li>' +
'<img src="js/citybus.png" class="list-icon"/>' +
'<p class="line1">' + employee.firstName + '</p>' +
'<p class="line2">' + difference + '</p>' +
'<p class="line3" style="color:green;margin-left:60px">' + SeatsLeft + ' seats left </p>' +
'<button id="bookSea" class="bubble" data-difference="' + hoursMin + '" data-route="' + employee.firstName + '" data-busnum="' + employee.lastName + '" onclick="bookSeat(this);">' + '<center><img src="js/seat.jpg" style="height:15px;width:15px;"/></center>' + '</button>' +
'<button data-diff="' + hoursMin + '" data-name="' + employee.firstName + '" class="bubble" style="margin-right:30px" onclick="setReminder(this);">' + '<center><img src="js/bell.png" style="height:15px;width:15px;"/></center>' + '</button></li>');
var x = document.getElementsByClassName("line3");
var i;
for (i = 0; i < x.length; i++) {
if (employee.managerId > 19) {
x[i].style.color = "red";
}
}
});
$.each(employees, function(index, employee) {
var SeatsLeft = 20 - employee.managerId;
var color = employee.managerId > 19 ? 'red' : 'green';
$('#employeeList').append('<li>' +
'<img src="js/citybus.png" class="list-icon"/>' +
'<p class="line1">' + employee.firstName + '</p>' +
'<p class="line2">' + difference + '</p>' +
'<p class="line3" style=' "color:' + color + ';margin-left:60px">' + SeatsLeft + ' seats left </p>' +
'<button id="bookSea" class="bubble" data-difference="' + hoursMin + '" data-route="' + employee.firstName + '" data-busnum="' + employee.lastName + '" onclick="bookSeat(this);">' + '<center><img src="js/seat.jpg" style="height:15px;width:15px;"/></center>' + '</button>' +
'<button data-diff="' + hoursMin + '" data-name="' + employee.firstName + '" class="bubble" style="margin-right:30px" onclick="setReminder(this);">' + '<center><img src="js/bell.png" style="height:15px;width:15px;"/></center>' + '</button></li>');
});
Perhaps you meant
if (SeatsLeft === 0) $(".line3").css("color","red");
or
'<p class="line3" style="color:'+(SeatsLeft===0?"red":"green")+';margin-left:60px">'
+ SeatsLeft + ' seat'+(SeatsLeft===1?"":"s")+' left </p>'
I try to insert a dynamic h3 to a dynamic div, hovewer something is odd as it gets inserted outside the lblUser div. I would also like to be inserted after the "Role" h3.
Here is my code : function showUsers() {
lblUserList.innerHTML = "";
for ( var i = 0; i < ajUserDataFromServer.length; i++ ) {
var lblUser = document.createElement('div');
lblUser.innerHTML = '<div class="lblUser">' + '<img src="' + ajUserDataFromServer[i].image + '" alt="user" class="lblUserImage" data-userImage="' + ajUserDataFromServer[i].image + '">' + '<h3 class="lblUserId">' + 'Id:' + ' ' + ajUserDataFromServer[i].id + '</h3>' + '<h3 class="lblUserRole" data-userRole="' + ajUserDataFromServer[i].role + '">' + 'Role:' + ' ' + ajUserDataFromServer[i].role + '</h3>' + '<h3 class="lblUserName" data-userName="' + ajUserDataFromServer[i].name + '">' + 'Name:' + ' ' + ajUserDataFromServer[i].name + '<h3 class ="lblUserLastName" data-userLastName="' + ajUserDataFromServer[i].lastname + '">' + 'Lastname:' + ' ' + ajUserDataFromServer[i].lastname + '</h3>' + '<h3 class="lblUserPassword" data-userPassword="' + ajUserDataFromServer[i].password + '">' + 'Password:' + ' ' + ajUserDataFromServer[i].password + '</h3>' + '<button id="btnEditUserBody" class="btnShowPage btnEditUser" data-userId="' + ajUserDataFromServer[i].id + '" data-showThisPage="pageUpdateUser">' + 'EDIT USER' + '</button>' + '<button class="btnDeleteUser" data-userId="' + ajUserDataFromServer[i].id + '" >' + 'DELETE USER' + '</button>' + '<h3 class="lblErrorMessage" id="lblDeleteUserErrorMessage">' + '</h3>' + '</div>';
if ( ajUserDataFromServer[i].email ) {
var lblUserEmail = document.createElement('h3');
lblUserEmail.innerHTML = '<h3 class="lblUserEmail" data-userEmail="' + ajUserDataFromServer[i].email + '">' + 'Email:' + ' ' + ajUserDataFromServer[i].email + '</h3>';
lblUser.appendChild( lblUserEmail );
}
if ( ajUserDataFromServer[i].phonenumber ) {
var lblUserPhoneNumber = document.createElement('h3');
lblUserPhoneNumber.innerHTML = '<h3 class="lblUserPhoneNumber" data-userPhoneNumber="' + ajUserDataFromServer[i].phonenumber + '">' + 'Phone-number:' + ' ' + ajUserDataFromServer[i].phonenumber + '</h3>';
lblUser.appendChild( lblUserPhoneNumber );
}
lblUserList.appendChild( lblUser );
}
}
I can see a few things wrong with the code, for example:
var lblUserEmail = document.createElement('h3');
lblUserEmail.innerHTML = '<h3 class="lblUserEmail" data-userEmail="' + ajUserDataFromServer[i].email + '">' + 'Email:' + ' ' + ajUserDataFromServer[i].email + '</h3>';
Should be something like:
var lblUserEmail = document.createElement('h3');
lblUserEmail.classList.add("lblUserEmail");
lblUserEmail.setAttribute("data-userEmail", ajUserDataFromServer[i].email);
lblUserEmail.innerText = 'Email:' + ' ' + ajUserDataFromServer[i].email;
Now you can append it:
lblUser.appendChild(lblUserEmail);
If you do it your way you wil get nested h3 and div elements.
Furthermore, you need to close your img tag. I can advice creating those tags either in code or with the new es5 string interpolation this will clean up your code and will show you these types of errors.
I parsed JSON objects and made a table structure to display the elements. I wanted to make rows of table editable. This is is the code i used to form the table.
(jsonDatag.data).forEach(function(item) {
var _tr = '<tr class="' + item.symbol + '"><td>' + item.symbol + '</td><td class="' + hclass + '">' + item.highPrice + '</td><td class="' + lclass + '">' + item.lowPrice + '</td><td class="' + oclass + '">' + item.openPrice + '</td><td class="' + ltclass + '">' + item.ltp + '</td><td>' + item.previousPrice + '</td><td>' + item.lastCorpAnnouncementDate + '</td></tr>'
_tbody += _tr
});
_thead = _thead + _tbody;
$('.mytable').html(_thead)
}
Now I added these lines to make my rows editable but it is not reflecting in my output.
$('tr.'+item.symbol+'').each(function() {
$(this).html('<input type="text" value="' + $(this).html() + '" />');
});
What is going wrong here and how can i correct it ?
Editable rows is not working in table
This seems to be confusing since it is the td which is editable.
Also this snippet
$('tr.' + item.symbol + '').each(function() {
$(this).html('<input type="text" value="' + $(this).html() + '" />');
});
probably will place an input.
If you are looking to make a editable td then
<td contenteditable="true">
will work
I am trying to reload data every 5 seconds using jQuery. The URL for the JSON data can be found at http://gdx.mlb.com/components/game/win/year_2015/month_11/day_11/master_scoreboard.json
This is the code I am trying:
$.getJSON("http://gdx.mlb.com/components/game/win/year_2015/month_11/day_11/master_scoreboard.json", function (json) {
$.each(json.data.games.game, function (i, value) {
$('#LMP').append('<div id="equipo"><div class="p1"><img src="img/lmp/' + value.away_name_abbrev + '.png' + '" alt=""></div><div class="p2"><div class="p2-1"> </div><div class="p2-2">' + value.status.inning + ' ' + value.status.top_inning + '</div><div class="clear"></div></div><div class="p3"><img src="img/lmp/' + value.home_name_abbrev + '.png' + '" alt=""></div><div class="clear"></div></div>');
});
});
One way to do it might look like this:
function getJson () {
$.getJSON("http://gdx.mlb.com/components/game/win/year_2015/month_11/day_11/master_scoreboard.json", function (json) {
$.each(json.data.games.game, function (i, value) {
$('#LMP').append('<div id="equipo"><div class="p1"><img src="img/lmp/' + value.away_name_abbrev + '.png' + '" alt=""></div><div class="p2"><div class="p2-1"> </div><div class="p2-2">' + value.status.inning + ' ' + value.status.top_inning + '</div><div class="clear"></div></div><div class="p3"><img src="img/lmp/' + value.home_name_abbrev + '.png' + '" alt=""></div><div class="clear"></div></div>');
});
});
}
var i = setInteval(getJson, 5000);
I have a param called "exraData" which can be a string or array (depends on some conditions).
I have to display some content using java script.
in case "exraData" is a String the content is displayed well by the following code:
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show +
'<div class="tt-hint">' + exraData + '</div>' +
'</div>' +
'</div>';
In case it is array I use the following code but nothing is displayed:
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show
for(var i=0;i<exraData.length;i++){
+'<div class="tt-hint">' + exraData[i] + '</div>'
}
+'</div>' +
'</div>';
You can't have a for loop inline. Here is the for loop outside with the desired result.
var spanPic='tempPic';
var company='xyz';
var item={};
item.show='temp';
var exraData=['one','two','three'];
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show;
for(i=0;i<exraData.length;i++){
this.resulto +='<div class="tt-hint">' + exraData[i] + '</div>';
}
this.resulto+='</div>' + '</div>';
document.write(this.resulto);