Develop Reference

Flask and GoogleMaps Api Javascript

I am trying to manage Google Maps Api in order to work within Flask.
However it doesn't give any error, but it doesn't render the map itself.
It work perfectly on simple .html however Flask is having problem rendering map.js file itself
map.js
// Initiation of marker for Google Maps Api
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: {
lat: 52.857500,
lng: -8.987437
}
});
var labels = "ABCDEFGHIJKLMONPQRSTUVWXYZ";
var locations = [{
lat: 52.857500,
lng: -8.987437
}];
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
Flask Code
{% extends 'base.html' %}
{% block content %}
<!-- content -->
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<div class="row center"></div>
<h2 class="header center black-text">How to approach our office ? </h2>
<div class="row center">
<h5 class="header col s12 light">85 Aughanteeroe<br> Gort Road <br> Ennis <br> Co. Clare<br>V95 CXV2<br>Ireland</h5>
</div>
<div class="row center" id="map">
<br>
</div>
</div>
</div>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCef1gneSCdkePrWnkXROPQUynW490rnd4&callback=initMap"></script>
<script src="{{url_for('static', filename='js/map.js')}}"></script>

Conversation chat cannot submit

I have problem when make submit chat its have error 'handlebar is not define'. I follow tutorial code in this link : https://codepen.io/drehimself/pen/KdXwxR
this is the error :
here my html code :
<div class="chat-area scrollbar-macosx scroll-wrapper">
<div class="chat-area-content scrollbar-macosx">
<ul class="container">
<!-- Label Time Chat -->
<div class="text-center mt-3">
<span class="label-time">30 Apr</span>
</div>
<!-- Merchant chat -->
<div class="d-flex justify-content-start mt-3">
<div class="chat-content-image">
<div class="upload-image">
<div class="time-image">
<span class="time-item">14:10</span>
</div>
</div>
</div>
</div>
<!-- Customer chat -->
<div class="d-flex justify-content-start mt-3">
<div class="chat-context">
<div class="chat-text">
<p></p>
</div>
<div class="chat-time">
<p>14:15</p>
</div>
</div>
</div>
<!-- Customer Chat -->
<div class="d-flex justify-content-end mt-3 mb-4">
<div class="chat-context">
<div class="chat-text">
<p></p>
</div>
<div class="chat-time">
<p>15:00</p>
</div>
</div>
</div>
</ul>
</div>
<form class="keyboard-chat">
<div class="chat-input">
<div class="attach-button mr-3 mb-3">
<button type="button" class="circle-button">
<i class="fa fa-plus"></i>
</button>
</div>
<div class="chat-input-textarea" style="padding-left: 0px;">
<div>
<textarea id="message-to-send" name="message-to-send" placeholder="Type here..." rows="3" class="keyboards f-size-12" style="max-height: 130px;"></textarea>
</div>
</div>
<div class="btn-submit-message mb-3"></div>
</div>
</form>
</div>
<script id="message-template" type="text/x-handlebars-template">
<div class="d-flex justify-content-end mt-3">
<div class="chat-context">
<div class="chat-text">
<p>{{messageOutput}}</p>
</div>
<div class="chat-time">
<p>{{time}}</p>
</div>
</div>
</div>
</script>
And here my js :
(function(){
var chat = {
messageToSend: '',
messageResponses: [
'Why did the web developer leave the restaurant? Because of the table layout.',
'How do you comfort a JavaScript bug? You console it.',
'An SQL query enters a bar, approaches two tables and asks: "May I join you?"',
'What is the most used language in programming? Profanity.',
'What is the object-oriented way to become wealthy? Inheritance.',
'An SEO expert walks into a bar, bars, pub, tavern, public house, Irish pub, drinks, beer, alcohol'
],
init: function() {
this.cacheDOM();
this.bindEvents();
this.render();
},
cacheDOM: function() {
this.$chatHistory = $('.chat-area-content');
this.$button = $('.btn-submit-message');
this.$textarea = $('#message-to-send');
this.$chatHistoryList = this.$chatHistory.find('ul');
},
bindEvents: function() {
this.$button.on('click', this.addMessage.bind(this));
this.$textarea.on('keyup', this.addMessageEnter.bind(this));
},
render: function() {
this.scrollToBottom();
if (this.messageToSend.trim() !== '') {
var template = Handlebars.compile( $("#message-template").html());
var context = {
messageOutput: this.messageToSend,
time: this.getCurrentTime()
};
this.$chatHistoryList.append(template(context));
this.scrollToBottom();
this.$textarea.val('');
// responses
var templateResponse = Handlebars.compile( $("#message-response-template").html());
var contextResponse = {
response: this.getRandomItem(this.messageResponses),
time: this.getCurrentTime()
};
setTimeout(function() {
this.$chatHistoryList.append(templateResponse(contextResponse));
this.scrollToBottom();
}.bind(this), 1500);
}
},
addMessage: function() {
this.messageToSend = this.$textarea.val()
this.render();
},
addMessageEnter: function(event) {
// enter was pressed
if (event.keyCode === 13) {
this.addMessage();
}
},
scrollToBottom: function() {
this.$chatHistory.scrollTop(this.$chatHistory[0].scrollHeight);
},
getCurrentTime: function() {
return new Date().toLocaleTimeString().
replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3");
},
getRandomItem: function(arr) {
return arr[Math.floor(Math.random()*arr.length)];
}
};
chat.init();
})();
Code of .js same like in the tutorial, but i only change the name class i used.
My Expectation is when i enter / click button send, the conversation is submited to the chat area.

This code requires Handlebars JS since you call Handlebars. You can it install it by follwing the installation steps on the website.

Code mirror not working with angular js binding variable

Html:
<body ng-app ng-controller="OrderFormController">
<!--<h1 class="errorHeader">List of Classes</h1>-->
<header>
<div class="container">
<div id="branding">
<h1>Apex <span class="highlight"> Editor </span> </h1>
</div>
</div>
</header>
<div class="col-md-12 col-lg-12">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">Apex Editor</li>
</ul>
</div>
<div class="panel-body">
<div>
<input type="text" name="apexClass" id="autocomplete" placeholder="Type the name of the Apex class you want to edit"/>
</div>
<div class="btn-group-vertical" style="padding: 1%">
<button type="button" class="btn btn-primary" id="editBtn">Edit</button>
</button>
</div>
<div class="tab-content" align="left">
<div id='error' style='display:none'>{{apexClassWrapperError.message}}</div>
<div>{{apexClassWrapper.name}}</div>
<img src="../img/ajax-loader.gif" id="loaderImage" style='display:none'>
<form>
<textarea ng-model="apexClassWrapper.body" id="code" name="code" readonly="true" >{{apexClassWrapper.body}}</textarea>
</form>
</div>
<button type="button" class="btn btn-primary" id="saveBtn" ng-click="postdata(apexClassWrapper)">Save</button>
</div>
</div>
</div>
<script src="../js/makeEditable.js"></script>
<script>
$(function() {
var editor = CodeMirror.fromTextArea(document.getElementById("code"),{
linenumber : true,
matchBrackes: true,
mode: "text/x-apex"
})
});
</script>
<footer>
<p>Web based Apex Editor</p>
<p>Developed By - Nagendra Kumar Singh</p>
</footer>
</body>
CSS and JS files included at top:
<script src="../js/codemirror.js"></script>
<script src="../js/apex.js"></script>
<script src="../js/matchbrackets.js"></script>
<link href="../css/codemirror.css" rel="stylesheet"/>
The controller is a simple one fetching the class through a RESTApi.
function OrderFormController($scope, $http) {
$('#autocomplete').autocomplete({
type: 'POST',
serviceUrl: 'http://localhost:8989/getSuggestion',
onSelect: function (suggestion) {
console.log('suggestion.value -> '+suggestion.value);
var data = {
apexClassName:suggestion.value
};
var config = {
params: data
};
$('#loaderImage').show();
$http.get("http://localhost:8989/getApexBody",config).then(function (response) {
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
});
}
});
};
But I can only see {{apexClassWrapper.body}} in my text area, I dont see the real code when using CodeMirror, If I remove code mirror , I can see the class, but I cannot figure out a way to show the body with CodeMirror included.
There are no errors in console log and all the JS and CSS files are loaded perfectly. Please help.

Ok, So I think I may have figured it out. What I did is I set a timeout for the codemirror code to run as follows in the js file and removed it from the index.html.
$('#loaderImage').show();
$http.get("http://localhost:8989/getApexBody", config).then(function (response) {
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
if(globalEditor) {
globalEditor.toTextArea();
}
setTimeout(function (test) {
var editor = CodeMirror.fromTextArea(document.getElementById('apexBody'), {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-apex"
});
globalEditor = $('.CodeMirror')[0].CodeMirror;
}), 2000
});
The only issue in this answer is that, it creates multiple code editor window when I try to load different classes. How can I resolve that?
So finally got it working, defined a global variable and using the method toTextArea

fullcalnder not calls on button click and inside any function

I am using fullcalendar.
When my page loads fullcalendar loads properly.
Now, I want to retrieve new data from table and want to display it on calendar.
For that, I call an ajax on button click, The ajax will retrieve the new data from table and display on fullcalendar.
But i am getting an error in firebug console.
TypeError: $(...).fullCalendar is not a function
It works when page will load, but when i used it in a function or any click event it wont works.
Here is my code. Please check it and suggest me.
<script>
$(document).ready(function() {
var today = new Date();
// This works because it calls on page load
$('#calendars').fullCalendar({
header: {
right: 'month,agendaWeek,agendaDay,prev,next today'
},
defaultDate: today,
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: {
url: 'fullcalendar/demos/php/get-events.php',
error: function(eee) {
$('#script-warning').show();
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
// This doesn't works because it calls on button click. It gives me TypeError: $(...).fullCalendar is not a function
$("#clickme").click(function(){
var timezone = localStorage.getItem("timezone");
var start = "2016-10-16";
var end = "2016-10-21";
$('#calendars').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: "fullcalendar/demos/php/get-events.php?mode=customdate&start=" + start + "&end=" + end,
type: 'json',
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
}
});
});
});
</script>
<div id='script-warning'>
<code>php/get-events.php</code> must be running.
</div>
<div id='loading'>loading...</div>
<div>
<div class="row" style="border-top:2px solid">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border-right:1px solid">
<div id='overviewDatePicker' style='margin-bottom:10px;margin-top:90px'></div>
<div><b>Filter By Eventname</b></div>
<div>
<input type="text" placeholder="Search"/>
</div>
<div><b>Filter By Stage</b></div>
<ul style="list-style:none">
<li><span class="glyphicon glyphicon-flag" style="margin:3px"></span>Tentative Booking</li>
<li><span class="glyphicon glyphicon-ok" style="margin:3px"></span>Complete Booking</li>
</ul>
<br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" id="eventcalendar">
<button id="clickme"> Click</button>
<div id="calendars"></div>
</div>
</div>
</div>

I have update my code according your code. Please check on click function where I have made changes modified you code accordingly and let me know outcome
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.css" />
<script>
$(document).ready(function() {
var today = new Date();
// This works because it calls on page load
$('#calendars').fullCalendar({
header: {
right: 'month,agendaWeek,agendaDay,prev,next today'
},
defaultDate: today,
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: {
url: 'fullcalendar/demos/php/get-events.php',
error: function(eee) {
$('#script-warning').show();
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
// Please check this part only
$("#clickme").click(function(){
var timezone = localStorage.getItem("timezone");
var start = "2016-10-16";
var end = "2016-10-21";
$.ajax({
url: "fullcalendar/demos/php/get-events.php?mode=customdate&start=" + start + "&end=" + end,
type: 'json',
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
//$("#calendars").fullCalendar('removeEvents'); //If you want to remove existing events from calender
$("#calendars").fullCalendar('addEventSource', events);
}
});
});
});
</script>
</head>
<body>
<div id='script-warning'>
<code>php/get-events.php</code> must be running.
</div>
<div id='loading'>loading...</div>
<div>
<div class="row" style="border-top:2px solid">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border-right:1px solid">
<div id='overviewDatePicker' style='margin-bottom:10px;margin-top:90px'></div>
<div><b>Filter By Eventname</b></div>
<div>
<input type="text" placeholder="Search"/>
</div>
<div><b>Filter By Stage</b></div>
<ul style="list-style:none">
<li><span class="glyphicon glyphicon-flag" style="margin:3px"></span>Tentative Booking</li>
<li><span class="glyphicon glyphicon-ok" style="margin:3px"></span>Complete Booking</li>
</ul>
<br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" id="eventcalendar">
<button id="clickme"> Click</button>
<div id="calendars"></div>
</div>
</div>
</div>
</body>
</html>

Angular ng-if not rendering div upon condition change

I'm working on learning Angular with Google maps and having difficulty rendering a map within a div controlled by an ng-if directive.
For my application, I would like the map render upon receiving the coordinates from the $scope.location function. I would then click on a button and invoke $scope.myRide in order to place a marker on the map. However, what is happening is that the map does not render until I click on the button.
The coordinates within $scope.map are serve as placeholders until the actual coordinates are received from $scope.location.
Any assistance will be greatly appreciated :)
angular.module('MapView',[])
.config(function($stateProvider){
$stateProvider
// the state will go on the html that you want route the user.
.state('mapView', {
url: '/mapView',
templateUrl: 'app/mapView/mapView.html',
controller: function($scope){
$scope.map = { center: { latitude: 38, longitude: -122 }, zoom: 15 };
$scope.output = document.getElementById("loc");
$scope.maker = {};
$scope.coords = {};
$scope.mockUsers = [{username: 'young', mess: 'I need a ride at 9am'},{username: 'young', mess: 'I need a ride at 9am'}, {username: 'young', mess: 'I need a ride at 9am'}]
$scope.location = function(){
if (!navigator.geolocation){
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
navigator.geolocation.getCurrentPosition(function(position){
console.log('current position',position.coords)
$scope.map.center.latitude = position.coords.latitude;
$scope.coords.lat = position.coords.latitude; //added this
$scope.map.center.longitude = position.coords.longitude;
$scope.coords.lon = true; // added this
}, function(){
$scope.output.innerHTML = "Unable to retrieve your location";
});
}()
$scope.myRide = function(){
$scope.maker.latitude = $scope.map.center.latitude;
$scope.maker.longitude = $scope.map.center.longitude;
}
},
controllerAs: 'LoginCtrl'
});
})
The following is the HTML:
<div ui-sref='mapView' >
<div ng-show = "coords.lon == true">Hello</div>
<div id="loc"></div>
<div id="mapDiv" ng-if="coords.lon">
<ui-gmap-google-map center='map.center' zoom='map.zoom' maker=>
<ui-gmap-marker coords="maker" icon="icon" idkey="1"></ui-gmap-marker>
</ui-gmap-google-map>
</div>
<div class="btn-Center">
<button class="btn btn-danger" ng-click='myRide()' >Ride</button>
</div>
<div id="mapUsers">
<div class="clear" ng-repeat='user in mockUsers'>
<div class="mapUserImg">
<img class="img-responsive" src="http://falconbus.in/images/site/user_icon.png">
</div>
<h1> {{ user.username }} </h1>
<p> {{ user.mess}} </p>
</div>
</div>
</div>

I have some recomendations,
1) for debugging you can install the chrome extension ng-inspector in there you can view what value you have in center and zoom when you are in the html side, check if the data have sense.
2) i thing you use angular-google-maps from angular-ui if is true, you have two errors,
<div id="mapDiv" ng-if="coords.lon">
<ui-gmap-google-map center='map.center' zoom='map.zoom' **maker=**>
<ui-gmap-marker coords="maker" **icon="icon"** idkey="1"></ui-gmap-marker>
</ui-gmap-google-map>
marker empty is not necesesary and icon do are inside to options like the example in the official website.
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
<ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
</ui-gmap-marker>
</ui-gmap-google-map>
<div ng-cloak>
<ul>
<li>coords update ctr: {{coordsUpdates}}</li>
<li>dynamic move ctr: {{dynamicMoveCtr}}</li>
</ul>
</div>
3) in the anglar-google-maps website you can use Edit in Plnkr for made some first test to familiarize with this directives

[<script src="~/Scripts/app/Home.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>AngularJS Examples</h1>
<div ng-app="myApp" style="width:400px;">
<div ng-controller="homeController">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>Person Name:</td>
<td>
<input type="text" ng-model="Person.personName" />
</td>
</tr>
<tr>
<td>Person Age:</td>
<td>
<input type="text" ng-model="Person.personAge" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<div class="alert alert-info" ng-if="Person.personAge < 18">
Person Age must be <strong>above 18 years.</strong>
</div>
<div class="alert alert-success" ng-if="Person.personAge >= 18 && Person.personAge <= 100">
<strong>Valid Age.</strong>
</div>
<div ng-if="Person.personAge > 100" class="alert alert-warning">
Person Age must be <strong> between 18 and 100.</strong>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
learn from c-sharpcorner.com

I noticed that upon receiving the coordinates, If I click anywhere on the page the map will load. I thus modified the js file to simulate a click, and it works. Although this works for my application, I'm still not sure what the root issue of the problem is. Any assistance would be greatly appreciated.
This is the function I modified by adding a .click() :
$scope.location = function(){
if (!navigator.geolocation){
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
navigator.geolocation.getCurrentPosition(function(position){
console.log('current position',position.coords)
$scope.map.center.latitude = position.coords.latitude;
$scope.coords.lat = position.coords.latitude; //added this
$scope.map.center.longitude = position.coords.longitude;
$scope.coords = true; // added this
document.getElementById('loc').click();
}, function(){
$scope.output.innerHTML = "Unable to retrieve your location";
});
}()