'MyHTTPlink (mentioned in my code] consists some Restaurant Name, url, address. Using this code to i list all restaurant name and url in my table. Now I want to do, how to send the table row details to next window(.js page). The restaurant url consist lot of menu items for each restaurant. List the menu items in table row on next page. How to code that?'
var win = Titanium.UI.createWindow ({ backgorundColor: '#000'});
var tableview = Ti.UI.createTableView({
height:'auto',
layout:'vertical',
top:5,
right:5,
bottom:5, left:5 });
var data = [];
var xhr = Ti.Network.createHTTPClient ({
onload: function () {
alert("success!");
var json = JSON.parse(this.responseText);
for (var i = 0; i < json.connectionResponses.length; i++) {
var row = Ti.UI.createTableViewRow({
height: 60,
});
var restLabel = Ti.UI.createLabel({
text: json.connectionResponses[i].restaurantName,
height: 'auto',
left:54,
top: 5,
font:{ fontSize:20 }
});
var connLabel = Ti.UI.createLabel({
text: json.connectionResponses[i].connectingurl,
height: 'auto',
left:54,
bottom:5,
font:{ fontSize:14 }
});
var image = Titanium.UI.createImageView({
image:'images/menu_icon.png',
top:4,
left:0,
height:45,
width:41
});
row.add(restLabel);
row.add(connLabel);
row.add(image);
data.push(row);
}
tableview.setData(data);
},
onerror: function () {
alert('There was an error retrieving the remote data. Try again.');
}
//timeout:5000
});
xhr.open("GET", "http:MYHTTPlink");
xhr.send();
tableview.addEventListener('click',function(e){
//alert("RS Name : " +e.row.title);
var winn = Ti.UI.createWindow({ url:'hotelpage.js'});
winn.open();
//var hostelwin = require('hotelpage').gethotelWin;
//var newwin = new hotelwin();
//newwin.open();
});
win.add(tableview);
win.open();
Please just check below Code and use in your code.
you can perform your work like this.
tableview.addEventListener('click',function(e){
//alert("RS Name : " +e.row.title);
var winn = Ti.UI.createWindow({
url:'hotelpage.js',
row_title : e.row.title,
all_info: e.row,
});
winn.open();
//var hostelwin = require('hotelpage').gethotelWin;
//var newwin = new hotelwin();
//newwin.open();
});
and in "hotelpage.js"
var curtWind = Ti.UI.currentWindow;
// Get Data like this
var title = curtWind.row_title;
var allData = curtWind.all_info;
// and you can use as per your requirement.
May be this is Helpful for you,
Thanks,
In addition to what MRT answered that is correct and working, you could use this code that avoid the use of url property as recommended here: Titanium 3.X documentation
In your code:
tableview.addEventListener('click',function(e){
hotelWin = require('/yourpath/hotelpage');
var hotelW = new hotelWin(e.row.title, e.row.id)
});
In hotelpage.js
function external(title, id) {
var hotelPageWin = Titanium.UI.createWindow({
//properties here
});
//You have available here two variables:
//title with assigned the value of e.row.title
//id with assigned the value of e.row.id
hotelPageWin.open();
return hotelPageWin;
};
module.exports = external;
Related
I wrote an custom API(node.js app) that gets the info about the blogs from medium.com, right now there is
the author/main pic of the article,
title,
link to the article on medium.com(redundant),
the entire article text, in the JSON output.
Sample API/JSON:
{
"img": [
"https://upload.wikimedia.org/wikipedia/commons/4/42/Blog_%281%29.jpg"
],
"title": [
"The old and the new or not so new: Java vs JavaScript"
],
"link": [
"https://medium.com/#aki9154/the-old-and-the-new-or-not-so-new-java-vs-javascript-760f84e87610?source=rss-887f1b1ddb75------2"
],
"desc": [
"<p>It’s funny how the name JavaScript makes you believe that it is somehow..."
]
}
Then i am polling this API/JSON and spitting out the output in a thumbnail format, basic html for now(no design/CSS).
Where i am stuck is when a user clicks on a thumbnail and i need to make sure that i display the correct article?!
For which i need to display a new page when the thumbnail/article is clicked, i can use #4 from JSON above as an output for that dynamically created new page and put it out nicely)
The issue that i am facing now is how to dynamically produce the correct article when the dynamically created link is clicked?
Right now nothing happens when i click on the thumbnail and that's what this project link displays...
I did some stackoverflow research and read some jQuery docs(event propagation and more...) and was able to make changes to the index.js, below is how it looks like but nothing works, any help will be appreciated...
index.js:
$(function () {
var desc = "";
function newWin() {
var w = window.open();
$(w.document.body).html('<p>'+desc+'</p>');
}
var $content = $('.cards-in-grid');
var url = 'link-for private use now';
$.get(url, function (response) {
var output = '';
console.log(response);
$.each(response, function (k, item) {
title = item.title;
var author = item.img;
desc = item.desc;
output += '<li><img src="'+author+'" alt=""><h2>' + title + '</h2></li>';
$(".cards-in-grid ul").on("click", "li", function(){
newWin;
});
return k;
});
$content.html(output);
});
});
`
$(function () {
var $content = $('.cards-in-grid');
var url = 'link-for private use now';
$.get(url, function (response) {
var output = '';
var list = "li";
$.each(response, function (k, item) {
var listNum = list+k;
var idy = "#"+listNum;
var desc = "";
title = item.title;
var author = item.img;
desc = item.desc;
//GIVE ID to each LI using a variable
output += '<li id="'+listNum+'"><img src="'+author+'" alt=""><h2>' +
title + '</h2></li>';
$content.html(output);
$content.on("click",idy, function(){
var w = window.open();
$(w.document.body).html('<p>'+desc+'</p>');
});
return k;
});
});
});
This worked perfectly, some thinking and pondering and was able to make it work!!
Kindly Upvote the answer, if it helped you! Thanks!
Im working on an application for google calendar. I can get calendars, create events and display them but i cannot seem to update a specific calendars metadata.
I have this function
function setCalendarDescription(calendarId) {
var send ={
"resource" :{
"description" : "test"
}
};
console.log(send);
var request = gapi.client.calendar.calendars.update({
'calendarId': calendarId,
'resource': send
});
console.log(request);
request.execute(function(resp) {
alert("updated description in calendar");
});
}
And im calling it in this function
function listCalendars() {
var request = gapi.client.calendar.calendarList.list();
request.execute(function(resp) {
var calendars = resp.items;
var counter = 0;
//console.log(calendars);
for (i = 0; i < resp.items.length; i++) {
var calendar = resp.items[i];
var calId = calendar.id;
var calName = calendar.summary;
var accessRole = calendar.accessRole;
if (accessRole == "owner") {
var ulEvents = document.getElementById("events");
var nH3 = document.createElement('ul');
var nH3Text = document.createTextNode("Upcoming events for calendar " + calName + ":");
nH3.appendChild(nH3Text);
nH3.setAttribute("id", "upcoming" + i);
ulEvents.appendChild(nH3);
listUpcomingEvents(calId, counter);
calendarArray[counter] = calendar;
setCalendarDescription(calId);
counter++;
}
}
});
}
I have looked here for a solution and the web but have yet to find one.
If anyone has some directions i'd appreciate it.
Thanks
I did not look thoroughly enough the documentation and the answer was right there.
It's not enough to only supply a description for the calendar, you need to supply
description string Description of the calendar.
location string Geographic location of the calendar as free-form text.
summary string Title of the calendar.
timeZone string The time zone of the calendar.
I have implemented this map of the us in a server but i'm trying to change the color of some states based on a mysql response, but i haven't been able to do it
Here's the code i have
<script type="text/javascript" src="includes/js/jquery-2.1.0.min.js">
</script>
<script src="includes/js/jquery.vmap.js"></script>
<script src="includes/js/jquery.vmap.canada.js"></script>
<script src="includes/js/jquery.vmap.usa.js"></script>
<script>
$(document).ready(function(){
var states_colors = {};
var states = {};
$.post("state_service.php", function(data) {
var states_data = data.split(',');
for (var i = 0; i < states_data.length; i++) {
states[i] = states_data[i].replace(/[""\[\]]+/g, '');
states_colors[i] = states[i]+': #8EE5EE,';
};
console.log(states_colors);
$('#vmap').vectorMap('set', 'colors', states_colors);
});
$('#vmap').vectorMap({
map: 'usa_en',
backgroundColor: null,
color: '#F58025',
hoverColor: '#754200',
selectedColor: '#754200',
enableZoom: false,
showTooltip: false,
onRegionClick: function(element, code)
{
var arr = [];
arr = code.split('-');
var url = 'search.php?';
var query = 'keywords=&city=&state='+arr[1];
window.location.href = url + query;
}
});
});
</script>
<div id="vmap" style="width: 600px; height: 600px;"></div>
And this is what the Json response brings me which are the states that i want to highlight
["AB","CO","UT"]
According to the docs following function is correct
$('#vmap').vectorMap('set', 'colors', states_colors);
but setColors function which takes key and color as arguments. so i changed to following, it started working
$('#vmap').vectorMap('set', 'colors', states[i], '#8EE5EE');
example : http://codepen.io/anon/pen/RPjJYb
used following libraries for the site
http://jqvmap.com/js/vmap/jquery.vmap.js?v=1.0
http://jqvmap.com/js/vmap/jquery.vmap.usa.js?v=1.0
Just change the sequence of scripts
First initialise the vectormap and then call for state colors..
2nd Guess
Initialise the vectormap in the document.ready
3rd Attempt
Make the state_color array global and then call the array in vectormap initalisation
for eg
states_colors = {};
states_colors ['AB'] = '#A4D886';
states_colors ['UT'] = '#FCECA2';
states_colors ['CO'] = '#8EE5EE ';
$('#vmap').vectorMap({
colors: states_colors,
map: 'usa_en',
backgroundColor: null,
hoverColor: '#754200',
selectedColor: '#754200',
enableZoom: false,
showTooltip: false,
onRegionClick: function(element, code)
{
var arr = [];
arr = code.split('-');
var url = 'search.php?';
var query = 'keywords=&city=&state='+arr[1];
window.location.href = url + query;
}
});
if you can replicate the situation in the FIDDLE below
http://jsfiddle.net/8yp2u9bh/2/
I am using the following snippet and from this I can find the index of a row which one is selected on the basis of checkbox on every row of the table.How can I modify this snippet so that I can get the selected row data instead of index?
Please Help!!
<script>
function myfunction3() {
var element_table = document.getElementsByName('collection');
var element_tableRows = element_table[0].rows;
var selectedTr = new Array();
var data = "";
for (var i = 0; i < element_tableRows.length; i++) {
var checkerbox = element_tableRows[i].cells[0].firstChild;
if (checkerbox.checked) {
data = data+ element_tableRows[i].getAttribute("name");
}
}
var element_paragraph = document.getElementsByName('description');
element_paragraph.innerHTML = data;
alert(data);
}
</script>
as TJ says, i dont see any index in your code. but try something like this which is cleaner
$('.collection tr').each(function () {
//processing this row
$(this).find('td input:checked').each(function () {
// there is checkbox and it is checked, do your business with it
var value_of_checkbox = $(this).val(); // which is 'data' that you wanted
});
});
How to add a title for the JqueryUI dialog box for this case. This dialog box opens as per the model name in ruby on rails.
Example of the html page:
<%= link_to pro_generic_lookup_data_path("Enr::Rds::Section2009", format: :js), data: {remote: true} %>
Here, the pro_generic_lookup_data is have the option of uidialog box. So, it would open depend upon the model name("Enr::Rds::Section2009").
JavaScript
var generic_lookup_Enr_Rds_Section2009_selected = function(id, to_s) {
var section_value = $(".cross-reference-section-value");
var section_id = $(".cross-reference-section-value-id");
var section_clear_img = $(".cross-reference-section-clear-img");
section_id.val(id);
section_value.text(to_s);
section_value.css('display', 'inline');
section_clear_img.css('display', 'inline');
$(section_clear_img).on('click', function() {
section_value.text('')
section_id.val('')
section_clear_img.css('display', 'none');
});
var question_link = $('#question_picker').attr('href');
question_link = question_link.replace(/\?+$/, '');
question_link = question_link + '?columns[enr_rds_section_id]=' + id;
$('#question_picker').attr('href', question_link);
$("#modal_popup").dialog("destroy");
};
I have three fields like this same. So, I need to give a separate titles for all the three fields. Thanks!
Other than some basic formatting and using chained selectors where applicable, the code is fine.
var generic_lookup_Enr_Rds_Section2009_selected = function(id, to_s) {
var $section_value = $(".cross-reference-section-value");
var $section_id = $(".cross-reference-section-value-id");
var $section_clear_img = $(".cross-reference-section-clear-img");
$section_id.val(id);
$section_value.text(to_s).css('display', 'inline');
$section_clear_img.css('display', 'inline').on('click', function() {
$section_value.text('')
$section_id.val('')
$section_clear_img.css('display', 'none');
});
var question_link = $('#question_picker').attr('href');
question_link = question_link.replace(/\?+$/, '');
question_link = question_link + '?columns[enr_rds_section_id]=' + id;
$('#question_picker').prop('href', question_link);
$("#modal_popup").dialog("destroy");
};