When i use ons.navigator.pushPage and navigate to searchNearby html page it should show me current geolocation coordinates. However it doesnt do that. when i load the searchNearby page directly it shows coordinates that perfectly. Any idea about it
index.html
<body ng-controller="courseController">
<ons-navigator title="Class Finder">
<ons-page>
<ons-row>
<ons-col size="80" style="padding: 8px">
<ons-search-input ng-model="searchText" placeholder="Search..." >
</ons-search-input>
</ons-col>
<ons-col size="20" >
<ons-button type="large--quiet" ng-click="ons.navigator.pushPage('searchNearby/index.html',{title:'Search Nearby'})">Search nearby
</ons-button>
</ons-col>
</ons-row>
</ons-page>
</ons-navigator>
</body>
searchNearby/index.html
<body>
<p id="geolocation">Finding geolocation...</p>
<div id="t01"> </div>
<script type="text/javascript" charset="utf-8">
var lat,lon;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + position.timestamp + '<br />';
}
function onError(error){
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</body>
Your JS is not getting fired on searchNearby/index.html because you page is being loaded asynchronously.
I would suggest setting up some kind of callback for when then page has fully loaded, so you can execute your getCurrentPosition method.
Alternatively, you could get the position beforehand and then pass the success object over to the searchNearby page.
Related
The instafeed api stopped working on my site. The error I am getting is:
A cookie associated with a cross-site resource at https://instagram.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
Chrome changed something and I am trying to understand. Any help would be appreciated.
The site where I wrote this is here. http://galnova.com
var accessToken = '271323200.1677ed0.0a4c06efd9474022b9c3eb47bccf5657'; // use your own token 713486902779818|vM5scnvKTkbBmLbsSgBTPVi3Gqs
$.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
$.each(insta.data,function (photos,src) {
if ( photos === 6 ) { return false; }
var date = new Date(parseInt(this.created_time) * 1000);
// template
$(
'<div class="col-sm-6 col-md-3 col-lg-2 grip_wrap flx gonzo">' +
'<div class="grip_hang_topp"></div>' +
'<div class="col grip flex_el flx_ex">' +
'<a title="' + this.caption.text + '" class="fancybox zero lass" data-fancybox="gallery1" data-caption="' + this.caption.text + '" href="' + this.images.standard_resolution.url + '">' +
'<img src="' + this.images.standard_resolution.url + '" />' +
'</a>' +
'<div class="col coat2 truncate">' + this.caption.text + '</div>' +
'<div class="row nill">' +
'<span class="col-6 heart-wrap floated">' + '<i class="fa fa-heart">'+ '</i>' + this.likes.count +' <div class="summ">likes</div>'+'</span>' +
'<span class="col-6 comment-wrap floated">' + '<i class="second fa fa-comment">'+ '</i>' + this.comments.count +' <div class="summ">comments</div>'+'</span>' +
'</div>' +
'<div class="row nill">' +
'<span class="col-sm-12 check-wrap floated">' + '<i class="second fa fa-check">'+ '</i>' + 'Posted ' + (date.getMonth()+1) + '/' + date.getDate() + '/' + date.getFullYear().toString().substring(2) +'</span>' +
'</div>' +
'<div><button class="col-12 btn btn-outline-tertiary">UltraGallery <span class="fab fa-instagram"><\/span></button></div>' +
'</div>' +
'<div class="grip_hang_bott"></div>' +
'</div>'
).appendTo('#instafeed');
});
$(".grip").hover(function(e){
"use strict";
e.preventDefault();
if ($(window).width() > 991) {
return false;
}
});
});
Instagram Api has changed, read more about it here
I have a DataTable that display JSON data from Promise fetch. It uses loops over the JSON data and displays it in the tbody. The problem I'm having now is that, all the rows of the JSON data fetched appears in the table with no pagination, and the search filter and column sorting aren't working as well.
Here is my code snippet:
<table class="table table-striped table-hover" id="tierlist">
<thead>
<tr>
<th></th>
<th>Card Image</th>
<th>Rarity</th>
<th>Character</th>
<th>Attribute</th>
<th>R Factor Scene</th>
<th>Overall STR</th>
<th>HP</th>
<th>SP</th>
<th>ATK</th>
<th>DEF</th>
<th>HIT</th>
<th>AVO</th>
<th>LUK</th>
</tr>
</thead>
<tbody id="datarows">
</tbody>
</table>
<script type="text/javascript">
var table = $('#tierlist').DataTable({
responsive: true,
initComplete: function () {
$('.dataTables_filter input[type="search"]').css({ 'width': '50px', 'display': 'inline-block' });
}
});
// Data URL
const URL = "https://somedomain/data.json";
// Promise fetch the data and display it
fetch(URL)
.then((response) => response.json())
.then((cards) => datarows.innerHTML = displayCards(cards))
.then(table.clear().draw());
const displayCards = (cards) => {
var out = "";
var i;
for(i = 0; i<cards.length; i++) {
out += '<tr><td><img height="35" src="' + cards[i].skill + '" /></td>' +
'<td><img height="70" src="' + cards[i].cardImage + '" /></td>' +
'<td>' + cards[i].rarity + '</td>' +
'<td>' + cards[i].character + '</td>' +
'<td><img height="35" src="' + cards[i].attribute + '" /></td>' +
'<td>' + cards[i].rFactorScene + '</td>' +
'<td>' + cards[i].STR + '</td>' +
'<td>' + cards[i].HP + '</td>' +
'<td>' + cards[i].SP + '</td>' +
'<td>' + cards[i].ATK + '</td>' +
'<td>' + cards[i].DEF + '</td>' +
'<td>' + cards[i].HIT + '</td>' +
'<td>' + cards[i].AVO + '</td>' +
'<td>' + cards[i].LUK + '</td></tr>' ;
}
return out;
};
</script>
Any help would be greatly appreciated.
The data you are adding to the table in HTML is not added to the DataTable object.
The following jsfiddle solves your issue by instead of adding the fetched data to the HTML table, adding it to the DataTable object and redrawing it.
The important difference is displayed here (addData replaces displayCards):
function addData(cards){
cards.forEach(card => {
table.row.add([
'<img height="35" src="' + card.skill + '" />',
'<img height="70" src="' + card.cardImage + '" />',
card.rarity,
card.character,
'<img height="35" src="' + card.attribute + '" />',
card.rFactorScene,
card.STR,
card.HP,
card.SP,
card.ATK,
card.DEF,
card.HIT,
card.AVO,
card.LUK
]);
});
}
https://jsfiddle.net/ja03o65r/30/
I have this function:
windowInfo_(marker, i, data) {
'<div style="' + this.content_ + '">' +
'<div>' +
'<img [src]="' + "'" + this.image + "'" + '"' + ' style="' + this.image_ + '" alt="avatar">' +
'</div>' +
'<div style="' + this.details_ + '">' +
'<div>' +
'<h5 style="' + this.company_name + '">' + data.company_name + '</h5>' +
'<i class="fa fa-map-marker" id="' + this.country_city + '">' + data.country + ',' + data.city + '</i>' +
'</div>' +
'</div>' +
'</div>' +
'<button class="' + this.footerListing + '" type="button" (click)="details(data.id_listing)">Explore Trips</button>'
}
details(id) {
console.log(id)
}
As you can see, I have a button inside this template, and I want when I click it, details function to be triggered. But when I click it, nothing is happening. What do I need to modify in order to trigger the function? Thank you for your time!
You can do this by using HostListener:-
Just assign id to your button (i.e. <button id="your_button_id">Click</button>)
Now use HostListener to detect click event:-
#HostListener('click', ['$event'])
onClick(event) {
if (event.target.id === 'your_button_id') {
details(id);
}
}
I am using algolia autocomplete service and would like to add an image
to the bottom of the autocomplete results like it is shown in their examples here:
This is how my autocomplete.js looks like:
autocomplete('#search-input', {}, [
{
source: autocomplete.sources.hits(players, { hitsPerPage: 5 }),
displayKey: 'first_name',
templates: {
header: '<div class="aa-suggestions-category">Players</div>',
suggestion: function(suggestion) {
return '<span>'
+ '<a href="/player/' + suggestion.id + '">'
+ '<div class="media">'
+ '<div class="media-left">'
+ '<img class="media-object" src="/imagecache/small/' + suggestion.image_filename + '">'
+ '</div>'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.first_name.value + " " + suggestion._highlightResult.last_name.value + '<small> ' + old + ' years</small>' + '</p>'
+ '<small> ' + suggestion.nationality + ' '+ suggestion.position + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}
}
},
{
source: autocomplete.sources.hits(videos, { hitsPerPage: 5 }),
displayKey: 'title',
templates: {
header: '<div class="aa-suggestions-category">Videos</div>',
suggestion: function(suggestion) {
timeAgo();
return '<span>'
+ '<a href="/player/video/' + suggestion.uid + '">'
+ '<div class="media">'
+ '<div class="media-left">'
+ '<img class="media-object" src="https://s3.eu-central-1.amazonaws.com/videos.football-talents.com/' + suggestion.video_id + '_1.jpg">'
+ '</div>'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.title.value + ' <small class="timeago" title="' + suggestion.created_at + '">' + suggestion.created_at + '</small>' + '</p>'
+ '<small> ' + suggestion._highlightResult.player_name.value + " " + suggestion._highlightResult.player_surname.value + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}
}
}
]).on('autocomplete:updated', function(event, suggestion, dataset) {
var timeagoTimeout;
clearTimeout(timeagoTimeout);
timeAgo();
timeagoTimeout = setTimeout(timeAgo, 60000);
});
Where should I add an image so that it is at the bottom of the result, like it is on the image I have posted?
You can use the footer template option like described here.
$('#search-input').autocomplete({
templates: {
footer: '<div class="branding">Powered by <img src="https://www.algolia.com/assets/algolia128x40.png" /></div>'
}
}, [
/// here your sources
]
);
html:
<p id="drag11" class="ui-widget-content" > Calender </p>
<div class="col-md-8"> <div id="droppable" class="ui-sortable" ><ol></ol></div></div>
jquery ui:
var calenderFieldCount++=0;
calenderFieldCount++;
$("#droppable").append('<li class="ui-state-default">' +
'<div class="cal" id="InputsWrapper_11' + calenderFieldCount + '">' +
'<label class="cal"> calender:' + calenderFieldCount + '</label>' +
'<p>' + '<input type="text" id="datepicker" class="hasDatepicker" name="mycal[]" />'+
'<button class="removeclass11">x</button>' +
'</p>' + '<br>' + '</div>' + '</li>');
$("#droppable").delegate(".hasDatePicker", "click", function () {
$(this).datepicker();
});
when element with id= "drag11" is dragged and dropped in div with id="droppable" a textbox appears but when you click on the textbox the datepicker dose not appear. the above code is used. please help. thank you in advance.
try this jquery date picker just add field id and use js file
<script>
jQuery(document).ready(function()
$('#dob').datepicker({
dateFormat: 'dd-mm-yy'
});
});
</script>