I installed ace edintor for VestaCP. But I can't enable emmet when I enable enableLiveAutocompletion and enableBasicAutocompletion.
mycode jsfiddle: https://jsfiddle.net/Akbarali/bpgw39oy/
I found it myself
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Edit file /home/admin/index.php</title>
<script src="/js/cheef-editor/jquery/jquery-1.8.3.min.js"></script> <!-- load emmet code and snippets compiled for browser -->
<script src="https://cloud9ide.github.io/emmet-core/emmet.js"></script>
<script src="https://ace.c9.io/build/src-noconflict/ace.js"></script>
<script src="/js/kitchen-sink/require.js"></script>
<script src="https://ace.c9.io/build/src-noconflict/ext-language_tools.js"></script>
<script type="text/javascript" src="/js/hotkeys.js"></script>
<style type="text/css" media="screen">
body {
overflow: hidden;
}
#editor {
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<input type="submit" onclick="makeBackup();" value="Backup" style="display:block;position: relative;background-color: #2049C6;color: white;padding: 10px;z-index: 999999999999999999999;float: right;margin-top: 80px;margin-right: 15px;">
<input type="submit" onClick="save_file();" value="Saqlash" style="display:block;position: relative;background-color: #00FF3A;color: black;padding: 10px;z-index: 999999999999999999999;float: right;margin-top: 133px;margin-right: -69px;" />
<div id="message" style="display:none;position: relative;background-color: green;color: white;padding: 10px;z-index: 999999999999999999999;float: right;"></div>
<div id="bajarilmoqda" style="display:none;position: relative;background-color: yellow;color: black;padding: 10px;z-index: 999999999999999999999;float: right;">Berilgan vazifa qayta ishlanmoqda</div>
<div id="error-message" style="display:none; position: relative;background-color: red; color: white; padding: 10px;z-index: 999999999999999999999;float: right;"></div>
<textarea name="editor" style="display:none;width: 100%; height: 100%;"><input type="submit" onClick="save_file();" value="Saqlash" style="display:block;position: relative;background-color: #00FF3A;color: black;padding: 10px;z-index: 999999999999999999999;float: right;margin-top: 133px;margin-right: -69px;" />
<input type="submit" onClick="save_file();" value="Saqlash" style="display:block;position: relative;background-color: #00FF3A;color: black;padding: 10px;z-index: 999999999999999999999;float: right;margin-top: 133px;margin-right: -69px;" />
asas
asas
</textarea>
<div id="editor"></div>
<script>
// setup paths
require.config({paths: { "ace" : "../../js/lib/ace"}});
// load ace and extensions
require(["ace/ace", "ace/ext/emmet", "ace/ext/settings_menu", "ace/ext/language_tools"], function(ace) {
var editor = ace.edit("editor");
editor.setOptions({
copyWithEmptySelection: true,
enableSnippets: true,
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
fontSize: "14px",
});
editor.setTheme("ace/theme/tomorrow_night_eighties");
var textarea = $('textarea[name="editor"]').hide();
ace.require('ace/ext/settings_menu').init(editor);
editor.session.setMode("ace/mode/php");
// enable emmet on the current editor
editor.setOption("enableEmmet", true);
editor.setOption("wrap", true);
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
textarea.val(editor.getSession().getValue());
});
editor.commands.addCommand({
name: "showKeyboardShortcuts",
bindKey: {win: "Ctrl-Alt-h", mac: "Command-Alt-h"},
exec: function(editor) {
ace.config.loadModule("ace/ext/keybinding_menu", function(module) {
module.init(editor);
editor.showKeyboardShortcuts()
})
}
})
// editor.execCommand("showKeyboardShortcuts");
/*editor.setOption("wrap", true);
editor.commands.addCommands([{
name: "showSettingsMenu",
bindKey: {win: "Ctrl-q", mac: "Ctrl-q"},
exec: function(editor) {
editor.showSettingsMenu();
},
readOnly: true
}]);
*/
});
var makeBackup = function() {
var params = {
action: 'backup',
path: '/home/admin/index.php'
};
$.ajax({url: "/file_manager/fm_api.php",
method: "POST",
data: params,
dataType: 'JSON',
beforeSend: function() {$('#bajarilmoqda').show();},
success: function(reply) {
$('#bajarilmoqda').hide();
var fadeTimeout = 3000;
if (reply.result) {
$('#message').text('File backed up as ' + reply.filename);
clearTimeout(window.msg_tmt);
$('#message').show();
window.msg_tmt = setTimeout(function() {$('#message').fadeOut();}, fadeTimeout);
}
else {
$('#error-message').text(reply.message);
clearTimeout(window.errmsg_tmt);
$('#error-message').show();
window.errmsg_tmt = setTimeout(function() {$('#error-message').fadeOut();}, fadeTimeout);
}
}
});
}
$('#do-backup').on('click', function(evt) {
evt.preventDefault();
makeBackup();
});
function save_file(){
var pagelink = window.location.href;
var contents = $('textarea[name="editor"]').val();
$.ajax({
url: pagelink,
type: "POST",
data: { save:'save', contents:contents},
beforeSend: function() {$('#bajarilmoqda').show();},
success: function (a) {
$('#bajarilmoqda').hide();
var fadeTimeout = 3000;
if(a == 'saqlandi'){
$('#message').text('Fayl muvafaqiyatli saqlandi');
clearTimeout(window.msg_tmt);
$('#message').show();
window.msg_tmt = setTimeout(function() {$('#message').fadeOut();}, fadeTimeout);
}else{
$('#error-message').text('Fayl saqlanmadi nimagaligini bilmadim');
clearTimeout(window.errmsg_tmt);
$('#error-message').show();
window.errmsg_tmt = setTimeout(function() {$('#error-message').fadeOut();}, fadeTimeout);
}
}
});
}
shortcut.add("Ctrl+s",function() {
save_file();
},{
'type': 'keydown',
'propagate': false,
'disable_in_input': false,
'target': document
});
shortcut.add("Shift+f12",function() {
save_file();
},{
'type': 'keydown',
'propagate': false,
'disable_in_input': false,
'target': document
});
shortcut.add("Ctrl+b",function() {
makeBackup();
},{
'type': 'keydown',
'propagate': false,
'disable_in_input': false,
'target': document
});
</script>
</body>
</html>
Related
I wrote an AJAX Javascript code for my ESP32 datalogger which worked so far using old versions of Chart.js. The website hosted by the ESP32 is not working anylonger if I use a more recent of Chart.js.
The error message I caught is:
Uncaught ReferenceError: Chart is not defined at datalogin.html
The line in the code involved is this one
const myChart = new Chart(ctx, config);
Something in the interpretation seems to occur at a very early stage. But I could not identify what. See code below.
I already tried different Chart.js repository in order to have it working. It had absolutly no influence. I actively looked using different browser regarding this specific problematic and I could not find any way of solving this problem.
Thanks a lot for your support
<!DOCTYPE html>
<html lang="en">
<head>
<title>EFM Meter loggin interface</title>
<link rel="icon" type="image/x-icon" href="lightning.ico">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="https://github.com/cdnjs/cdnjs/blob/master/ajax/libs/Chart.js/4.0.1/chart.js" ></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns#2.0.1/dist/chartjs-adapter-date-fns.bundle.js"></script>
<style>
.jumbotron {
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Elektrofeldmeter Data Logging Page</h1>
</div>
<div class="container">
<div class="border border-2 m-2">
<div class="row">
<div class="col-sm-12 ">
<div class="container-sm">
<canvas id="myChart" style="" height="152"></canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="border border-2 m-2">
<div class="col-sm-12">
<h3> Parameters setup</h3>
</div>
</div>
<div class="border border-2 m-2">
<div class="row">
<div class="col-sm-12">
<label for="customRange1" class="form-label" id="labelPWM">PWM of motor: 190</label>
<input type="range" class="form-range" min="0" max="190" step="1" value="190" onchange="rangeValue(this)" id="customRange1">
</div>
<div class="col-sm-6">
<label for="customRange2" class="form-label" id="labelYmin">Y min: -5000</label>
<input type="range" class="form-range" min="-5000" max="5000" step="1" value="-5000" onchange="rangeY()" id="Ymin">
</div>
<div class="col-sm-6">
<label for="customRange2" class="form-label" id="labelYmax">Y max: +5000 0</label>
<input type="range" class="form-range" min="-5000" max="5000" step="1" value="5000" onchange="rangeY()" id="Ymax">
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="saveAs()">*.CSV</button>
</div>
</div>
</div>
</div>
</div>
<script>
function rangeValue(element) {
console.log(element.value);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/pwm?value="+element.value, true);
xhr.send();
document.getElementById("labelPWM").innerHTML = "PWM of motor: " + element.value;
};
function rangeY() {
myChart.options.scales.y.max = document.getElementById('Ymax').value;
myChart.options.scales.y.min = document.getElementById('Ymin').value;
myChart.update();
};
function clkOrientation(element) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/clk?value="+element.checked, true);
xhr.send();
}
const animation = { };
const config = {
type: 'line',
data: {
datasets: [{
borderColor: '#fc9905',
borderWidth: 2,
radius: 0,
data: 0
}
]
},
options: {
animation,
interaction: {
intersect: false
},
plugins: {
legend: false
},
scales: {
x: {
type: 'time',
title: {
display: true,
text: 'time',
color: '#000000',
font: {
size: 20
}
},
ticks :
{
color: '#000000',
font: {
size: 12
}
}
},
y: {
type: 'linear',
title: {
display: true,
text: 'Electrical field [V/m] # PWM=190',
color: '#000000',
font: {
size: 20
}
},
ticks :
{
color: '#000000',
font: {
size: 12
}
}
}
},
plugins: {
title: {
display: true,
text: 'Electrical field value [V/m]'
}
}
}
};
Chart.defaults.font.size = 20;
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, config);
function addData(chart, data) {
for (var i = 0 ; i < data.length; i++){
chart.data.datasets[0].data.push({"x":data[i].x,"y":(data[i].y-32.671)/0.48025});
};
chart.update();
};
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var txt = this.responseText;
var array = JSON.parse(txt); //Ref: https://www.w3schools.com/js/js_json_parse.asp
addData(myChart,array);
}
};
xhttp.open("GET", "readEFM", true); //Handle readADC server on ESP32
xhttp.send();
};
setInterval(function() {
getData();
}, 5000);
txt = '[{"x":1662921606250,"y":35.71},{"x":1662921606450,"y":35.61},{"x":1662921606650,"y":35.70},{"x":1662921606850,"y":35.74},{"x":1662921607050,"y":35.78},{"x":1662921607250,"y":35.45},{"x":1662921607450,"y":35.65},{"x":1662921607650,"y":35.66},{"x":1662921607850,"y":35.78},{"x":1662921608050,"y":35.76}]';
const myArr = JSON.parse(txt);
addData(myChart,myArr);
myChart.update();
function saveAs(){
let csvContent = "data:text/csv;charset=utf-8,";
for (var i = 0 ; i < myChart.data.datasets[0].data.length; i++){
csvContent+=myChart.data.datasets[0].data[i].x + "," + myChart.data.datasets[0].data[i].y + "\n";
}
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "EFM_log.csv");
document.body.appendChild(link);
link.click();
};
</script>
</body>
</html>
I am trying to generate a bar graph using data from MYSQL through ajax by taking two input date fields from the user and returning the results using ajax.The problem is that when i select the date range, it doesn't show me anything.
I am new to Ajax as well, so any help will be appreciated.
Below is the code i have tried so far;
Thanks
<?php
$cakeDescription = "Highcharts Pie Chart";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php echo $cakeDescription ?></title>
<link href="../webroot/css/cake.generic.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//default
var startdate = document.getElementById('startdate').value;
var enddate = document.getElementById('enddate').value;
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Highcharts Chart PHP with MySQL Example',
x: -20 //center
},
subtitle: {
text: 'Sumber : Jabatan XYZ',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Jumlah Pelawat'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y}</b> of total<br/>'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
shadow: true
},
series: []
};
function getAjaxData(startdate,enddate) {
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
}
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<a class="link_header" href="/highcharts/"><< Back to index</a>
<div class="menu_top" >
<input type="date" id="startdate" name="startddate">
<input type="date" id="enddate" name="enddate">
</div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
</body>
</html>
Below is my data.phpfile,
<?php
#Basic Line
require '../../conn/connection.php';
$id = $_GET['id'];
$startdate = $_GET['startdate'];
$enddate = $_GET['enddate'];
$result = mysql_query("SELECT DISTINCT(membername), COUNT(membername)
AS member
FROM responses WHERE timerecorded>=" . $startdate . " AND timerecorded<=" . $enddate . " GROUP BY membername");
$bln = array();
$bln['name'] = 'Bulan';
$rows['name'] = 'Jumlah Pelawat';
while ($r = mysql_fetch_array($result)) {
$bln['data'][] = $r['membername'];
$rows['data'][] = $r['member'];
}
$rslt = array();
array_push($rslt, $bln);
array_push($rslt, $rows);
print json_encode($rslt, JSON_NUMERIC_CHECK);
mysql_close($con);
I use ddslick list, and I search how copy opening of classical list.
When I have place to open in down direction then open in classical mode but when i don't have place I want force the opening in up direction.
and I can't say to my ddslick list open up a table like a simple select.
I give a sample code
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="tableHautMax.aspx.vb"
Inherits="Jquery.tableHautMax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script/jquery.ddslick.min.js"></script>
<style type="text/css">
.MaxHeightPopup
{
border-style: solid;
border-color: red;
display: block;
max-height: 100px;
overflow: auto;
}
</style>
<script type="text/javascript">
$(function () {
var ddData = [
{
text: "Facebook",
value: 1,
selected: false,
description: "Description with Facebook",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
},
{
text: "Twitter",
value: 2,
selected: false,
description: "Description with Twitter",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
},
{
text: "LinkedIn",
value: 3,
selected: true,
description: "Description with LinkedIn",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
},
{
text: "Foursquare",
value: 4,
selected: false,
description: "Description with Foursquare",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
}
];
$("#btnAdd").click(function () {
var row = '<tr height="50"><td>';
row += '<select class="myDropdown"></select></td>';
row += '<td>2</td><td>3</td><td >4</td></tr>';
$('#tbdatas').append(row);
$('.myDropdown').ddslick({
zindex: 200,
data: ddData,
width: 300,
selectText: "Select your preferred social network",
imagePosition: "right"
});
});
$("#btnAdd1").click(function () {
var row = '<tr height="50"><td>';
row += '<select class="myselect1"></select></td>';
row += '<td>2</td><td>3</td><td >4</td></tr>';
$('#tbdatas1').append(row);
});
});
</script>
</head>
<body>
<button id="btnAdd">
Ajouter 1 ligne</button>
<table class="MaxHeightPopup" id="tbdatas">
</table>
<br />
<button id="btnAdd1">
Ajouter 1 ligne</button>
<table class="MaxHeightPopup" id="tbdatas1">
</table>
</body>
</html>
Can someone help me please?
i just see if i add
.dd-container
{
position:static;
}
But after .dd-options not in good position
it's better like that, but not perfect
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="tableHautMax.aspx.vb"
Inherits="Jquery.tableHautMax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script/jquery.ddslick.min.js"></script>
<style type="text/css">
.MaxHeightPopup
{
border-style: solid;
border-color: red;
display: block;
max-height: 100px;
overflow: auto;
}
.dd-container
{
position: static;
}
</style>
<script type="text/javascript">
$(function () {
var mypositions = [];
var ddData = [
{
text: "Facebook",
value: 1,
selected: false,
description: "Description with Facebook",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
},
{
text: "Twitter",
value: 2,
selected: false,
description: "Description with Twitter",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
},
{
text: "LinkedIn",
value: 3,
selected: true,
description: "Description with LinkedIn",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
},
{
text: "Foursquare",
value: 4,
selected: false,
description: "Description with Foursquare",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
}
];
$("#btnAdd").click(function () {
var nbl = $('#tbdatas tr').length;
var row = '<tr height="50"><td>';
row += '<select class="myDropdown" id="' + nbl + '"></select></td>';
row += '<td>2</td><td>3</td><td >4</td></tr>';
$('#tbdatas').append(row);
$('#' + nbl).ddslick({
zindex: 200,
data: ddData,
width: 300,
selectText: "Select your preferred social network",
imagePosition: "right"
});
var windowpos = $("#tbdatas").scrollTop();
mypositions.push(parseInt($('#' + nbl).position().top) + windowpos);
});
$("#tbdatas").scroll(function () {
var windowpos = $("#tbdatas").scrollTop();
$('.dd-container').each(function () {
$('.dd-options', $(this)).css("top", parseInt(this.clientHeight) + parseInt(mypositions[this.id]) - windowpos);
});
});
});
</script>
</head>
<body>
<button id="btnAdd">
Ajouter 1 ligne</button>
<table class="MaxHeightPopup" id="tbdatas">
</table>
</body>
</html>
I am using J Vector Map (http://jvectormap.com/documentation/javascript-api/) to create a map of the United States.
What I want to be able to do is have a button for each state that you can click on and have the corresponding region in the map be selected (or unselected, if it already was selected). I am trying to use map.setSelectedRegion for this, but I can't get any of the code to work. Currently trying map.setSelectedRegion("US-CA") to no avail.
Any ideas on what to do?
Thanks!
There seem to be a lot of request for linking links with jvectormap.
I've put together a jsfiddle here: http://jsfiddle.net/3xZ28/117/
HTML
<ul id="countries">
<li>Romania</li>
<li>Australia</li>
</ul>
<div id="world-map" style="width: 600px; height: 400px"></div>
JS
var wrld = {
map: 'world_mill_en',
regionStyle: {
hover: {
"fill": 'red'
}
}
};
function findRegion(robj, rname) {
var code = '';
$.each(robj, function (key) {
if ( unescape(encodeURIComponent(robj[key].config.name)) === unescape(encodeURIComponent(rname)) ) {
code = key;
};
});
return code;
};
$(document).ready(function () {
$('#world-map').vectorMap(wrld);
var mapObj = $('#world-map').vectorMap('get', 'mapObject');
$('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
// event.preventDefault();
var elem = event.target,
evtype = event.type,
cntrycode = findRegion(mapObj.regions, $(elem).text());
if (evtype === 'mouseover') {
mapObj.regions[cntrycode].element.setHovered(true);
} else {
mapObj.regions[cntrycode].element.setHovered(false);
};
});
});
Once you've set the handle
var mapObject = $('#your_map_div_id').vectorMap('get', 'mapObject');
Just use the built in function setSelectedRegions (mind the "s"):
mapObject.setSelectedRegions(your_region_code); //to set
mapObject.setSelectedRegions({your_region_code:false}); //to unset
If it still doesn't work, post your code, maybe it's something else.
This code is outdated, below is updated version of the code, according jvectormap latest API. Here is demo snippet:
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="jqvmap.min.css" type="text/css" media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="jquery.vmap.min.js"></script>
<script src="jquery.vmap.world.js"></script>
<script>
jQuery(document).ready(function () {
$('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#2f95c9',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
regionsSelectableOne: false,
regionsSelectable: false,
series: {
regions: [{
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
}
});
var mapObj = $('#vmap').data('mapObject');
$('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
// event.preventDefault();
var elem = event.target,
evtype = event.type;
if (evtype === 'mouseover') {
mapObj.select($(elem).attr('id'));
} else {
mapObj.deselect($(elem).attr('id'));
};
});
});
</script>
</head>
<body>
<ul id="countries">
<li><a id="RO" href="">Romania</a></li>
<li><a id="AU" href="">Australia</a></li>
</ul>
<div id="vmap" style="width: 100vw; height: 100vh;"></div>
</body>
</html>
SOLVED! Use my code!
I just can't use Ajax to refresh my result in JustGage. I've checked another post on Stackoverflow but this does not work. Could you please tell me what I'm doing wrong with the last setInterval function.
Thanks!
Matt
<!doctype html>
<html>
<head>
<title>Customize style</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style>
body {
text-align: center;
}
p {
display: block;
width: 450px;
margin: 2em auto;
text-align: left;
}
</style>
<script src="resources/js/raphael.2.1.0.min.js"></script>
<script src="resources/js/justgage.1.0.1.min.js"></script>
<script src="resources/js/jquery-1.9.1.min.js"></script>
<script>
var g1;
window.onload = function(){
var g1 = new JustGage({
id: "g1",
value: getRandomInt(500, 600),
min: 0,
max: 1500,
title: "CO",
label: "ppm",
gaugeWidthScale: 0.3
});
var myvar='';
$.ajax({
type:'post',
url: 'g1CO.php',
dataType:'text',
success: function(data) {
useReturnData(data);
}
});
function useReturnData(data){
myvar = data;
console.log(myvar);
};
setInterval(function() {
//$.get('g1CO.php', function(data) { g1.refresh(myvar); });
$.get("g1CO.php", function(data) { g1.refresh(data)});
}, 2500);
};
</script>
</head>
<body>
<table border="0">
<tr>
<td><div id="g1" style="width:300px; height:200px"></div></td>
</tr>
</table>
Use g.refresh(newValue).
var g1, g2;
window.onload = function(){
var g1 = new JustGage({
id: "cpugauge",
value: 0,
min: 0,
max: 100,
title: "CPU",
label: "Load"
});
var g2 = new JustGage({
id: "memgauge",
value: 0,
min: 0,
max: 100,
title: "Memory",
label: "Used"
});
setInterval(function() {
$.get('ajax/cpu.php', function (newValue) { g1.refresh(newValue); });
$.get('ajax/mem.php', function (newValue) { g2.refresh(newValue); });
}, 2500);
};