Here I am integrating gmap in my laravel project and want to show locations with some info on gmap but map is not working as expected. there is an issue in showing the map and map is also not displayed. here I am attaching image how exactly it looks.
also I will show code and relate js
js
$(document).ready(function() {
'use strict';
/**
* Checkbox & radio inputs
*/
$('input[type=checkbox], input[type=radio]').ezMark();
/**
* Map Leaflet Contact
*/
if ($('#map-contact').length) {
var map = L.map('map-contact', {
zoom: 12,
maxZoom: 20,
center: [40.761077, -73.88]
});
map.scrollWheelZoom.disable();
var access_token = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + access_token, {
scrollWheelZoom: false,
id: 'mapbox.streets',
attribution: 'Terms & Feedback'
}).addTo(map);
var icon = L.divIcon({
html: '<i class="fa fa-suitcase"></i>',
iconSize: [36, 36],
iconAnchor: [36, 36],
popupAnchor: [-20, -42]
});
var marker = L.marker([40.761077, -73.88], {
icon: icon
}).addTo(map);
}
/**
* Map Leaflet
*/
if ($('#map-leaflet').length) {
var map = L.map('map-leaflet', {
zoom: 12,
maxZoom: 20,
center: [40.761077, -73.88]
});
var access_token = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';
var marker_cluster = L.markerClusterGroup();
map.scrollWheelZoom.disable();
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + access_token, {
scrollWheelZoom: false,
id: 'mapbox.streets',
attribution: 'Terms & Feedback'
}).addTo(map);
$.ajax('assets/data/markers.json', {
success: function(markers) {
$.each(markers, function(index, value) {
var icon = L.divIcon({
html: value.icon,
iconSize: [36, 36],
iconAnchor: [36, 36],
popupAnchor: [-20, -42]
});
var marker = L.marker(value.center, {
icon: icon
}).addTo(map);
marker.bindPopup(
'<div class="listing-window-image-wrapper">' +
'<a href="properties-detail-standard.html">' +
'<div class="listing-window-image" style="background-image: url(' + value.image + ');"></div>' +
'<div class="listing-window-content">' +
'<div class="info">' +
'<h2>' + value.title + '</h2>' +
'<h3>' + value.price + '</h3>' +
'</div>' +
'</div>' +
'</a>' +
'</div>'
);
marker_cluster.addLayer(marker);
});
map.addLayer(marker_cluster);
}
});
}
/**
* Google Map
*/
if ($('#map-google').length) {
$.ajax('assets/data/markers.json', {
"dataType" : "json",
success: function(values) {
var markers = [];
var infos = [];
$.each(values, function(index, value) {
var content = '<div id="' + value.id + '" class="map-popup-content-wrapper"><div class="map-popup-content"><div class="listing-window-image-wrapper">' +
'<a href="properties-detail-standard.html">' +
'<div class="listing-window-image" style="background-image: url(' + value.image + ');"></div>' +
'<div class="listing-window-content">' +
'<div class="info">' +
'<h2>' + value.title + '</h2>' +
'<h3>' + value.price + '</h3>' +
'</div>' +
'</div>' +
'</a>' +
'</div></div><i class="fa fa-close close"></i></div>' +
'<div class="map-marker">' + value.icon + '</div>';
markers.push({
latLng: value.center,
data: value.id,
options: {
content: content,
offset: {
x: -18,
y: -42
}
}
});
});
$('#map-google').gmap3({
map: {
options:{
styles: [{"featureType":"landscape","elementType":"all","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]},{"featureType":"road.highway","elementType":"all","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","elementType":"all","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","elementType":"all","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]}],
center:[40.761077, -73.88],
scrollwheel: false,
zoom: 12
}
},
marker: {
cluster: {
radius: 100,
}
},
overlay: {
values: markers,
events: {
click: function(marker, event, context) {
$('.map-popup-content-wrapper').css('display', 'none');
if ($(event[0].target).hasClass('close')) {
$('#' + context.data).css('display', 'none');
} else {
$('#' + context.data).css('display', 'block');
}
}
}
}
});
}
});
}
/**
* Properties Carousel
*/
$('.listing-carousel').owlCarousel({
items: 4,
margin: 30,
nav: true,
navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
responsive: {
0: {
items: 1
},
540: {
items: 2
},
766: {
items: 2
},
990: {
items: 3
},
1200: {
items: 4
}
}
});
/**
* Cover carousel
*/
$('.cover-carousel').owlCarousel({
items: 1,
nav: true,
navText: ['<img src="assets/img/lnr-chevron-left.svg" alt="">', '<img src="assets/img/lnr-chevron-right.svg" alt="">']
});
/**
* Image gallery
*/
$('.gallery').owlCarousel({
autoplay: 3000,
items: 1,
nav: true,
navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>']
});
/**
* Customizer
*/
$('.customizer-title').on('click', function() {
$('.customizer').toggleClass('open');
});
$('.customizer a').click('click', function(e) {
e.preventDefault();
var cssFile = $(this).attr('href');
$('#css-primary').attr('href', cssFile);
});
/**
* Charts
*/
if ($('.ct-chart-1').length) {
var data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
]
};
var options = {
seriesBarDistance: 15
};
var responsiveOptions = [
['screen and (min-width: 641px) and (max-width: 1024px)', {
seriesBarDistance: 10,
axisX: {
labelInterpolationFnc: function (value) {
return value;
}
}
}],
['screen and (max-width: 640px)', {
seriesBarDistance: 5,
axisX: {
labelInterpolationFnc: function (value) {
return value[0];
}
}
}]
];
new Chartist.Bar('.ct-chart-1', data, options, responsiveOptions);
}
/**
* Charts
*/
if ($('.ct-chart-2').length) {
new Chartist.Line('.ct-chart-2', {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[1, 2, 3, 1, -2, 0, 1, 0],
[-2, -1, -2, -1, -2.5, -1, -2, -1],
[0, 0, 0, 1, 2, 2.5, 2, 1],
[2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
]
}, {
high: 3,
low: -3,
showArea: true,
showLine: false,
showPoint: false,
fullWidth: true,
axisX: {
showLabel: false,
showGrid: false
}
});
}
/**
* Charts
*/
if ($('.ct-chart-3').length) {
new Chartist.Bar('.ct-chart-3', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
series: [
[5, 4, 3, 7, 5, 10, 3],
[3, 2, 9, 5, 4, 6, 4]
]
}, {
seriesBarDistance: 10,
reverseData: true,
horizontalBars: true,
axisY: {
offset: 70
}
});
}
/**
* Charts
*/
if ($('.ct-chart-4').length) {
var times = function(n) {
return Array.apply(null, new Array(n));
};
var data = times(52).map(Math.random).reduce(function(data, rnd, index) {
data.labels.push(index + 1);
data.series.forEach(function(series) {
series.push(Math.random() * 100)
});
return data;
}, {
labels: [],
series: times(4).map(function() { return new Array() })
});
var options = {
showLine: false,
axisX: {
labelInterpolationFnc: function(value, index) {
return index % 13 === 0 ? 'W' + value : null;
}
}
};
var responsiveOptions = [
['screen and (min-width: 640px)', {
axisX: {
labelInterpolationFnc: function(value, index) {
return index % 4 === 0 ? 'W' + value : null;
}
}
}]
];
new Chartist.Line('.ct-chart-4', data, options, responsiveOptions);
}
});
and this is a view file properties.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link href="https:://fonts.googleapis.com/css?family=Raleway::300,400,500,600,300,700&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/fonts/font-awesome/css/font-awesome.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/libraries/owl-carousel/owl.carousel.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/libraries/chartist/chartist.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/css/leaflet.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/css/leaflet.markercluster.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/css/leaflet.markercluster.default.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/css/villareal-blue.css')}}" rel="stylesheet" type="text/css" id="css-primary">
<link href="{{ URL::asset('assets/css/overwrite-home.css')}}" rel="stylesheet" type="text/css" id="css-primary">
<link rel="shortcut icon" type="image/x-icon" href="{{ URL::asset('assets/favicon.png') }}">
<title>Houzeo - Properties Map</title>
</head>
<body class="">
<div class="page-wrapper">
<div class="header-wrapper">
<div class="header header-small">
<div class="header-inner">
<div class="container-fluid">
<div class="header-top">
<div class="header-top-inner">
<span class="header-logo-text"><a class="header-logo" href="index.html"> <img src="{{ URL::asset('assets/hou-imgs/houzeologo.png')}}" alt="HOUZEO LOGO"> </a></span>
<!-- /.header-logo -->
<a class="header-action" href="properties-submit.html">
<i class="fa fa-upload"></i> <span>Upload Property</span>
</a><!-- /.header-action -->
</button> -->
</div><!-- /.header-top-inner -->
</div><!-- /.header-top -->
</div><!-- /.container-fluid -->
</div><!-- /.header-inner -->
</div><!-- /.header -->
</div><!-- /.header-wrapper-->
<div class="main-wrapper">
<div class="main">
<div class="main-inner">
<div class="content">
<div class="container-fluid fullwidth-wrapper map-and-property-holder">
<div class="row">
<div class="col-lg-4 col-md-6 mapProperty-holder">
#foreach($list as $item)
<div class="row">
<div class="col-sm-12">
<div class="listingbox">
<div class="listing-box-image" style="background-image:url('assets/img/tmp/tmp-5.jpg')">
<span class="listing-box-image-links listing-box-over">
<i class="fa fa-eye"></i> <span>View Property Dashboard</span>
<i class="fa fa-list"></i> <span>View Listing</span>
</span>
</div><!-- /.listing-box-image -->
<div class="listing-box-title">
<h2>Bright Island Route</h2>
<h3>$ 40.000</h3>
</div><!-- /.listing-box-title -->
<div class="listing-box-content">
<dl>
<dt>Type</dt><dd>House</dd>
<dt>Location</dt><dd>New York</dd>
<dt>Area</dt><dd>180 sqft</dd>
</dl>
</div><!-- /.listing-box-cotntent -->
</div><!-- /.listing-box -->
</div><!-- /.col-* -->
</div>
#endforeach
</div><!-- /.col-* -->
<div class="col-lg-8 col-md-6 map-holder">
<div id="map-leaflet" class="full"></div>
<!--Please insert your map here.-->
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.content -->
</div><!-- /.main-inner -->
</div><!-- /.main -->
</div><!-- /.main-wrapper -->
</div><!-- /.page-wrapper -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASlnVdH_6j-XibxbQoeV82oZQImV1a_Vs"
type="text/javascript"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/jquery.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/jquery.ezmark.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/tether.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/gmap3.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/leaflet.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/leaflet.markercluster.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/libraries/owl-carousel/owl.carousel.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/libraries/chartist/chartist.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/scrollPosStyler.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/villareal.js')}}"></script>
</body>
</html>
Related
until recently I used an old version of fullcalendar, (in this case V4) in which to be able to filter events loaded from a database I used the function calendar.rerenderEvents(), this is not in version 5 and I I would like to know if there is any way to be able to filter as I did before, since the possible solutions that I have seen would be either through queries or by working with the event object loaded from the database
Next I will leave an example of how to do to be able to filter with version 4
<html>
<head>
<title>Calendar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{$conf.titulos.inicial}</title>
<link id="logonsgs" rel='icon' type="image/ico" href='web/img/produccion.ico' />
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="web/css/material-icons.css" />
<link type="text/css" rel="stylesheet" href="web/css/material.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="web/css/materialize.css" media="screen,projection" />
<link href='librerias/fullcalendar4.4/daygrid/main.css' rel='stylesheet' />
<link href='librerias/fullcalendar4.4/timegrid/main.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.2/main.min.css' rel='stylesheet' />
<link href='librerias/fullcalendar4.4/list/main.css' rel='stylesheet' />
<link href='librerias/fullcalendar4.4/bootstrap/main.css' rel='stylesheet' />
<!-- <link type="text/css" rel="stylesheet" href="librerias/fullcalendar/main.css" media="screen,projection" />-->
<link type="text/css" rel="stylesheet" href="web/css/dataTables.material.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="web/css/jquery-confirm.css" />
<!-- <link type="text/css" rel="stylesheet" href="web/css/jquery.dataTables.min.css" /> -->
<!-- Scripts-->
<script src="web/js/jquery.min.js"></script>
<script src="web/js/material.min.js"></script>
<script src="web/js/jquery-3.5.1.js"></script>
<script src="web/js/jquery-confirm.js"></script>
<script src="web/js/jquery.dataTables.min.js"></script>
<script src="web/js/dataTables.material.min.js"></script>
<script src="librerias/jsPDF/jspdf.min.js"></script>
<script src="librerias/jsPDF/jspdf.debug.js"></script>
<script src='librerias/fullcalendar4.4/main.min.js'></script>
<link href='librerias/fullcalendar4.4/fullcalendar.print.css' rel='stylesheet' media='print' />
<link href="librerias/fullcalendar4.4/icon.vc" rel="stylesheet">
</head>
<body>
<div class="mdl-grid ancho-min-500">
<div class="card mdl-shadow--4dp margen_inferior-20 util-center ancho-liberacion">
<table background="web\img\imagen2.jpg">
<tbody>
<tr>
<td width="5%"><button type="button" id="inici" class="boton_ini"><img
src="web/img/logo_SEKURIT_2020_color#2x-8.png" class="sekurit"></button></td>
<td width="32.5%"></td>
<td width="25%">
<div align="center"><label class="mdl-color-text--white">{$conf.titulos.inicial}</label>
</div>
<div align="center"><label class="mdl-color-text--white">{$conf.titulos.inicial_2} -
{$conf.botones.inicial_4}</div>
</td>
<td width="32.5%"></td>
<td width="5%"> <img src="web/img/OPEX_RVB.png" align="left" width="70" height="70"></td>
</tr>
</tbody>
</table>
<table>
<tr>
<td>
<div><label class="color_letra-negro">Linea</label></div>
<div>
<select id="Linea" class="mdl-textfield__input ">
<option value="" selected></option>
<option value="all">TODOS</option>
<option value="GT">GT</option>
<option value="BKT1">BKT1</option>
<option value="BKT2">BKT2</option>
</select>
</div>
</td>
</tr>
</table>
<div class="row no-gutters">
<div class="col">
<div id='calendar' class=""></div>
</div>
</div>
<div>
<div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone centro">
<br><br>
<button id="bot_salir" type="button"
class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent">
<i class="material-icons">keyboard_arrow_left</i>
</button>
<div class="mdl-tooltip" data-mdl-for="bot_salir" style="text-transform: uppercase;font-size:12px">
{$conf.mensajes.salir_1}</div>
</div>
<script>
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
today = yyyy + '-' + mm + '-' + dd;
let calendar;
let date_picker;
let filter_linea = "all";
let filter_archivo = "all";
let filter_estado = "all";
let filter_equipo = "all";
$(document).ready(function() {
var calendarEl = $("#calendar").get(0);
let today = new Date();
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ["core", "interaction", "dayGrid", "timeGrid", "list", "bootstrap",
"moment"
],
initialView: 'dayGridMonth',
locales: 'es',
initialDate: today,
timeZone: "local",
theme: "bootstrap",
showNonCurrentDates: false,
height: 900,
customButtons: {
printButton: {
icon: 'print',
click: function() {
window.print();
}
}
},
header: {
left: 'prevYear,prev,today,next,nextYear, printButton',
center: ' title ',
right: 'dayGridMonth,timeGridWeek,timeGridDay, listDay,listWeek,listMonth,listYear'
},
views: {
listDay: {
buttonText: 'DIA'
},
listWeek: {
buttonText: 'SEMANA'
},
listMonth: {
buttonText: 'MES'
},
listYear: {
buttonText: 'AÑO'
}
},
defaultDate: today,
navLinks: false,
businessHours: false,
editable: false,
selectable: false,
eventLimit: false,
lazyFetching: false,
eventSources: [{
url: "web/calendario/cargareventoGTLIB.php"
}, ],
eventRender: function(info, event, element, view) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
if (filter_linea !== "all" && info.event.id !== filter_linea) {
return false;
};
var showFacilities, shownumeros = true;
var numeros = $('#numero').val();
/* filters */
if (numeros.length > 0) {
shownumeros = info.event.title.toLowerCase().indexOf(numeros) >= 0;
}
return ['all', info.event.id].indexOf($('#Linea').val()) >= 0 &&
shownumeros;
},
date_picker,
weekNumbers: true,
eventDisplay: 'block'
});
calendar.render();
//inicio
$('#inici').click(function() {
$(location).attr('href', 'index.php?acc=login_in');
});
// SALIR
$('#bot_salir').click(function() {
$(location).attr('href', 'index.php?acc=calidad');
});
$(document).on("click", ".FiltLin-container .FiltLin", function(e) {
filter_linea = $(this).val();
calendar.rerenderEvents();
});
//visible
$('#Linea').on('change', function() {
calendar.rerenderEvents();
});
});
</script>
</body>
<footer>
<img src="web/img/logosg_m.png" alt="" class="floating-logo">
</footer>
</html>
Could something similar be done with V5?
clarification:
->What I tried so far was to work with the v4 function in v5 but it gives me an error like it doesn't exist, I also tried to work with the event object showing only those that met the filters but I couldn't find this object. and I would say that the error is from Js, since everything should be in the client
->The error is that calendar.rerenderEvents is not a function, so skip adding the error
I have created a quantity input here but I can't find a way how to count the price data to match how much quantity I picked. For the result, it should be like the first one here but instead of count the price on how many click buttons, into how many quantities I want to order. Any tips on what method I can use?
Here is the code:
var data = {
Food: [
{
id: 1,
name: 'Fried Rice',
price: 10000
},
{
id: 2,
name: 'Fried Noodle',
price: 9000
},
{
id: 3,
name: 'Pancake',
price: 8500
},
{
id: 4,
name: 'French Fries',
price: 7500
}
],
Drink: [
{
id: 1,
name: 'Cola',
price: 4600
},
{
id: 2,
name: 'Orange Juice',
price: 5400
},
{
id: 3,
name: 'Mineral Water',
price: 3500
},
{
id: 4,
name: 'Coffee',
price: 5800
}
]
}
function handleChange() {
var x = document.getElementById("category_select").value;
var dataOptions = data[x]
var dataSelect = document.getElementById('type_select')
dataSelect.innerHTML = ''
dataOptions.forEach(function (option) {
var optionEle = document.createElement('option')
optionEle.value = option.id
optionEle.label = option.name
optionEle.setAttribute('data-price', option.price)
dataSelect.appendChild(optionEle)
})
}
handleChange()
$(document).ready(function () {
var selectMenu = {};
$("button").click(function () {
var itemName = $("#type_select option:selected").attr('label');
var price = Number($("#type_select option:selected").data('price'));
if (selectMenu.hasOwnProperty(itemName)) {
selectMenu[itemName] += price;
} else {
selectMenu[itemName] = price;
}
var result =JSON.stringify(selectMenu).replace(/,/g,'<br>').replace(/\{|\}|"/g,"")
$(".result").html(result);
});
});
button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
</style>
<title>Menu</title>
</head>
<body>
<div class="container">
<div class="container-fluid text-center">
<h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
<br>
<div class="row">
<div class="col-md-4">
<select class="form-select form-select-lg mb-3" id="category_select" onChange='handleChange()'>
<option value="Food">Food</option>
<option value="Drink">Drink</option>
</select>
</div>
<br>
<div class="col-md-4">
<select class="form-select form-select-lg mb-3" id="type_select"></select>
</div>
<div class="col-md-4">
<input type="number" class="form-control form-control-lg mb-3" id="num">
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-secondary">Order</button>
<br>
<br>
<div class="result text-center"></div>
If I understood you correctly
First you have to get count of products you want to buy
Then just simply multiply and you will have the total
$("button").click(function() {
var itemName = $("#type_select option:selected").attr('label');
var price = Number($("#type_select option:selected").data('price'));
var count = Number($("#num").val());
var total = price * count;
selectMenu[itemName] = total
var result = JSON.stringify(selectMenu).replace(/,/g, '<br>').replace(/\{|\}|"/g, "")
$(".result").html(result);
});
Read out the input field where you specify the amount
var amount = Number($("#num").val());
Then multiply it by your price
selectMenu[itemName] = (price*amount);
var data = {
Food: [{
id: 1,
name: 'Fried Rice',
price: 10000
},
{
id: 2,
name: 'Fried Noodle',
price: 9000
},
{
id: 3,
name: 'Pancake',
price: 8500
},
{
id: 4,
name: 'French Fries',
price: 7500
}
],
Drink: [{
id: 1,
name: 'Cola',
price: 4600
},
{
id: 2,
name: 'Orange Juice',
price: 5400
},
{
id: 3,
name: 'Mineral Water',
price: 3500
},
{
id: 4,
name: 'Coffee',
price: 5800
}
]
}
function handleChange() {
var x = document.getElementById("category_select").value;
var dataOptions = data[x]
var dataSelect = document.getElementById('type_select')
dataSelect.innerHTML = ''
dataOptions.forEach(function(option) {
var optionEle = document.createElement('option')
optionEle.value = option.id
optionEle.label = option.name
optionEle.setAttribute('data-price', option.price)
dataSelect.appendChild(optionEle)
})
}
handleChange()
$(document).ready(function() {
var selectMenu = {};
$("button").click(function() {
var itemName = $("#type_select option:selected").attr('label');
var amount = Number($("#num").val());
var price = Number($("#type_select option:selected").data('price'));
if (selectMenu.hasOwnProperty(itemName)) {
selectMenu[itemName] += (price*amount);
} else {
selectMenu[itemName] = (price*amount);
}
var result = JSON.stringify(selectMenu).replace(/,/g, '<br>').replace(/\{|\}|"/g, "")
$(".result").html(result);
});
});
button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
</style>
<title>Menu</title>
</head>
<body>
<div class="container">
<div class="container-fluid text-center">
<h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
<br>
<div class="row">
<div class="col-md-4">
<select class="form-select form-select-lg mb-3" id="category_select" onChange='handleChange()'>
<option value="Food">Food</option>
<option value="Drink">Drink</option>
</select>
</div>
<br>
<div class="col-md-4">
<select class="form-select form-select-lg mb-3" id="type_select"></select>
</div>
<div class="col-md-4">
<input type="number" class="form-control form-control-lg mb-3" id="num">
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-secondary">Order</button>
<br>
<br>
<div class="result text-center"></div>
Ok, I have modified your program to add and recalculate following the number of items. I have a test to avoid negative number...but you should avoid the input of id num to be negative.
var data = {
Food: [
{
id: 1,
name: 'Fried Rice',
price: 10000
},
{
id: 2,
name: 'Fried Noodle',
price: 9000
},
{
id: 3,
name: 'Pancake',
price: 8500
},
{
id: 4,
name: 'French Fries',
price: 7500
}
],
Drink: [
{
id: 1,
name: 'Cola',
price: 4600
},
{
id: 2,
name: 'Orange Juice',
price: 5400
},
{
id: 3,
name: 'Mineral Water',
price: 3500
},
{
id: 4,
name: 'Coffee',
price: 5800
}
]
}
function handleChange() {
var x = document.getElementById("category_select").value;
var dataOptions = data[x]
var dataSelect = document.getElementById('type_select')
dataSelect.innerHTML = ''
dataOptions.forEach(function (option) {
var optionEle = document.createElement('option')
optionEle.value = option.id
optionEle.label = option.name
optionEle.setAttribute('data-price', option.price)
dataSelect.appendChild(optionEle)
})
}
handleChange()
$(document).ready(function () {
var selectMenu = {};
$("button").click(function () {
var itemName = $("#type_select option:selected").attr('label');
var price = Number($("#type_select option:selected").data('price'));
if( Number($("#num").val())<=0)return;
if (selectMenu.hasOwnProperty(itemName)) {
selectMenu[itemName] = price * Number($("#num").val());
} else {
selectMenu[itemName] = price * Number($("#num").val());
selectMenu["Nbr"] = Number($("#num").val());
}
var result =JSON.stringify(selectMenu).replace(/,/g,'<br>').replace(/\{|\}|"/g,"")
$(".result").html(result);
});
});
button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
</style>
<title>Menu</title>
</head>
<body>
<div class="container">
<div class="container-fluid text-center">
<h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
<br>
<div class="row">
<div class="col-md-4">
<select class="form-select form-select-lg mb-3" id="category_select" onChange='handleChange()'>
<option value="Food">Food</option>
<option value="Drink">Drink</option>
</select>
</div>
<br>
<div class="col-md-4">
<select class="form-select form-select-lg mb-3" id="type_select"></select>
</div>
<div class="col-md-4">
<input type="number" class="form-control form-control-lg mb-3" id="num">
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-secondary">Order</button>
<br>
<br>
<div class="result text-center"></div>
I'm trying to make that when I click on the button to maximize div number 2 scroll down and place the div on top with a padding-top: 50px; and so on with the other elements, the idea is to scroll and place these elements at the top of the screen.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.items = [
{
"idUnidad": 1,
"idIdentidad": 1,
"Nombre": "Quito"
},
{
"idUnidad": 2,
"idIdentidad": 1,
"Nombre": "Guayaquil"
},
{
"idUnidad": 3,
"idIdentidad": 2,
"Nombre": "Cochabamba"
},
{
"idUnidad": 4,
"idIdentidad": 2,
"Nombre": "La paz"
},
{
"idUnidad": 5,
"idIdentidad": 3,
"Nombre": "Cusco"
}
];
$scope.addAactiveToItem = function(item) {
item.active = true;
$scope.activate = true;
}
$scope.minItem = function(item) {
item.active = false;
}
});
.container-div {
background-color: red;
width: 300px;
height: 150px;
margin: 15px;
}
.expanded-div {
height: 400px;
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<div ng-repeat="item in items track by $index" style="padding: 15px;">
<div class="container-div" ng-class="{'expanded-div': item.active}">
<h1>{{ item.idUnidad }}</h1>
<button class="btn btn-primary" ng-click="addAactiveToItem(item);" ng-if="!item.active">Maximizar este div</button>
<button class="btn btn-primary" ng-click="minItem(item);" ng-if="item.active">Minimizar</button>
</div>
</div>
</div>
</body>
</html>
I hope that I understood you correctly. I wrote some code, test it out and call me if that is not what you wanted
Here is your controller:
app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
/*ADDING A ORDER ATTRIBUTE SO YOU CAN ORDER BY IT*/
$scope.items = [
{
"idUnidad": 1,
"idIdentidad": 1,
"Nombre": "Quito",
"Order": 1
},
{
"idUnidad": 2,
"idIdentidad": 1,
"Nombre": "Guayaquil",
"Order": 2
},
{
"idUnidad": 3,
"idIdentidad": 2,
"Nombre": "Cochabamba",
"Order": 3
},
{
"idUnidad": 4,
"idIdentidad": 2,
"Nombre": "La paz",
"Order": 4
},
{
"idUnidad": 5,
"idIdentidad": 3,
"Nombre": "Cusco",
"Order": 5
}
];
$scope.addAactiveToItem = function(item) {
item.active = true;
$scope.activate = true;
var index = $scope.items.indexOf(item); //GETTING THE INDEX OF THE ITEM YOU CLICKED ON THE ARRAY
$scope.items.splice(index, 1); //REMOVING THIS ITEM FROM ITS CURRENT POSITION
$scope.items.unshift(item); //PUTTING IT TO THE FIRST POSITION OF YOUR ARRAY
window.scrollTo( 0, 0); //SCROLLING TO THE TOP (0,0)
}
$scope.minItem = function(item) {
item.active = false;
}
}]);
Here is your HTML, just changed the orderby and removed the track by $index which is not needed this case.
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../styles/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="../scripts/app.js" ></script>
<script src="../scripts/controller.js" ></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<div ng-repeat="item in items | orderBy: item.order" style="padding: 15px;">
<div class="container-div" ng-class="{'expanded-div': item.active}">
<h1>{{ item.idUnidad }}</h1>
<button class="btn btn-primary" ng-click="addAactiveToItem(item);" ng-if="!item.active">Maximizar este div</button>
<button class="btn btn-primary" ng-click="minItem(item);" ng-if="item.active">Minimizar</button>
</div>
</div>
</div>
</body>
</html>
I'm trying to set up fullCalendar in the laravel framework and for some reason it doesn't work.
I've made a separate prototype (no framework, just an index.html file) and when I copy that code, it suddenly doesn't work anymore...
I'm getting a Uncaught TypeError: $(...).fullCalendar is not a function error.
Can anyone tell me what I did wrong?
laravel:
app.blade.php
<!DOCTYPE html>
<html lang="<!DOCTYPE html">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Larabase</title>
<script src="{{ asset('bower/jquery/dist/jquery.js') }}"></script>
<script src="{{ asset('bower/moment/moment.js') }}"></script>
<script src="{{ asset('bower/moment/locale/nl.js') }}"></script>
<script src="{{ asset('bower/fullcalendar/dist/fullcalendar.js') }}"></script>
<script src="{{ asset('bower/fullcalendar/dist/lang/nl.js') }}"></script>
<link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.css') }}"/>
<link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.print.css') }}"/>
#stack('scripts_head_before')
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
{{-- Font Awesome --}}
{{--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--}}
#stack('scripts_head_after')
</head>
<body>
#include('partials.nav')
<div class="container" style="margin-top: 30px;">
#include('partials.alert')
#yield('content')
</div><!-- /.container -->
#stack('scripts_footer_before')
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
{!! HTML::script('js/global.js') !!}
#stack('scripts_footer_after')
</body>
</html>
laravel: home.blade.php
#extends('app')
#section('content')
<div id='calendar'></div>
<script type="text/javascript">
var events = [
{
title: 'Meeting',
start: '2016-01-12T10:30:00',
end: '2016-01-12T11:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T11:30:00',
end: '2016-01-12T12:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T12:30:00',
end: '2016-01-12T13:30:00'
}
];
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
lang: 'nl',
eventLimit: true,
weekends: true,
firstDay: 1,
weekNumbers: true,
businessHours: {
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [1, 2, 3, 4, 5]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
},
events,
dayClick: function (date, jsEvent, view) {
alert('Clicked on: ' + date.format());
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'red');
},
eventClick: function (calEvent, jsEvent, view) {
// alert('Event: ' + calEvent.title);
// alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
// alert('View: ' + view.name);
console.log('event', calEvent);
console.log('jsEvent', jsEvent);
console.log('View', view);
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
});
</script>
#stop
index.html prototype (that works):
<html>
<head>
<title>Fullcalendar prototype</title>
<link rel='stylesheet' href='bower_components/fullcalendar/dist/fullcalendar.css'/>
<script src='bower_components/jquery/dist/jquery.min.js'></script>
<script src='bower_components/moment/min/moment.min.js'></script>
<script src='bower_components/fullcalendar/dist/fullcalendar.js'></script>
<script src='bower_components/fullcalendar/dist/lang/nl.js'></script>
<script src='bower_components/bootstrap/dist/js/bootstrap.min.js'></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body>
<h1>Fullcalendar prototype
<button id="addbutton" class="btn btn-default">+</button>
</h1>
<div id='calendar'></div>
<script type="text/javascript">
var events = [
{
title: 'Meeting',
start: '2016-01-12T10:30:00',
end: '2016-01-12T11:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T11:30:00',
end: '2016-01-12T12:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T12:30:00',
end: '2016-01-12T13:30:00'
}
];
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
lang: 'nl',
eventLimit: true,
weekends: true,
firstDay: 1,
weekNumbers: true,
businessHours: {
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [1, 2, 3, 4, 5]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
},
events,
dayClick: function (date, jsEvent, view) {
alert('Clicked on: ' + date.format());
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'red');
},
eventClick: function (calEvent, jsEvent, view) {
// alert('Event: ' + calEvent.title);
// alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
// alert('View: ' + view.name);
console.log('event', calEvent);
console.log('jsEvent', jsEvent);
console.log('View', view);
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
});
</script>
</body>
</html>
Write your code as below:-
app.blade.php
<!DOCTYPE html>
<html lang="<!DOCTYPE html">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Larabase</title>
<script src="{{ asset('bower/jquery/dist/jquery.js') }}"></script>
<script src="{{ asset('bower/moment/moment.js') }}"></script>
<script src="{{ asset('bower/moment/locale/nl.js') }}"></script>
<script src="{{ asset('bower/fullcalendar/dist/fullcalendar.js') }}"></script>
<script src="{{ asset('bower/fullcalendar/dist/lang/nl.js') }}"></script>
<link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.css') }}"/>
<link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.print.css') }}"/>
#stack('scripts_head_before')
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
{{-- Font Awesome --}}
{{--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--}}
#stack('scripts_head_after')
</head>
<body>
#include('partials.nav')
<div class="container" style="margin-top: 30px;">
#include('partials.alert')
#yield('content')
</div><!-- /.container -->
#stack('scripts_footer_before')
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
{!! HTML::script('js/global.js') !!}
#stack('scripts_footer_after')
// ADD another yield section here.
#yield('external_script')
</body>
</html>
home.blade.php
#extends('app')
#section('content')
<!-- Add only div here -->
<div id='calendar'></div>
#stop
#section('external_script')
<!-- Here is your script-->
<script type="text/javascript">
var events = [
{
title: 'Meeting',
start: '2016-01-12T10:30:00',
end: '2016-01-12T11:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T11:30:00',
end: '2016-01-12T12:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T12:30:00',
end: '2016-01-12T13:30:00'
}
];
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
lang: 'nl',
eventLimit: true,
weekends: true,
firstDay: 1,
weekNumbers: true,
businessHours: {
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [1, 2, 3, 4, 5]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
},
events,
dayClick: function (date, jsEvent, view) {
alert('Clicked on: ' + date.format());
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'red');
},
eventClick: function (calEvent, jsEvent, view) {
// alert('Event: ' + calEvent.title);
// alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
// alert('View: ' + view.name);
console.log('event', calEvent);
console.log('jsEvent', jsEvent);
console.log('View', view);
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
});
</script>
#stop
Hope it will help you :)
I have a simple paper-input that I'm trying to get the value from but for some reason I'm not having any luck. Here's a simplified version of the HTML where I set up the button and the onclick event:
<paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
<core-header-panel flex id="annotation-box">
<core-toolbar class="graph-sets-header">
<span flex>TEST</span>
</core-toolbar>
<br>
<paper-input-decorator label="Add your annotation">
<paper-autogrow-textarea>
<textarea id="annotationSource"></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-button dismissive hover >Cancel</paper-button>
<paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
</core-header-panel>
</paper-action-dialog>
and here's my JS function:
function getAnnotation(){
var toolText = document.getElementById('annotationSource').value;
console.log(toolText);
}
Here's a plunker with most of it running (except I can't get the value of the paper-input to show in the console: http://plnkr.co/edit/1PAi13ISgP7mNXDMNStF?p=preview
I'm sure could make this a polymer template, but I need to pass the value to a bunch of other functions in the main HTML and I keep having problems with moving data in and out of a template so I'd like to avoid that if I can.
Adding some more flow to make it clearer*
To bring up the annotation box you need to click on any of the points on the graph in the plunker - doing so brings up the paper-input box, which I want to use to create an annotation... eventually adding the annotation text to a tooltip that will appear by doing a mouse over on the dot that I generate
With a template using 'auto-binding' it's easier to access the annotationSource element
var chart = c3.generate({
bindto: '#graph',
padding: {
top: 30
},
data: {
xs: {
'data1': 'x1',
'data2': 'x2',
},
columns: [
['x1', 1, 3, 4, 5, 7, 10],
['x2', 3, 5, 7, 10, 12],
['data1', 2, 3, 6, 7.5, 8, 9.5],
['data2', 2, 4, 4.5, 10, 11]
],
onclick: function(d, i) {
console.log("onclick", d, i);
console.log(i.getAttribute('cx'));
var setCX = Number(i.getAttribute('cx'));
document.getElementById("someTemplate").$.addAnnotation.toggle()
var svg = d3.select("svg");
var circle = svg.append("circle")
.attr("cy", 10)
.attr("cx", (setCX + 40))
.attr("r", 5);
}
}
});
function getAnnotation() {
var annotationSource = document.getElementById("someTemplate").$.annotationSource;
var toolText = annotationSource.value;
console.log(toolText);
}
<script src="https://www.polymer-project.org/webcomponents.min.js?20141211"></script>
<link href="https://www.polymer-project.org/components/paper-dialog/paper-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-dialog/paper-action-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-input/paper-input.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-fab/paper-fab.html" rel="import">
<link rel="import" href="https://www.polymer-project.org/components/paper-input/paper-autogrow-textarea.html">
<link href="http://c3js.org/css/c3-b03125fa.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://c3js.org/js/d3.min-3bff8220.js" type="text/javascript"></script>
<script src="http://c3js.org/js/c3.min-78d63552.js" type="text/javascript"></script>
<template id="someTemplate" is="auto-binding">
<paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
<core-header-panel flex id="annotation-box">
<core-toolbar class="graph-sets-header">
<span flex>TEST</span>
</core-toolbar>
<br>
<paper-input-decorator label="Add your annotation">
<paper-autogrow-textarea>
<textarea id="annotationSource"></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-button dismissive hover>Cancel</paper-button>
<paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
</core-header-panel>
</paper-action-dialog>
</template>
<div id="graph">
</div>
ok without using a template I've used the window.event to obtain the paper button element that is being clicked, then from there grabbed the annotation-box element then used querySelector to get the annotationSource element. There maybe a better way but it works
var chart = c3.generate({
bindto: '#graph',
padding: {
top: 30
},
data: {
xs: {
'data1': 'x1',
'data2': 'x2',
},
columns: [
['x1', 1, 3, 4, 5, 7, 10],
['x2', 3, 5, 7, 10, 12],
['data1', 2, 3, 6, 7.5, 8, 9.5],
['data2', 2, 4, 4.5, 10, 11]
],
onclick: function(d, i) {
console.log("onclick", d, i);
console.log(i.getAttribute('cx'));
var setCX = Number(i.getAttribute('cx'));
document.querySelector('#addAnnotation').toggle()
var svg = d3.select("svg");
var circle = svg.append("circle")
.attr("cy", 10)
.attr("cx", (setCX + 40))
.attr("r", 5);
}
}
});
function getAnnotation() {
var paperBtnElement = window.event.toElement || window.event.relatedTarget || window.event.target;
var toolText = paperBtnElement.parentElement.querySelector("#annotationSource").value;
console.log(toolText);
}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 12px;
padding: 8px;
font: 10px sans-serif;
background: #ddd;
border: solid 1px #aaa;
border-radius: 8px;
pointer-events: none;
}
<script src="https://www.polymer-project.org/webcomponents.min.js?20141211"></script>
<link href="https://www.polymer-project.org/components/paper-dialog/paper-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-dialog/paper-action-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-input/paper-input.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-fab/paper-fab.html" rel="import">
<link rel="import" href="https://www.polymer-project.org/components/paper-input/paper-autogrow-textarea.html">
<link href="http://c3js.org/css/c3-b03125fa.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://c3js.org/js/d3.min-3bff8220.js" type="text/javascript"></script>
<script src="http://c3js.org/js/c3.min-78d63552.js" type="text/javascript"></script>
<paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
<core-header-panel flex id="annotation-box">
<core-toolbar class="graph-sets-header">
<span flex>TEST</span>
</core-toolbar>
<br>
<paper-input-decorator label="Add your annotation">
<paper-autogrow-textarea>
<textarea id="annotationSource"></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-button dismissive hover>Cancel</paper-button>
<paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
</core-header-panel>
</paper-action-dialog>
<div id="graph">
</div>