Hi i am beginner in programming and i am trying to build a simple Titanium app using HTTPClient. This piece of code displays the full list of cities, I want that on click of each city it will display in another window, photo of clicked city.
This piece of code display the full list of cities:
Ti.UI.backgroundColor = '#000';
var url = "http://10.0.3.2:8000/cities/.json";
var win = Ti.UI.createWindow();
var table = Ti.UI.createTableView();
var tableData = [];
var json, i, row, nameLabel, nickLabel;
var xhr = Ti.Network.createHTTPClient({
onload: function() {
// Ti.API.debug(this.responseText);
json = JSON.parse(this.responseText);
for (i = 0; i < json.length; i++) {
row = Ti.UI.createTableViewRow({
height:'60dp'
});
nameLabel = Ti.UI.createLabel({
text:json[i].city,
font:{
fontSize:'24dp',
fontWeight:'bold'
},
height:'auto',
left:'10dp',
top:'5dp',
color:'#000',
touchEnabled:false
});
nickLabel = Ti.UI.createLabel({
text:'"' + json[i].city + '"',
font:{
fontSize:'16dp'
},
height:'auto',
left:'15dp',
bottom:'5dp',
color:'#000',
touchEnabled:false
});
row.add(nameLabel);
row.add(nickLabel);
tableData.push(row);
}
table.setData(tableData);
},
onerror: function(e) {
Ti.API.debug("STATUS: " + this.status);
Ti.API.debug("TEXT: " + this.responseText);
Ti.API.debug("ERROR: " + e.error);
alert('Per momentin nuka ka te dhena! ju lutem provojeni perseri me vone!!!');
},
timeout:5000
});
xhr.open("GET", url);
xhr.send();
win.add(table);
win.open();
Here are APIs:
a) API that displays the full list of cities http://10.0.3.2/cities/.json :
[{"id": 1, "city": "Shkoder", "photo_city": "null"}, {"id": 2, "city": "Lezhe", "photo_city": "null"}, {"id": 3, "city": "Lac", "photo_city": "null"}]
b) API that displays details of a clicked city http://10.0.3.2/city/2/.json :
[{"id": 2, "city": "Lezhe", "photo_city": "null"}]
I hope in your help!!!
Here is a video showing the complete coding process: https://www.youtube.com/watch?v=MwjogxcrqlE
/**
* called when user clicks on table view. The _event will provide
* the index of the item clicked in the table
*
* #param {Object} _event
*/
function clickedOnTableView(_event) {
// display to console log the _event object for debugging
Ti.API.info(JSON.stringify(_event,null,2));
// get data using index provided, show alert
// show all data changes now
alert("clicked on " + tableData[_event.index].city + " " +
tableData[_event.index].id);
}
Add the event listener
table.addEventListener('click',clickedOnTableView);
Related
I'm trying to adapt the nice solution I found here:
How to place an icon inside Google ColumnChart
to insert images on top of chart bars.
I'm using VueJS to dynamically create my Google charts.
HTML Code :
<GChart type="BarChart" id="villesChart" ref="villesChart" :data="dataprox" :options="optionsprox" :events="eventsprox">
then I populate my chart in my VueJS app:
var result_a = [
[
"Ville",
"Prix au m2",
{ role: "annotation" },
{ role: "style" },
{ role: "code_commune" },
],
];
/*data from sql query*/
for (var ligne in reponse) {
result_a.push([
reponse[ligne].ville,
parseInt(reponse[ligne].prix),
reponse[ligne].prix + " €/m2",
"color: " + couleur,
reponse[ligne].code_commune,
]);
}
The proposed solution to insert icons is the following (extract):
var container = document.getElementById('chart_div');
var containerBounds = container.getBoundingClientRect();
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var chartLayout = chart.getChartLayoutInterface();
for (var i = 0; i < data.getNumberOfRows(); i++) {
var barBounds = chartLayout.getBoundingBox('bar#0#' + i);
var path = 'http://findicons.com/files/icons/512/star_wars/32/';
var thumb = container.appendChild(document.createElement('img'));
thumb.src = path + data.getProperty(i, 0, 'thumb');
thumb.style.position = 'absolute';
thumb.style.top = (barBounds.top + containerBounds.top - 40) + 'px';
thumb.style.left = (barBounds.left + containerBounds.left + (barBounds.width / 2) - 16) + 'px';
}
});
chart.draw(data, options);
How do I adapt that code in VueJS context? I don't know how to get the chart element and where I should insert my code (mounted?).
Thanks a lot for your help!
Alex
Using Kendo UI, please tell me how can we remove element from multi listview. When i am selecting any item it is giving me value but i am unable to remove selected element.
PSB code:
var data = [
{ id: 1, text: "text 1" },
{ id: 2, text: "text 2" },
{ id: 3, text: "text 3" }
];
var d = $("#listview").kendoListView({
dataSource: data,
template: kendo.template($("#template").html()),
selectable: "multiple",
change: function() {
var index = this.select().index(),
dataItem = this.dataSource.view()[index];
var d = $("#listview").data("kendoListView");
alert(d.element.children().first());
d.remove(dataItem.text);
//log("id: " + dataItem.id + ", text: " + dataItem.text);
var selected = $.map(this.select(), function(item) {
return data[$(item).index()].id;
});
//data.remove(selected.id);
//console.log(data);
console.log(selected);
//console.log("[" + selected.join(", ") + "]");
}
});
For removing an element is:
// Find selected
var idx = this.select().index();
// Get reference to the DataSource
var ds = d.data("kendoListView").dataSource;
ds.remove(ds.at(idx));
This would remove the selected item as soon as you click on it (but doing it in change event handler does not actually allow you to remove multiple items).
But you can also directly remove one single item directly from the list using remove method:
// Find selected
var selected = this.select();
d.data("kendoListView").remove(selected);
Check it here, click on an item and it will get removed.
The question is that these interfaces are able to remove one item per call. If you want to remove many, you can iterate on them:
// Find selected
var items = d.select();
$.each(items, function(idx, elem) {
d.remove($(elem));
});
See it here, select many and then click on "Remove" button.
I am developing a web app with Django and i have this ajax where i'm refreshing some images from the db in order to display them in a template.
function refreshUploadedImages() {
var inputs = ['Designer Name', 'Color', 'Fabric', 'Type', 'Tag', 'Subtag'];
$.getJSON('/admin/image-uploader/images', function(data) {
$('#uploadedFiles').empty();
for (uiid in data) {
ui = data[uiid];
var div = $('<div>');
div.data('id', ui.id);
// image
var image = new Image();
image.src = ui.url
image.width = 180;
div.append($('<div>').append(image));
// list
var ul = $('<ul>')
div.append(ul)
// inputs
for (input in inputs) {
ul.append(
$('<li>').append(
$('<label>').append(
$('<span>').append(document.createTextNode(inputs[input] + ':'))
).append($('<input>'))));
}
$('#uploadedFiles').append(div);
div.append('<li><input type="button" class="delete-img-btn" id = <<ui.id>> img-id=image.id value="Delete"/></li>');
}
$(window).trigger('uploadedImagesRefresh');
});
$(function(){
//
$('.delete-img-btn').live('click', function() {
//asign the image id from the button attribute 'img-id'
var id= $(this).attr('img-id');
//The data to be send via ajax the server will recieve 2 POST variables ie. 'action' and 'id'(which is the img id)
var data={
'action':'/admin/image-uploader/',
'pk' : id,
'success':refreshUploadedImages
};
//The ajax request.
vary = $('.delete-img-btn').attr('id');
$.post("/admin/image-uploader/delete/"+vary , data);
});
});
}
My problem is, in this line
div.append('<li><input type="button" class="delete-img-btn" id = <<ui.id>> img-id=<<<image.id>>> value="Delete"/></li>');
I want to assign id a variable ui.id i.e (id = <<ui.id>> ) which is defined somewhere outside the div.append. Can you help me on how to do it please.
Is this all you're trying to do?
div.append(
'<li><input type="button" class="delete-img-btn" id="'
+ ui.id + '" img-id="'
+ image.id + '" value="Delete"/></li>');
image.id isn't defined though.
Hello friends,
I am developing an app using Google Place API in Titanium Development and successfully got data and display in tableview and add button in each row but my issue is that I want to get name and address on button click in each row so please give me idea or any link to solve my issue.
Please take a look in my screenshot so on btnclick I want to get name and address.
Thanks in advance.
var categoryName;
var addressLabel;
var row;
var tableData=[];
PlacesListCells = function createRow()
{
//var tableData=[];
var loader = Titanium.Network.createHTTPClient();
var url = "https://maps.googleapis.com/maps/api/place/search/json?";
url = url + "location=" + lat + ',' + lon;
url = url + "&radius=" + radius;
url = url + "&name=" + name;
url = url + "&sensor=" + sensor;
url = url + "&key=" + key;
Ti.API.info(url);
// Sets the HTTP request method, and the URL to get data from
loader.open("GET",url);
// Create our HTTP Client and name it "loader"
// Runs the function when the data is ready for us to process
loader.onload = function()
{
var obj = JSON.parse(this.responseText);
Ti.API.log(obj);
var results = obj.results;
Ti.API.log(results);
for (var i = 0; i < results.length; i++)
{
categoryName = obj.results[i].name;
reference = obj.results[i].reference;
Ti.API.log('Refernce:'+reference);
// Create a row and set its height to auto
row = Titanium.UI.createTableViewRow({height:'78'});
var placeImage = Titanium.UI.createImageView
({
image:'../iphone/appicon.png',
width:70,
height:50,
top:12,
left:5
});
// Create the label to hold the tweet message
var nameLabel = Titanium.UI.createLabel({
//text:name,
left:80,
top:5,
height:'auto',
width:185,
textAlign:'left',
font:{fontSize:12}
});
// Create the label to hold the tweet message
addressLabel = Titanium.UI.createLabel({
left:80,
top:25,
height:'auto',
width:185,
textAlign:'left',
font:{fontSize:14}
});
var arrowImage = Ti.UI.createImageView
({
image:'../iphone/appicon.png',
width:20,
height:20,
left:280,
top:30
});
var favoriteButton = Ti.UI.createButton
({
title:'btn',
//font:{fontFamily:'Helvetica Neue',fontSize:15},
top:20,
left:255,
height:30,
width:50,
url:'../Images/favorite.png'
//image:'../Images/favorite.png'
});
nameLabel.text = categoryName;
getDetailsData(addressLabel,row,i);
row.add(placeImage);
row.add(nameLabel);
row.add(addressLabel);
row.add(favoriteButton);
//row.add(arrowImage);
tableData[i] = row;
//set page title for each row
row.pageTitle = nameLabel.text;
favoriteButton.row = i;
favoriteButton.addEventListener('click', function(e)
{
Ti.API.log('favoriteButton clicked on row ' + e.source.row +' at ' + new Date().getSeconds());
alert('favoriteButton clicked on row ' + e.source.row);
var index = e.source.row;
var name = tableData[index];
alert('name'+name);
});
}
tableView.setData(tableData);
};
//-- Network error
loader.onerror = function(e)
{
Ti.API.info('Network error: ' + JSON.stringify(e));
};
// Send the HTTP request
loader.send();
return tableData;
};
Once you have your index, you should be able to reference your original data source by that.
var favoriteButton = Ti.UI.createButton({
title:'btn',
//font:{fontFamily:'Helvetica Neue',fontSize:15},
top:20,
left:255,
height:30,
width:50,
url:'../Images/favorite.png'
//image:'../Images/favorite.png',
name:categoryName,
address:address;//address mention here
});
row.add(favoriteButton);
favoriteButton.addEventListener('click', function(e)
{
var index = e.source.row;
var name = e.source.name;
var address = e.source.address;
alert('name'+name);
});
}
I think this might help you a lot.
I need two questions answer if possible:
How to set the key\value within the jQuery Autocomplete control.
Retrieve the selected value from the jQuery Autocomplete control once a user selects a school name.
Thank in advance for your help.
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
function RetrieveSchoolsBasedOnSchoolTypeSelected() {
//Item Selected Value
var ItemSelectedValue = $("#selSchoolTypes: option[selected]").val();
$("#example").val("");
$.getJSON("http://devportal2/apps/parisinterndb/_vti_bin/ListData.svc/Schools?$filter=SchoolTypeId eq " + ItemSelectedValue + "", function(DataResults) {
var count = 0;
var resultDataItems = "";
$.each(DataResults.d.results, function(i, result) {
var title = result.Title;
resultDataItems += title +",";
});
resultDataItems += "";
var data = resultDataItems.split(',');
$("#example").autocomplete(data,
{ delay: 10,
minChars: 1,
cacheLength: 10,
autoFill: true
});
});
$("#example").result(findValueCallback).next().click(function() {
$(this).prev().search();
});
}
function findValueCallback(event, data, formatted) {
alert(formatted+" "+data);
}
for getting the selected value,just parse the data paramter in the findValueCallback function.You may need to parse the "data" using split function and all.
ex : if (data != null) {
var model = "";
model = data.toString().split(".")[1];
selectedItem= data.toString().split(".")[0];
}
For setting the key value pair in the autosuggest dropdown,u can use the autocomplete function with a server page which can load data,
$("#txtSearchKey").autocomplete("Lib/ajaxpages/GetModelOptions.aspx", {
minChars: 2,
width: 550,
max: 4,
highlight: false,
scroll: true,
scrollHeight: 300,
formatItem: function(data, i, n, value) {
return "<b>" + value.split(".")[0] + "</b>";
},
formatResult: function(data, value) {
return value.split(".")[0];
}
});
the GetModelOptions.aspx can retun data in the form a string like
1.Alaska \n 2.Mexico \n 3.Michigan \n
and in the javascript u extract it