I've got an API (https://datatank.stad.gent/4/cultuursportvrijetijd/kunstenplan.json)
I have a list of art spot names that I got from that API displayed on a page. (actually different lists each filtered by category)
What I want is when you click on a name, you get more information about that art spot on a separate page. How do I do this?
Here's a snippet of my code that will display a list of museums.
var list_museums='';
var list_galleries='';
var list_centers='';
var list_offspaces='';
var list_search='';
var item_name='';
var item_location='';
var item_site='';
var item_category='';
var item_info='';
for(var i=0;i<this.cultuurUtilities.length;i++)
{
var cultuur=this.cultuurUtilities[i];
var museums = cultuur.categorie=="Museum";
var galleries = cultuur.categorie=="galerie";
var centers = cultuur.categorie=="Centrum voor beeldende kunst";
var offspaces = cultuur.categorie=="Off-Spaces";
console.log("cultuur for loop");
if(museums==true){
list_museums+='<div class="museum-item"><li class="li-museums"><img class="museum-img"></img><div class="museum-link"><a href="detailpagina.html">'+cultuur.Naam;
list_museums+='</a></div></li></div>';
What I want is when you click on a name, you get more information about that art spot on a separate page
I think you mean opening a new window/tab? You can accomplish this in different ways:
1) Adding the "onclick" listener on your clickable element and write the function to be called. Inside it, you can open a new window using the "window.open" function (it opens a new window by default, so you can pass a second parameter to specify the frame where the new window/tab must be handled, because you might wanted to open the page in a new tab, not a new window. Check the docs here). It returns its handle, so you can write into it, just like you do usually in your page.
For example:
var mywindow = window.open("path_to_follow");
// The first parameter is optional. By removing it, it will give you a blank page
mywindow.document.write("<h3>My Selected Museum</h3>");
<< bunch of other instructions >>
2) Using a anchor tag with "href" attribute and the selected item identifier passed as a GET parameter. For example:
<a target="_blank" href="path_to_follow/display_page?museum_id=dinamically_set_id">Click Here to open</a>
In your "display_page" (you can name it as you like) you manage to use some server-side language (like PHP, Java, etc...) to prepare a "stub" of your page, and filling with the selected museum informations, using the museum identifier we said before.
If you need further information, just comment!
Related
I have a list of courses in rows like this:
Whenever I click a row, a new tab is created, and a new window is added to that tab showing the course info.
Then if I press back, it goes back to the courses window, which is great, but when I click another course it adds that to the list of tabs, so it starts looking like this:
Whereas, there should only be two tabs here, the Courses tab and Get Courses tab.
In get_courses.js (the file that deals with making the rows) I have this event listener which creates a new tab every time a row is clicked (which I'm sure is where my mistake is, I'm just not sure how to fix it):
table.addEventListener("click",function(e){
var courseInfo_window = Titanium.UI.createWindow({
title:e.rowData.title,
url:'get_courseInfo.js',
courseIMISCode: e.rowData.courseIMISCode
});
var courseInfo_tab = Titanium.UI.createTab({
title:'Course Info',
window:courseInfo_window
});
Titanium.UI.currentTabGroup.addTab(courseInfo_tab);
});
Which I want to be there to create a Course Info tab, but then in get_courseInfo.js I have this, possibly redundant code:
Ti.UI.currentTabGroup.activeTab.open(courseInfo_window);
Which, in my noob mind seems necessary to open my courseInfo_window, but is accumulating the tabs in the bottom (as shown in the image earlier).
TL;DR: What do I need to do (probably in get_courses.js) to update the Course Info tab instead of opening a new tab for each row click?
You can access tabs in TabGroup through tabs property. However, it would be easier to keep reference to tab which you created outside of event listener and modify inside:
var courseInfo_tab = null;
table.addEventListener("click",function(e){
var courseInfo_window = Titanium.UI.createWindow({
title:e.rowData.title,
url:'get_courseInfo.js',
courseIMISCode: e.rowData.courseIMISCode
});
if (courseInfo_tab === null) {
courseInfo_tab = Titanium.UI.createTab({
title:'Course Info',
window:courseInfo_window
});
Titanium.UI.currentTabGroup.addTab(courseInfo_tab);
} else {
courseInfo_tab.window = courseInfo_window;
}
});
I hope someone can help me with this, It's a strange question maybe as I didn't find an answer online.
I call the database and retrieve a list (in json) of items.
Then in angularjs,I render this list by extracting relevant pieces of data(name,age,etc) and show it properly in a table as a list of rows.
I have then an edit button that takes me to another page where I want to put a dropdown list.
What I want to know if is possible to add to that dropdown list the rendered list I previously created in my previous page.
is it possible to save the previously rendered list in a variable and then use that variable in the dropdown?
thank you
You could store the list within a controller and make this data availablte to this dropdown, I think.
Instead of trying to query for the list, add the list to the template, get the list from the template and render somewhere else, I'd suggest query for the list, save the list in a service , and then when you want to use that list again, get it from the service. Something like:
service:
var services = angular.module('services');
services.factory('getListService',['$http',function($http){
var getListOfStuff = function(){
//call to database
return //your json
};
var extractNameAgeEtc = function(){
var myListOfStuff = //get list of stuff from $http or database
var myListOfNameAgeEtc = //make a list of tuples or {name,age,etc} objects
return myListOfNameAgeEtc;
};
return {
extractNameAgeEtc : extractNameAgeEtc
};
}]);
controllers:
angular.module('controllers',['services']);
var controllersModule = angular.module('controllers');
controllersModule.controller('tableRenderController',['getListService','$scope',function(getListService,$scope){
//use this with your table rendering template, probably with ng-repeat
$scope.MyTableValue = getListService.extractNameAgeEtc();
}]);
controllersModule.controller('dropdownRenderController',['getListService','$scope',function(getListService,$scope){
//use this with your dropdown rendering template, probably with ng-repeat
$scope.MyDropDownValue = getListService.extractNameAgeEtc();
}]);
that is we have opened many tabs.In that tabs i want to search specific tab. Please tell if any ext or option or add-on in chrome or firefox.
Firefox has this functionality built in. If you just start typing in the URL bar and the first character you type is % followed by a space, the rest of what you type will be treated as a search on the titles and urls of open tabs in all Firefox windows.
I'm not sure if this is the site to be asking for help finding extensions that do end user tasks such as this so I'll answer your question explicitly as well as explain how to do it programatically.
The short answer is, yes one extension that will allow you to do this can be found here:
Tab Title Search
The long answer is, in order to find all tabs with a certain name, you need to use the chrome tabs API
I whipped up a short piece of javascript to demonstrate how to have an extension that will create a popup with a search box that you type the desired tab title into. If the tab is found, it will be listed below the search box. If you click on the listing, you will switch to the tab.
// Function to search for tabs
function searchtabs() {
chrome.tabs.query({
title: ""
},
// Callback to process results
function(results) {
// Place holder for the tab to process
var foundTab = null;
// Text to match against
var queryText = document.getElementById("textToSearchInput").value;
// Div to place divs of matched title in
var queryAnswerDiv = document.getElementById("foundTabsDiv");
// Clear the current children
while (queryAnswerDiv.hasChildNodes()) {
queryAnswerDiv.removeChild(queryAnswerDiv.lastChild);
}
// Iterate over all the results
for (var i = 0; i < results.length; i++) {
// Keep track of the tab that is currently being processed
foundTab = results[i];
// If we have a title containing our string...
if (foundTab.title.indexOf(queryText) > -1) {
// Create a new div
var tabDiv = document.createElement("div");
// Set its content to the tabs title
tabDiv.innerHTML = foundTab.title;
// Let it know what the tabs id is
tabDiv.tabToSwitchTo = results[i].id;
// Allow for users to click on the representing div to switch to it
tabDiv.onclick = function() {
// Make the tab selected
chrome.tabs.update(this.tabToSwitchTo, {
selected: true
});
};
// Append the created div to our answer div
queryAnswerDiv.appendChild(tabDiv);
}
}
});
}
document.addEventListener('DOMContentLoaded', function() {
var inputField = document.getElementById("textToSearchInput");
inputField.focus();
inputField.onkeydown = searchtabs;
});
Also, if this is more what you are looking for rather than the extension that I linked, let me know and I can pack this extension.
Edit:
Fixed an error in using the wrong ID to get the input field as well as not getting the first letter of the title (use indexOf() > -1)
An extension that does this is Tab Hero for Chrome ($0.99 Chrome extension). It searches through all of the open tabs (across multiple windows) and offers to switch to the filtered tab. Try and see if it works for you.
I have a requirement where I need to remove or hide the default links displayed in Suite Bar like NewsFeed, SkyDrive, Sites etc. I want to add my own links and use this section as my Menu.
So while adding I want the items to be easily configurable by content editors. They can edit the links that needs to be shown and control the order. No hard coding of links.
If someone can help in this.
Regards,
navish
This can be done by oevrriding Delegate controls that displays these links. The below links will help
http://www.learningsharepoint.com/2013/02/10/addremove-links-in-top-suitebar-skydrivesitesnewsfeed-in-sharepoint-2013/
You should create a custom delegate control that target the SuiteLinksDelegate ControlId.
Add it to a Farm-scoped feature to make the custom delegate control active in the whole farm.
If you do not like hard-coded links you can program against a custom SharePoint list that stores the configurable links.
To Add custom links you can use the approach described here: http://zimmergren.net/technical/sp-2013-some-new-delegatecontrol-additions-to-the-sharepoint-2013-master-pages
If you need to remove some built-in links while keeping others (I had this requirement) you can use code like this:
public partial class SuiteLinksDelegate : MySuiteLinksUserControl
{
protected override void Render(HtmlTextWriter writer)
{
// save for later
var httpwriter = (writer.InnerWriter as HttpWriter);
// hijack the innerwriter
var sb = new StringBuilder();
var sw = new StringWriter(sb);
var tw = new HtmlTextWriter(sw);
writer.InnerWriter = tw;
// call base
base.Render(writer);
// get the html
var currentHtml = sb.ToString();
XElement element = XElement.Parse(currentHtml);
// remove SkyDrive link
var suiteLinkNodes = element.Elements("li").ToArray();
var remainingNodes = suiteLinkNodes.Where(node => !(node.ToString().Contains("ShellDocuments")));
element.ReplaceNodes(remainingNodes);
var modifiedHTML = element.ToString();
// set back the old innerwriter
writer.InnerWriter = httpwriter;
// write delegate control html
httpwriter.Write(modifiedHTML);
}
}
You can use javascript approach to hide this links as described in below link
http://www.tuyrcorp.com/sharepoint-2013-top-links-name-id-and-how-to-hide-them/
you can also add new item in the dropdown using this same javascript as well
Hope this helps
Thanks
I'm working on a Spotify app and trying to create a views.List object from some stored information in our database. On initial load, a POST is made to get the necessary info. I store this in localstorage so each subsequent request can avoid hitting the database and retrieve the object locally. What's happening though is the List objects I create from localstorage data come up blank, while the POST requests work just fine.
Here is the snippet I'm using to create the list:
var temp_playlist = models.Playlist.fromURI(playlist.uri);
var tempList = new views.List(temp_playlist, function (track) {
return new views.Track(track, views.Track.FIELD.STAR |
views.Track.FIELD.NAME |
views.Track.FIELD.ARTIST |
views.Track.FIELD.DURATION);
});
document.getElementById("tracklist").appendChild(tempList.node);
playlist.uri in the first line is what I'm retrieving either from a POST or from localstorage. The resulting views.List object (tempList) looks identical in both cases except for tempList.node. The one retrieved from localstorage shows these values for innerHTML, innerText, outerHTML, and outerText in console.log:
innerHTML: "<div style="height: 400px; "></div>"
innerText: ""
outerHTML: "<div style="height: 400px; "></div>"
outerText: ""
Whereas the one retrieved via POST has the full data:
innerHTML: "<div style="height: 400px; "><a href="spotify:track:07CnMloaACYeFpwgZ9ihfg" class="sp-item sp-track sp-track-availability-0" title="Boss On The Boat by Tosca" data-itemindex="0" data-viewindex="0" style="-webkit-transform: translateY(0px); ">....
innerText: "3Boss On The BoatTosca6:082....
and so forth..
Any help would be greatly appreciated
Solved this.
I am using hide() and show() to render the tabs in my app. I was constructing the tracklist and then show()ing the div which led to a blank tracklist. If I simply show() the div and then construct the tracklist it works fine.
The reason (I think) it was working for POSTs is because the tracklist was retrieved from the database and the slightly longer loading time probably meant the tracklist was constructed after the div's show() executed. With localStorage I guess the tracklist was constructed before the div was even shown, leading to the error.
Using, the local storage, I did it this way :
sp = getSpotifyApi(1);
var m = sp.require("sp://import/scripts/api/models");
var v = sp.require("sp://import/scripts/api/views");
var pl;
pl = m.Playlist.fromURI(uri);
var player = new v.Player();
player.track = pl.get(0);
player.context = pl;
var list = new v.List(pl);
XXXXX.append($(list.node));
Hope, it will help, as it's working for me
I think I've actually managed to solve this and I think it's bulletproof.
Basically I was trying to solve this by trying to convince the API that it needed to redraw the playlist by hiding things/scrolling things/moving things which worked occasionally but never consistently. It never occurred to me to change the playlist itself. Or at least make the API think the playlist has changed.
You can do so by firing an event on the Playlist object.
var models = sp.require('$api/models');
...
// playlist is your Playlist object. Usually retrieved from models.Playlist.fromURI
playlist.notify(models.EVENT.CHANGE, playlist);
These are just standard Spotify functions and the list updates because it thinks something has changed in the playlist. Hope this helps someone!