I'm upgrading my Ionic 3 app to Ionic 4.
I'm working google maps and markers. I added few buttons in infoWindow and declared an attirbute data-id. Now I want to get these buttons using this attribute data-id
Here's the related code:
let content = '<b>' + locations[i].name + '</b><br/>' + locations[i].street + "<br/>";
content += "<button id='edit-customer-" + i + "' class='edit-customer button button-md button-default-secondary button-default-md' ion-button data-id='" + locations[i].id + "'>Editar</button>";
content += "<button id='order-customer-" + i + "' class='order-customer button button-md button-default-secondary button-default-md' ion-button data-id='" + locations[i].id + "'>Pedido</button>";
content += "<button id='event-customer-" + i + "' class='event-customer button button-md button-default-secondary button-default-md' ion-button data-id='" + locations[i].id + "'>Evento</button>";
infowindow.setContent(content);
google.maps.event.addListenerOnce(infowindow, 'domready', () => {
let infoWindow = infowindow;
document.getElementById('edit-customer-' + i).addEventListener('click', (event) => {
var targetElement = (<HTMLButtonElement>event.target || event.srcElement);
var id = targetElement.getAttribute("data-id"); //getAttribute shows syntax error 'Property "getAttribute" does not exist on type "EventTarget"'
infoWindow.close();
me.editCustomer(id);
});
});
var id = targetElement.getAttribute("data-id");
syntax error 'Property getAttribute does not exist on type EventTarget'
Am I doing something wrong?
Any alternate way to getAttribute?
Related
I am creating a dynamic element as such:
strDivAttend += "<div class=\"row\" id=\"otherAttendee__" + i + "\"><div class=\"col-md-12\"><div class=\"col-md-3\"><div class=\"form-group\">";
strDivAttend += "<label class=\"control-label required\" for=\"newAttendees_" + i + "__AttendeeName\">Attendee Name</label>";
strDivAttend += "<input type=\"hidden\" name=\"newAttendees.Index\" value='" + i + "' /><input class=\"form-control text-box single-line\" data-val=\"true\" data-val-required=\"The Attendee Name field is required.\" id=\"newAttendees_" + i + "__AttendeeName\" name=\"newAttendees[" + i + "].AttendeeName\" type=\"text\" value=\"\" />";
strDivAttend += "<span class=\"field-validation-valid text-danger\" data-valmsg-for=\"newAttendees[" + i + "].AttendeeName\" data-valmsg-replace=\"true\"></span>";
strDivAttend += "</div></div>";
strDivAttend += "<div class=\"col-md-3\" style=\"margin-top: 35px;\">";
strDivAttend += "<a id=\"removeOtherAttend__" + i + "\" href=\"javascript:void(0)\" class=\"removeButtonAttend\" style=\"color:#aaa;\"><i class=\"fa fa-times-circle\"></i> remove</a>";
strDivAttend += "</div></div></div>";
$('#dvOtherAttendees').append(strDivAttend);
The problem that I am running into is that even though the dynamically created script has field validation in there, it is not enforced. Any assistance would be helpful.
Client side validation is initialized on initial page load, any elements added dynamically afterwards won't be validated unless you re-parse your document.
$('form').removeData('validator').removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(document);
I have the following highcharts graph
https://jsfiddle.net/deemgfay/
and I am trying to display the "Consum Test" values in the tooltip but without adding them to the series. I just want to add Consum (l/100km)
Total Consum (l) to the series. Is that possible with hightcharts? Please see the screenshot below.
You can set the extra series to be hidden and ignored in legend:
visible: false,
showInLegend: false
Then use tooltip formatter function (useHTML must be enabled) to display points from all series in the shared tooltip regardless of their visibility:
formatter: function() {
var html,
originalPoint = this.points[0];
// header
html = "<span style='font-size: 10px'>" + originalPoint.x + "</span><br/>";
// points
originalPoint.series.chart.series.forEach(function(series) {
var point = series.points.find((p) => p.x === originalPoint.point.x);
html += "<span style='color: " + series.color + "'>\u25CF</span> " + series.name + ": <b>" + point.y + "</b><br/>"
});
return html;
}
Live demo: https://jsfiddle.net/kkulig/1oggzsx0/
API references:
http://api.highcharts.com/highcharts/tooltip.formatter
http://api.highcharts.com/highcharts/tooltip.useHTML
This can be done by using tooltip.formatter. Here I append to tooltip info based on index of current series from index of required extra array.
formatter: function() {
var s = '<b>' + this.x + '</b>';
var reqpoint = 0;
$.each(this.points, function() {
var reqpoint = this.point.index
s += '<br/>' + this.series.name + ': ' +
this.y.toFixed(2) + 'm';
if (this.series.index == 1) {
s += '<br/>Test Consum (l): ' + extraData[reqpoint] + 'm';
}
});
return s;
},
Fiddle demo
I want to get all videos of a single channel that i have its Id. The problem that I am getting only the channel informations.
this is the link that I am using:
https://gdata.youtube.com/feeds/api/users/UCdCiB_pNQpR0M_KkDG4Dz5A?v=2&alt=json&q=goal&orderby=published&max-results=10
That link is for the now-retired V2 API, so it will not return any data. Instead, you'll want to use V3 of the API. The first thing you'll need to do is register for an API key -- you can do this by creating a project at console.developers.google.com, setting the YouTube data API to "on," and creating a public access key.
Since you have your user channel ID already, you can jump right into getting the videos from it; note, however, that if you ever don't know the channel ID, you can get it this way:
https://www.googleapis.com/youtube/v3/channels?part=snippet&forUsername={username}&key={YOUR_API_KEY}
With the channel ID, you can get all the videos from the channel with the search endpoint, like this:
https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId={channel id here}&maxResults=25&key={YOUR_API_KEY}
In this case, ordering by date is the same as the old V2 parameter for ordering by "published."
There are also a lot of other parameters you can use to retrieve videos while searching a channel; see https://developers.google.com/youtube/v3/docs/search/list for more details.
I thought I would share my final result using JavaScript. It uses the Google YouTube API key and UserName to get the channel ID, then pulls the videos and displays in a list to a given div tag.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>YouTube Channel Listing</title>
<script type="text/javascript">
function getJSONData(yourUrl) {
var Httpreq = new XMLHttpRequest();
try {
Httpreq.open("GET", yourUrl, false);
Httpreq.send(null);
} catch (ex) {
alert(ex.message);
}
return Httpreq.responseText;
}
function showVideoList(username, writediv, maxnumbervideos, apikey) {
try {
document.getElementById(writediv).innerHTML = "";
var keyinfo = JSON.parse(getJSONData("https://www.googleapis.com/youtube/v3/channels?part=snippet&forUsername=" + username + "&key=" + apikey));
var userid = keyinfo.items[0].id;
var channeltitle = keyinfo.items[0].snippet.title;
var channeldescription = keyinfo.items[0].snippet.description;
var channelthumbnail = keyinfo.items[0].snippet.thumbnails.default.url; // default, medium or high
//channel header
document.getElementById(writediv).innerHTML += "<div style='width:100%;min-height:90px;'>"
+ "<a href='https://www.youtube.com/user/" + username + "' target='_blank'>"
+ "<img src='" + channelthumbnail + "' style='border:none;float:left;margin-right:10px;' alt='" + channeltitle + "' title='" + channeltitle + "' /></a>"
+ "<div style='width:100%;text-align:center;'><h1><a href='https://www.youtube.com/user/" + username + "' target='_blank'>" + channeltitle + "</a></h1>" + channeldescription + "</div>"
+ "</div>";
var videoinfo = JSON.parse(getJSONData("https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId=" + userid + "&maxResults=" + maxnumbervideos + "&key=" + apikey));
var videos = videoinfo.items;
var videocount = videoinfo.pageInfo.totalResults;
// video listing
for (var i = 0; i < videos.length; i++) {
var videoid = videos[i].id.videoId;
var videotitle = videos[i].snippet.title;
var videodescription = videos[i].snippet.description;
var videodate = videos[i].snippet.publishedAt; // date time published
var videothumbnail = videos[i].snippet.thumbnails.default.url; // default, medium or high
document.getElementById(writediv).innerHTML += "<hr /><div style='width:100%;min-height:90px;'>"
+ "<a href='https://www.youtube.com/watch?v=" + videoid + "' target='_blank'>"
+ "<img src='" + videothumbnail + "' style='border:none;float:left;margin-right:10px;' alt='" + videotitle + "' title='" + videotitle + "' /></a>"
+ "<h3><a href='https://www.youtube.com/watch?v=" + videoid + "' target='_blank'>" + videotitle + "</a></h3>" + videodescription + ""
+ "</div>";
}
} catch (ex) {
alert(ex.message);
}
}
</script>
</head>
<body>
<div id="videos"></div>
<script type="text/javascript">
showVideoList("USER_NAME", "videos", 25, "YOUR_API_KEY");
</script>
</body>
</html>
ADDITION - I also wrote a function to handle if you are using a channel ID instead of a UserName based account.
Here is that code:
function showVideoListChannel(channelid, writediv, maxnumbervideos, apikey) {
try {
document.getElementById(writediv).innerHTML = "";
var vid = getJSONData("https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId=" + channelid + "&maxResults=" + (maxnumbervideos + 1) + "&key=" + apikey);
var videoinfo = JSON.parse(vid);
var videos = videoinfo.items;
var videocount = videoinfo.pageInfo.totalResults;
var content = "<div style='height:600px;overflow-y:auto;'>";
for (var i = 0; i < videos.length - 1; i++) {
var videoid = videos[i].id.videoId;
var videotitle = videos[i].snippet.title;
var videodescription = videos[i].snippet.description;
var videodate = videos[i].snippet.publishedAt; // date time published
var newdate = new Date(Date.parse((videodate + " (ISO 8601)").replace(/ *\(.*\)/, "")));
var min = newdate.getMinutes();
if (min < 10) {
min = "0" + min;
}
if (newdate.getHours() > 12) {
newdate = newdate.getMonth() + 1 + "/" + newdate.getDate() + "/" + newdate.getFullYear() + " " + (newdate.getHours() - 12) + ":" + min + " PM";
} else if (newdate.getHours() == 12) {
newdate = newdate.getMonth() + 1 + "/" + newdate.getDate() + "/" + newdate.getFullYear() + " " + newdate.getHours() + ":" + min + " PM";
} else {
newdate = newdate.getMonth() + 1 + "/" + newdate.getDate() + "/" + newdate.getFullYear() + " " + newdate.getHours() + ":" + min + " AM";
}
var videothumbnail = videos[i].snippet.thumbnails.default.url; // default, medium or high
content += "<hr /><div style='width:100%;min-height:90px;'>"
+ "<a href='https://www.youtube.com/watch?v=" + videoid + "' target='_blank'>"
+ "<img src='" + videothumbnail + "' style='border:none;float:left;margin-right:10px;' alt='" + videotitle + "' title='" + videotitle + "' /></a>"
+ "<h3><a href='https://www.youtube.com/watch?v=" + videoid + "' target='_blank'>" + videotitle + "</a></h3>" + videodescription + "<br />"
+ "<span style='color:#738AAD;font-size:Small;'>" + newdate + "</span>"
+ "</div>";
}
content += "</div>";
document.getElementById(writediv).innerHTML = content;
} catch (ex) {
alert(ex.message);
}
}
It is very easy method to get channel videos using your channel API key:
Step 1: You must have an YouTube account.
Step 2: Create your YouTube channel API key
Step 3: Create project console.developers.google.com,
<?php
$API_key = 'Your API key'; //my API key dei;
$channelID = 'Your Channel ID'; //my channel ID
$maxResults = 5;
$video_list =
json_decode(file_get_contents('https://www.googleapis.com/youtube/v3/search?
order=date&part=snippet&channelId='.$channelID.
'&maxResults='.$maxResults.'&key='.$API_key.''));
?>
Example : https://www.googleapis.com/youtube/v3/channelspart=snippet&forUsername=
{username}&key={YOUR_API_KEY}
Here is the way to get all videos with only 2 quotas using YouTube Data API (v3)
First of all do a list on channels with part=contentDetails (1 quota) :
https://youtube.googleapis.com/youtube/v3/channels?part=contentDetails&id=[CHANNEL_ID]&key=[YOUR_API_KEY]
You will get this result :
{
...
"items": [
{
...
"contentDetails": {
"relatedPlaylists": {
"likes": "",
"uploads": "UPLOADS_PLAYLIST_ID"
}
}
}
]
}
Then take UPLOADS_PLAYLIST_ID and do a list on playlistItems with part=contentDetails (1 quota):
https://youtube.googleapis.com/youtube/v3/playlistItems?part=contentDetails&playlistId=[UPLOADS_PLAYLIST_ID]&key=[YOUR_API_KEY]
You will get this result:
{
...
"items": [
{
...
"contentDetails": {
"videoId": "VIDEO_ID",
"videoPublishedAt": "2022-10-27T16:00:08Z"
}
},
...
],
"pageInfo": {
"totalResults": 5648,
"resultsPerPage": 5
}
}
You got the list of the videos under items
You can of course change the size of this list by adding maxResults=50 (max value is 50)
it's my first qestion in stack !
I try to add multiple hidden value in tooltip
my data example :
var sample1= [{y:3.1,ext1:'14.5',ext2:'14.5',color:'#0ef43c'},{y:2.9,ext1:'14.2',ext2:'14.5',color:'#30ff21'},{y:2.9,ext1:'14.2',ext2:'14.5',color:'#42ff2c'},etc...
var sample2= [{y:3.1,ext1:'14.5',ext2:'14.5',color:'#0ef43c'},{y:2.9,ext1:'14.2',ext2:'14.5',color:'#30ff21'},{y:2.9,ext1:'14.2',ext2:'14.5',color:'#42ff2c'},etc...
and my tooltip
tooltip: {
shared: true,
formatter: function() {
var txt = Highcharts.dateFormat("<b>%Hh</b>", this.x);
txt += "<br /><b>Sample 1: </b>"+ this.points[0].point.y + " m - " + this.points[0].point.ext1 + "s" + this.points[0].point.ext2+ "s";
txt += "<br /><b>Sample 2: </b>"+ this.points[1].point.y + " m - " + this.points[1].point.ext1+ "s" + this.points[1].point.ext2+ "s";
txt += "<br />Sample 3: :" + this.points[2].point.y + " m";
return txt;
}
},
But there is problem with hidden data , so is there a way for use a code as
sample1.data.point.ext1
instead of this.points[0].point.ext1 ?
Thanks
I am having an issue using a single page approach. When I move to my "filter page" I want to populate a list of applications via ajax i simulated the call here.
function populateList()
{
$('#drpApplication').empty().listview('refresh');
if (typeof cache["FilterCounter"] == "undefined") {
cache["FilterCounter"] = 1;
}
var listItem = "<option value=" + '\'' + '1' + '\'' + ">" + 'Name1' + "</option>";
$('#drpApplication').append(listItem);
var listItem2 = "<option value=" + '\'' + '2' + '\'' + ">" + 'Name2' + "</option>";
$('#drpApplication').append(listItem2);
var listItem3 = "<option value=" + '\'' + '3' + '\'' + ">" + 'Name3' + "</option>";
$('#drpApplication').append(listItem3);
}
Clicking apply puts me to another page, then when I go back to the filter page the application list Appends a new set of data. Eventhough I tell it to empty the dropdown first. Also selecting an application in the dropdown is suppose to add the selection to another listview on the page
$('#drpApplication').change(function () {
$("#drpApplication option:selected").each(function () {
var filterItemId = 'liApplicationName' + cache["FilterCounter"].toString();
$('#lstApplicationList').append('<li value="' + $(this).val() + '" id="' + filterItemId + '"data-icon="delete"><a onclick="removeFilterItem(\'' + filterItemId + '\')">' + $(this).text() + '</a></li>').listview('refresh');
cache["FilterCounter"] = cache["FilterCounter"] + 1;
});
}).change();
What happens on subsequent visits is when you select an application from the dropdown it puts 2 of the same entries in the listview on the second visit and 3 entries every 1 one selection on the 3rd visit to the page and so on.
It seems that the DOM is caching its contents or something and i cannot stop it?
I started a jfiddle for this but my function to populate the list isnt running. I just started using jfiddle so maybe I have the simulation setup incorrectly?
http://jsfiddle.net/D2gbq/27/
It looks like you are emptying the selects, then refreshing the listview, and then appending the new options. You need to refresh the listview after you append the options in order to make them appear.
Try this:
function populateList()
{
$('#lstApplicationList').empty();
$('#drpApplication').empty();
if (typeof cache["FilterCounter"] == "undefined") {
cache["FilterCounter"] = 1;
}
var listItem = "<option value=" + '\'' + '1' + '\'' + ">" + 'Name1' + "</option>";
$('#drpApplication').append(listItem);
var listItem2 = "<option value=" + '\'' + '2' + '\'' + ">" + 'Name2' + "</option>";
$('#drpApplication').append(listItem2);
var listItem3 = "<option value=" + '\'' + '3' + '\'' + ">" + 'Name3' + "</option>";
$('#drpApplication').append(listItem3);
$('#lstApplicationList').listview('refresh');
$('#drpApplication').listview('refresh');
}