Given the below template and function, how can I pass the function argument contentText to display in the template #password-validation at the placeholder ###?
Template
<script id="password-validation" type="text/x-kendo-template">
<p style="font-size: 12px; padding: 10px">
###
</p>
<div style="text-align: right">
<button class="password-ok k-button">OK</button>
</div>
</script>
Function
function PasswordValidation(contentText) {
var kendoWindow = $("<div />").kendoWindow({
actions: ["Close"],
title: "Password validation",
resizable: false,
modal: true
});
kendoWindow.data("kendoWindow")
.content($("#password-validation").html())
.center().open();
kendoWindow
.find(".password-ok")
.click(function () {
kendoWindow.data("kendoWindow").close();
})
.end()
}
here is solution:
<script id="password-validation" type="text/x-kendo-template">
<p style="font-size: 12px; padding: 10px">
#=data#
</p>
<div style="text-align: right">
<button class="password-ok k-button">OK</button>
</div>
</script>
and function:
function PasswordValidation(contentText) {
var kendoWindow = $("<div />").kendoWindow({
actions: ["Close"],
title: "Password validation",
resizable: false,
modal: true
});
var template = kendo.template($("#password-validation").html());
kendoWindow.data("kendoWindow")
.content(template(contentText))
.center().open();
kendoWindow
.find(".password-ok")
.click(function () {
kendoWindow.data("kendoWindow").close();
})
.end()
}
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>
The reequirement is to make an RTL picker with multiple levels.
I copied the example from the documentation into a page equiped with the official frameworks' CSS for RTL users.
I have modified "textAlign" properties of each column as well.
For some reason the picker isn't acting as expected. open the snippet in full page mode.
var app = new Framework7({
root: '#app',
rtl: true,
theme: 'md'
});
app.views.create('#mainView', {
});
var carVendors = {
Japanese: ['Honda', 'Lexus', 'Mazda', 'Nissan', 'Toyota'],
German: ['Audi', 'BMW', 'Mercedes', 'Volkswagen', 'Volvo'],
American: ['Cadillac', 'Chrysler', 'Dodge', 'Ford']
};
var pickerDependent = app.picker.create({
inputEl: '#demo-picker-dependent',
rotateEffect: true,
formatValue: function(values) {
return values[1];
},
cols: [{
textAlign: 'right',
values: ['Japanese', 'German', 'American'],
onChange: function(picker, country) {
if (picker.cols[1].replaceValues) {
picker.cols[1].replaceValues(carVendors[country]);
}
}
},
{
textAlign: 'right',
values: carVendors.Japanese,
width: 160,
},
],
routableModals:false
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/css/framework7.rtl.md.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/js/framework7.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-title">
Dependent values</div>
<div id="app">
<div id="mainView">
<div class="list no-hairlines-md">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap">
<input type="text" placeholder="Your car" readonly="readonly" id="demo-picker-dependent" />
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
That seems like a bug in Framework7.
CSS 'right' and 'left' properties for first and last '.picker-column' don't fit RTL layout (flipped). The attached repair solved it.
var app = new Framework7({
root: '#app',
rtl: true,
theme: 'md'
});
app.views.create('#mainView', {
});
var carVendors = {
Japanese: ['Honda', 'Lexus', 'Mazda', 'Nissan', 'Toyota'],
German: ['Audi', 'BMW', 'Mercedes', 'Volkswagen', 'Volvo'],
American: ['Cadillac', 'Chrysler', 'Dodge', 'Ford']
};
var pickerDependent = app.picker.create({
inputEl: '#demo-picker-dependent',
rotateEffect: true,
formatValue: function(values) {
return values[1];
},
cols: [{
textAlign: 'right',
values: ['Japanese', 'German', 'American'],
onChange: function(picker, country) {
if (picker.cols[1].replaceValues) {
picker.cols[1].replaceValues(carVendors[country]);
}
}
},
{
textAlign: 'right',
values: carVendors.Japanese,
width: 160,
},
],
routableModals:false
});
.picker-column.picker-column-first:after{
left:100% !important;
right:0 !important;
}
.picker-column.picker-column-last:after{
left:0 !important;
right:100% !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/css/framework7.rtl.md.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/js/framework7.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-title">
Dependent values</div>
<div id="app">
<div id="mainView">
<div class="list no-hairlines-md">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap">
<input type="text" placeholder="Your car" readonly="readonly" id="demo-picker-dependent" />
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
EDIT:
github issue
I'm trying to use MEAN stack store and update a simple angular to do list, I've write a restful api for server.the post record function app.addTask = function(task) working fine if I remove $http.get from html, but once put it back, it stop record the new task.
Can't figure it out why, need your guys help.
Here is the server.js
var express = require('express'),
restful = require('node-restful'),
bodyParser = require('body-Parser'),
methodOverride = require('method-override'),
mongoose = restful.mongoose;
var app = express();
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
app.use(methodOverride());
mongoose.connect('mongodb://localhost/transTaskDB');
//create new collection
var TaskSchema = mongoose.Schema({
contents: String,
target: String,
color: String,
status: Boolean
});
var Tasks = restful.model('tasks', TaskSchema);
// Tasks.methods(['get', 'post', 'put', 'delete']);
// Tasks.register(app, '/api/tasks');
// ROUTES FOR OUR API
//===============================================
var router = express.Router(); //get an instance of express Router
// middleware to use for all requests
router.use(function(req, res, next) {
// do logging
console.log('Shown when each request made.');
next(); // make sure we go to the next routes and don't stop here
});
//custom filter find the last entry record
//record new task
router.route('/newtask')
.post(function(req, res){
//create a new instance of the task model
var task = new Tasks();
task.contents = req.body.taskContent;
task.target = req.body.taskUser;
task.color = req.body.taskColor;
// task.contents = "have a tea";
// task.target = "tony";
// task.color = "#e74c3c";
task.status = false; //** fasle means the task still open not done
//task.save();
//throw error exception in console
task.save(function(err, tasks) {
if (err)
res.send(err);
res.json(tasks);
});
})
.get(function(req, res){
Tasks.find(function(err, tasks) {
if (err)
res.send(err);
res.json(tasks);
});
});
//REGISTER OUT ROUTES --------
//all of our route will be prefixed with /api
app.use('/api/tasks', router);
app.listen(3000);
console.log('Server is running at port 3000');
html
<!doctype html>
<html lang='en' ng-app='TaskAPP'>
<head>
<meta charset='UTF-8'>
<title>Trans Task</title>
<link rel='stylesheet' href='bower_components/bootstrap-sass/dist/css/bootstrap.min.css' type='text/css'>
<link rel='stylesheet' href='bower_components/bootstrap-sass/dist/css/bootstrap-theme.min.css' type='text/css'>
<style>
body {
background-image: url('images/swirl_pattern.png');
background-repeat: repeat-y repeat-x;
}
.done {text-decoration: line-through; color: #ccc;}
.task-list {list-style: none;}
.published-list {
padding: 10px 40px;
}
.published-list >div {
padding: 20px;
border-radius: 10px;
font-size:20px;
color: white;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-tower"></span> Trans Task
</a>
</div>
</nav>
<div ng-controller='taskCtrl as app'>
<form role="form" name='frm2' ng-submit="app.addTask(app.task)">
<div class="form-group">
<label>Task Contains</label>
<input type='text' name='taskInput' class='form-control' ng-model="app.task.taskContent" placeholder="Enter task" required/>
</div>
<div class="form-group">
<!--need find a way to load the registed users from mongodb-->
<!--apply socket.io on each individual user to get realtime task update and update manager the roger response-->
<label>Target assign to</label>
<input type='text' name='taskInput' class='form-control' ng-model="app.task.taskUser" placeholder="Enter name" required/>
</div>
<div class="form-group">
<label>with color</label>
<select ng-model="app.task.taskColor">
<option ng-repeat="col in colors" value="{{col.color}}" >{{col.title}}</option>
</select>
</div>
<button class="btn btn-primary" ng-disabled='frm2.$invalid'>Publish</button>
</form>
<ul class='task-list'>
<li class="published-list" ng-repeat="tsk in app.task">
<div ng-style={'background-color':tsk.color}>
<input type='checkbox' ng-model='tsk.status'>
<span ng-class='{"done":tsk.status}'>{{tsk.contents}}</span>
</div>
</li>
</ul>
<!-- <button class="btn btn-danger" ng-click='clearCompleted()'>Clear Completed</button> -->
</div>
</div>
<script src='bower_components/jquery/dist/jquery.min.js'></script>
<script src='bower_components/angular/angular.min.js'></script>
<script src='bower_components/bootstrap-sass/dist/js/bootstrap.min.js'></script>
<script>
//angular parts
var app = angular.module('TaskAPP',[]);
//ajax sample
app.controller("taskCtrl", function($scope, $http) {
$scope.colors = [
{'title': 'red', 'color': '#e74c3c', 'status':true}, {'title': 'green', 'color': '#2ecc71', 'status':true}, {'title': 'amber', 'color': '#f39c12', 'status':true}
];
//you are the problem
var app = this;
$http.get("http://localhost:3000/api/tasks/newtask")
.success(function(data) {
//the return is the tasks json file
app.task = data;
})
app.addTask = function(task) {
$http.post("http://localhost:3000/api/tasks/newtask", task)
.success(function(data) {
//the return is the tasks json file
app.task = data;
})
}
})
</script>
</body>
</html>
I am using Listview of kendo ui. I have no server wrapper class I am using the free web version.
My controller code is given below:
public ActionResult Index()
{
return View();
}
public ActionResult GetCandidateSearch()
{
IhrmsEntities Entity = new IhrmsEntities();
List<VW_CANDBASICSEARCH> lstCandidateSearch = Entity.VW_CANDBASICSEARCH.Take(50).ToList();
return Json(lstCandidateSearch,JsonRequestBehavior.AllowGet);
}
My index.cshtml
<div>
#Html.Partial("~/Views/Home/PvCandidateBasicSearch.cshtml")
</div>
My PvCandidateBasicSearch.cshtml
<div class="gridHolder" style="width: 100%">
<div id="listCandidateView" class="itemDisplay"></div>
<div id="pager"></div>
</div>
<script type="text/x-kendo-tmpl" id="template">
<div class="itemDisplay">
<div class="text-label">${CAND_NAME} </div>
<div class="text-label">${CAND_LOCATION} </div>
<div class="text-label">${CAND_MOBILE} </div>
<div class="text-label">${CAND_PRE_EMAIL} </div>
<div class="text-label">${CAND_SKILL} </div>
<div class="text-label">${CAND_CITY} </div>
<a href="/Home/EditCandidate?id=${CAND_ID}" >Edit</a>
<a href="/Home/DeleteCandidate?id=${CAND_ID}" >Delete</a>
</div>
</script>
<style type="text/css">
.text-label {
font-size: large;
}
.itemDisplay {
margin: auto;
padding: 6px 8px;
width:auto;
min-width:200px;
height: auto;
min-height:100px;
border: 1px solid #999999;
-webkit-border-radius: 6px;
border-radius: 6px;
font-weight: normal;
background: #deefff;
}
.gridHolder{width: 100%; height:auto; min-height:300px; margin:auto;}
</style>
My javascript code in layout.cshtml is given below
<script type="text/javascript">
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/Home/GetCandidateSearch',
type: "GET",
dataType: "json"
}
},
pageSize: 15
});
$("#pager").kendoPager({
dataSource: dataSource
});
$("#btnSearch").click(function () {
LoadListView();
});
function LoadListView() {
$("#listCandidateView").kendoListView({
dataSource: dataSource,
pageable: true,
template: kendo.template($("#template").html())
});
}
</script>
when I first click search button it is perfectly going to the GetCandidateSearch action method and showing result.But when I second time clicking search button it is not going the action method. Plz help me.
You're misunderstanding the the datasource concept.
The datasource is an object holds the data gathered from request. On the second click you just re-binding that datasource to the ListView...
Basically, you need to bind the list view to the datasource on page load, then "OnClick", do datasource.read()
try this:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/Home/GetCandidateSearch',
type: "GET",
dataType: "json"
}
},
pageSize: 15
});
$(document).ready(function() {
$("#listCandidateView").kendoListView({
dataSource: dataSource,
pageable: true,
template: kendo.template($("#template").html())
});
});
$("#btnSearch").click(function () {
$("#listCandidateView").datasource.read();
});
Not saying that the exact code will work, but it should give you an idea of the approach.
I created multiple file uploader dynamically using javascript within the div FileUploadContainer.while i put btnSubmit outside the form tag i get Request.Files.Count as zero.I need to call the PopUp() through Json .If i put btnSubmit inside the form tag
it does not call the Save() on javascript and will call PopUp() method on form submit.
I need to call the PopUp() through Json and need to get the Request.Files.Count .Pls help.
#using (Html.BeginForm("PopUp", "EnergyCatagory", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div id="FixedHeightContainer">
<div id="FileUploadContainer">
</div>
<input type="button" id="btnAddAttachment" name="btnAddAttachment" class="ZWidgetTitle"
value="Add More Attachments" onclick="AddFileUpload()" />
</div>
<div id="NewAttachment">
<div style="background-color: #DADADA;">
<center>
<label style="font-family: Verdana; font-size: 13px; font-weight: bold; color: black;
height: 30px; width: 100%; padding-top: 20px;" id="lblMessage">
</label>
</center>
</div>
</div>
<div class="horizSep">
</div>
<div id="buttons">
</div>
} <button id="btnSubmit" class="buttons" onclick="Save()">
Attach</button>
function Save()
{$.ajax({
url: '/EnergyCatagory/PopUp',
type: 'POST',
contentType: 'application/json;',
dataType: 'json',
success: function (result) {
alert("success");
}
});
}controller-----
public ActionResult PopUp()
{
for (int i = 0; i < Request.Files.Count; i++)
{
HttpPostedFileBase PostedFile = Request.Files[i];
if (PostedFile.ContentLength > 0)
{
string FileName = System.IO.Path.GetFileName(PostedFile.FileName);
var path1 = Path.Combine(Server.MapPath("~/Files/"), FileName);
//PostedFile.SaveAs(Server.MapPath("Files\\") + FileName);
PostedFile.SaveAs(path1);
return Json(
new
{
CustomMessage = "My message",
});
}
}
If the form is getting submitted and don't calling the function onclick is because the input type is a button, you can change it to html a link tag.
also calling a inline javascript (onclick) is not good practice, i notice you use jquery so why don't do it with jquery?
function Save(){
$.ajax({
url: '/EnergyCatagory/PopUp',
type: 'POST',
contentType: 'application/json;',
dataType: 'json',
success: function (result) {
alert("success");
}
});
$("#btnSubmit").click(function(){
Save();
});
#using (Html.BeginForm("PopUp", "EnergyCatagory", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div id="FixedHeightContainer">
<div id="FileUploadContainer">
</div>
<input type="button" id="btnAddAttachment" name="btnAddAttachment" class="ZWidgetTitle"
value="Add More Attachments" onclick="AddFileUpload()" />
</div>
<div id="NewAttachment">
<div style="background-color: #DADADA;">
<center>
<label style="font-family: Verdana; font-size: 13px; font-weight: bold; color: black;
height: 30px; width: 100%; padding-top: 20px;" id="lblMessage">
</label>
</center>
</div>
</div>
<div class="horizSep">
</div>
<div id="buttons">
</div>
<a id="btnSubmit" class="buttons">Attach</a>
}
i think you are getting Request.Files.Count equals zero is because you don't have any input type file? do you?