Develop Reference

JavaScript not working for all HTML pages

I am working on the tablet's display of a Pepper robot; I have a functional HTML index page comprising a list of questions—each question redirects to its respective HTML when clicked on—, 2 volume buttons and 2 other buttons—one that pops up an instruction image and the other one that closes the index page and gets back to the splash screen, which when clicked upon, reveals the index page. So far everything is working. The issue is that when I click a question—I get redirected to its HTML page, but then I get stuck there, as neither the 2 volume buttons nor the 2 other buttons work;
I made sure to include the following in each HTML page:
<script type="text/javascript" src="/libs/qimessaging/2/qimessaging.js"></script>
<script type="text/javascript" src="faq.js"></script>
I also reused the same JavaScript functions that worked for the index page.
I commented out some line:
btnPrevious.addEventListener('click', goToPreviousPage);
because I noticed it prevented the splash screen from disappearing when clicked on—i.e., the visibility attribute stays on visible instead of switching to hidden thus revealing the index page, but still, the 3 remaining buttons don't work anyway.
Here is my faq.js code:
/* global QiSession */
var serviceName = 'ADFAQ';
var volumeUpEvent = serviceName + '/VolumeUp';
var volumeDownEvent = serviceName + '/VolumeDown';
var volumeData = serviceName + '/Volume';
/* Clickable buttons */
var btnReturn = document.getElementById('return');
var btnHelp = document.getElementById('call_help');
var btnPrevious = document.getElementById('previous_page');
var btnVolUp = document.getElementById('volume-up');
var btnVolDown = document.getElementById('volume-down');
/* Help image and splash screen */
var helper = document.getElementById('helper');
var img = document.getElementById('click_on_me');
var memory;
var volume;
var audioDevice;
QiSession(connected, disconnected);
function connected (s) {
console.log('QiSession connected');
var questions = document.getElementById('questions');
/* Associating buttons to their respective functions */
btnHelp.addEventListener('click', showHelper);
btnReturn.addEventListener('click', closeQuestions);
//btnPrevious.addEventListener('click', goToPreviousPage);
btnVolUp.addEventListener('click', raiseVolume);
btnVolDown.addEventListener('click', lowerVolume);
img.addEventListener('click', loadQuestions);
questions.addEventListener('click', clickOnQuestion);
s.service('ALMemory').then(function (m) {
m.subscriber(serviceName + '/DialogEnded').then(function (subscriber) {
subscriber.signal.connect(hideQuestions);
});
m.subscriber(serviceName + '/Pepper').then(function (subscriber) {
subscriber.signal.connect(displayPepperHTML)
});
m.subscriber(serviceName + '/RaiseVolume').then(function (subscriber) {
subscriber.signal.connect(raiseVolume);
});
m.subscriber(serviceName + '/LowerVolume').then(function (subscriber) {
subscriber.signal.connect(lowerVolume);
});
memory = m;
});
s.service('ALAudioDevice').then(function (a) {
a.getOutputVolume().then(assignVolume);
audioDevice = a
});
}
function disconnected () {
console.log('QiSession disconnected');
}
function assignVolume(value){
volume = value;
}
function raiseVolume (event) {
var changed = 0;
if(volume < 100) {
volume = Math.min(volume + 5, 100);
audioDevice.setOutputVolume(volume);
changed = 1;
}
memory.insertData(volumeData, volume);
memory.raiseEvent(volumeUpEvent, changed);
}
function lowerVolume (event) {
var changed = 0;
if(volume > 30) {
volume = Math.max(volume - 5, 0);
audioDevice.setOutputVolume(volume);
changed = 1;
}
memory.insertData(volumeData, volume);
memory.raiseEvent(volumeDownEvent, changed);
}
function showHelper (event) {
if (btnHelp.innerHTML === '?') {
helper.style.opacity = '1';
helper.style.zIndex = '1';
btnHelp.innerHTML = '←';
} else {
helper.style.opacity = '0';
helper.style.zIndex = '-1';
btnHelp.innerHTML = '?';
}
btnHelp.blur();
}
function loadQuestions (event) {
memory.raiseEvent(serviceName + '/LoadQuestions', 1);
img.style.visibility = 'hidden';
}
function goToPreviousPage () {
window.location.href = "index.html";
}
function displayPepperHTML() {
window.location.href = "pepper.html";
}
function closeQuestions (event) {
if(location.href != "index.html")
{window.location.href = "index.html";}
memory.raiseEvent(serviceName + '/CloseQuestions', 1);
btnReturn.blur();
}
function hideQuestions (data) {
if (data !== 0) {
img.style.visibility = 'visible';
helper.style.opacity = '0';
btnHelp.innerHTML = '?';
}
}
function clickOnQuestion (event) {
memory.raiseEvent(serviceName + '/' + event.target.id, 1);
}
Here is my non-functioning pepper.html code:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Pepper</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1280, user-scalable=no" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/faq.css" />
</head>
<body>
<header>
<h1>Bla bla bla</h1>
<span class="buttons">
<button id="previous_page" class="button-help"> ← </button>
<button id="return" class="button-return">X</button>
</span>
<div id="helper" class="pop-up">
<img src="img/interactionscreen_frf.png" alt="Bla bla bla">
</div>
</header>
<ul id="questions">
<p>
Bla bla bla
</p>
<div class="volume-part">
<div id="volume-up" class="Click-me">+</div>
<img src="img/speaker.png" alt="Bla bla bla" style="vertical-align: middle;">
<div id="volume-down" class="Click-me">-</div>
</div>
</ul>
<script type="text/javascript" src="/libs/qimessaging/2/qimessaging.js"></script>
<script type="text/javascript" src="faq.js"></script>
</body>
</html>
Thank you for your help.
I am expecting the pepper.html page to respond to both the volume and ← and X buttons, as the index.html should, since they use the exact same Javascript.

I was able to find some workaround: creating one JavaScript file for each HTML page, this is redundant and non-optimal I know, but at least it works.
This also made me realize that the commented-out line was blocking the program because the index.html page doesn't use the previous_page button, that's what led me to make a JS file for each HTML page.
If anybody has any other suggestions I am all ears.
Edit: I reduced the number of JS scripts to only 2. One for the index.html and the other for the identically-structured html pages of the other questions.

Datatable : How to jump to the first empty cell

I'm using datatable to display predictions about future events. Among my columns I have "Day" "Hour" "Prediction" "Reality".
Prediction is always filled, but reality is only filled when the event happens.
I want to jump to the page corresponding to the current time. So I used jumpToData() on the date. With that, I have quick access to the last events of the current day but I still need to turn 4 or 5 pages if it's 9AM for example.
I think the easiest way to solve the problem is to jump to the first empty cell in the "Reality" column.
Have you any elements to do that ?
Thanks in advance for any help,
Thomas

Is that what you were trying to achieve?:
//Make up random chronological data to fill DataTable
var srcData = [...Array(300)].map((value, index) => {
let obj = {};
let today = new Date()
let randomDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()-10, index);
obj.date = randomDate.toLocaleDateString();
obj.hour = index%24;
obj.prediction = Math.floor(Math.random()*1000);
obj.reality = randomDate < Date.now() ? obj.prediction+(3-Math.floor(Math.random()*6)) : '';
return obj;
});
//Define DataTables object
var dataTable = $('#forecasts').DataTable({
sDom: 'tp',
orderFixed: [[0, 'asc'],[1, 'asc']],
ordering: false,
data: srcData,
columns: [
{title: 'date', data: 'date'},
{title: 'hour', data: 'hour'},
{title: 'prediction', data: 'prediction'},
{title: 'reality', data: 'reality'},
]
});
$('#jumptoblank').on('click', () => {
//Search for empty cell
var emptyRowIndex = dataTable.rows().data().toArray().findIndex(row => row.reality == '');
//Go to the page, where necessary row is located
dataTable.page(Math.floor(emptyRowIndex/dataTable.page.info().length)).draw(false)
});
.dataTables_wrapper {width: 600px}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<button id="jumptoblank">Jump to blank reality</button>
<table id="forecasts"></table>
</body>
</html>

how to dynamically disable specific date in jquery datepicker?

I am trying to dynamically disable date (jquery datepicker) which is already in database. I have done static method in that I am able to achieve goal but not getting success in dynamic approach
<script language="javascript">
$(document).ready(function () {
var getfromdb = #Html.Raw(#ViewBag.bookdate);
var result = '\'' + getfromdb.toString().split(',').join('\',\'') + '\'';
var disableddates = [result];
var newdisableddates = ['17/10/2017','18/10/2017','19/10/2017','22/10/2017','23/10/2017','24/10/2017','25/10/2017']; // Static Approach
$("#txtFromdate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
$("#txtTodate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [disableddates.indexOf(string) == -1];
}
});
And here is my controller code:
List<string> getbookdate = new List<string>();
getbookdate = BookDate(id);
ViewBag.bookdate = JsonConvert.SerializeObject(getbookdate.ToList());
public List<string> BookDate(int? id)
{
DateTime dt = System.DateTime.Now.Date;
var getbookdate = (from x in entity.BookingMasters
join
y in entity.BookingDetails on x.BookingId equals y.BookingId
where x.ProductId == id && y.FromDate > dt && y.ToDate > dt
select new BookingModel { ProductId = x.ProductId.Value, FromDate = y.FromDate.Value, ToDate = y.ToDate.Value }).ToList();
List<string> allDates = new List<string>();
foreach (var r in getbookdate)
{
for (DateTime date = r.FromDate; date <= r.ToDate; date = date.AddDays(1))
{
allDates.Add(Convert.ToString(date.ToShortDateString()));
}
}
return allDates;
}

Disable doesn't work well with date picker. Try my plnkr.
https://embed.plnkr.co/h4RaeIKJVfj9IjyHREqZ/
It gets the datepicker on click and parses through the dates and data set given and if a match is found it removes the click event on it. and repeats on each render please see my plnkr link for html. Hope it helps
<!--Disable doesn't work well with date picker. Try this. Hope it helps-->
<!--Working example https://embed.plnkr.co/h4RaeIKJVfj9IjyHREqZ/ -->
<!--Code-->
<!--HTML PART-->
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="tether#*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link data-require="jqueryui#*" data-semver="1.12.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script data-require="jqueryui#*" data-semver="1.12.1" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
</head>
<body class="container">
<h1>Hello User</h1>
<div class="box">
<div class="box-content">
<div class="row">
<div class="col-md-4">
<label>Date:</label>
<input type="text" id="date-picker-control" />
</div>
</div>
</div>
</div>
<script>
var element = $('#date-picker-control');
element.datepicker();
element.off('click').on('click', function() {
// Setup DatePicker
console.log('Update Date Picker');
// If user changes month or year, update date picker
// based on the date list you have
$("#ui-datepicker-div")
.find("div.ui-datepicker-header")
.find('a.ui-datepicker-next, a.ui-datepicker-prev')
.on('click', function() {
element.click();
});
// Get all available dates in current displayed dates
var availableDates = $("#ui-datepicker-div")
.find("table.ui-datepicker-calendar")
.find('td[data-handler="selectDay"]');
availableDates.filter(function(i) {
var targetDateElement = $(this);
//Get date parts
var year = +targetDateElement.data("year");
var month = targetDateElement.data("month") + 1; //JS fix
var day = +targetDateElement.find('a.ui-state-default').text();
var builtDate = month + '/' + day + '/' + year;
// you can substitute your json data
var targetDates = [
"10/2/2017", "10/6/2017", "10/8/2017"
];
$.each(targetDates, function(i, targetDate) {
// If builtDate match targetdate then turn click event oFF on that date
if (targetDate == builtDate) {
targetDateElement.css({
'border': '1px solid gray',
'background': 'darkgray',
'font-weight': 'bold',
'color': 'gray'
}).off('click');
}
});
});
});
</script>
</body>
</html>

Your original idea is in the right direction, but I think there's probably something weird going on with all the string conversion. I'd just pass through dates and compare with dates rather than all the stringy stuff:
I've written this quick test...
controller:
//Replace with however you get dates
ViewBag.DatesList = new List<DateTime>()
{
new DateTime(2018, 01, 01),
new DateTime(2018, 01, 02),
new DateTime(2018, 01, 03)
};
return View();
View:
<script language="javascript">
$(document).ready(function () {
var disableddates = [];
#foreach (DateTime date in ViewBag.DatesList)
{
//note JS month is zero-based for no good reason at all...
#:disableddates.push(new Date(#date.Year, #date.Month-1, #date.Day))
}
$("#txtFromdate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
$("#txtTodate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
function DisableSpecificDates(date) {
//filter array to find any elements which have the date in.
var filtereddates = disableddates.filter(function (d) {
return d.getTime() === date.getTime();
});
//return array with TRUE as the first (only) element if there are NO
//matching dates - so a matching date in the array will tell calling
//code to disable that day.
return [filtereddates.length == 0];
}
});
</script>
This appears to work for me.

Dojo Calendar Matrix VIew

I am new in dojo and in js, my question is how can add event to dojo calendar with on clicked method and add exist events by json format to Matrix calendar.
It is part of code but it can't add event and not show Matrix Calendar
but if close this line //store: new Observable(new Memory({data: someData})),
Matrix calendar displayed.
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="claro.css">
<link rel="stylesheet" href="Calendar.css" />
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='unicorn/js/dojo/dojo.js'></script>
<script>
require(["dojo/parser", "dojo/ready", "dojox/calendar/Calendar"],
function(parser, ready, Calendar){
ready(function(){
require(["dojo/store/Observable", "dojo/store/Memory"], function(Observable, Memory){
var someData = [
{
id: 0,
summary: "Event 1",
startTime: "2015-01-01T10:00",
endTime: "2015-01-01T12:00"
}
];
calendar = new Calendar({
date: new Date(2015, 1, 1),
decodeDate: function(s){
return stamp.fromISOString(s);
},
encodeDate: function(d){
return stamp.toISOString(d);
},
store: new Observable(new Memory({data: someData})),
dateInterval: "day",
style: "position:relative;width:500px;height:500px"
}, "someId");
});
}
)}
);
</script>
</head>
<body class="claro">
<style type="text/css">
.dojoxCalendar{ font-size: 12px; font-family:Myriad,Helvetica,Tahoma,Arial,clean,sans-serif; }
</style>
<div id="someId" >
</div>
</body>
</html>
Thanks

you mean create an event like in the code example by CRTL+clic?
// Enable creation of event interactively by ctrl clicking grid.
var createItem = function(view, d, e){
var cal1 = ActiviteCB.get("checked");
var cal2 = TacheCB.get("checked");
// create item by maintaining control key
if(!e.ctrlKey || e.shiftKey || e.altKey || (!cal1 && !cal2)){
return null;
}
// create a new event
var start, end;
var colView = calendar.columnView;
var cal = calendar.dateModule;
if(view == colView){
start = calendar.floorDate(d, "minute", colView.timeSlotDuration);
end = cal.add(start, "minute", colView.timeSlotDuration);
}else{
start = calendar.floorToDay(d);
end = cal.add(start, "day", 1);
}
var item = {
unid: '',
summary: "New event " ,
startTime: start,
endTime: end,
calendar: cal1 ? "Activite": "Tache",
allDay: view.viewKind == "matrix",
idclient: '',
TypeAction:''
};
return item;
};
calendar.set("createItemFunc", createItem);
Not sure it's want your asked...

PDF is not rendering properly in Rotativa

This is my page.
#model JNCloud.Web.UI.Models.AppointmentModel
#{
Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UB-04-081A</title>
<link href="~/Content/agency_media.css" type="text/css" media="all" rel="stylesheet" />
<link href="~/Content/agency_style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="~/Scripts/Common/js/jquery.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.naviDropDown.1.0.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-mask.js"></script>
<script type="text/javascript" src="../../Scripts/telerik.all.min.js"></script>
<script type="text/javascript" src="../../Scripts/scriptbreaker-multiple-accordion-1.js"></script>
<script src="#Url.Content("~/Scripts/jquery.poshytip.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.poshytip.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.poshytip.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/calendar/fullcalendar.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/calendar/overlib.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/calendar/fullcalendar.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/calendar/overlib.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/form.section.validator.js")" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="scripts/jquery164min.js">\x3C/script>')</script>
<!--local fallback for JQuery-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="~/Scripts/Common/js/qyb8ood.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
<script>window.jQuery || document.write('<script src="scripts/jquery164min.js">\x3C/script>')</script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var arr = new Array();
$(document).ready(function () {
SelectedScheduleEvents('#Model.PrintAgencyUserID', '#Model.PrintFiltervisittypeID', '#Model.PrintPatientID', '#Model.PrinttypeSchedule', '#Model.PrintDate');
});
function SelectedScheduleEvents(agencyuserid, FiltervisittypeID, PatientID, typeSchedule, date) {
console.log('manoj');
$("#calendar").empty();
$("#LocationId").attr('data-val-number', 'Patient Name does not Exists');
var cdate = date.replace('-', ' ');
var d = new Date(cdate);
var m;
var y;
if (isNaN(d.valueOf())) {
d = new Date();
m = d.getMonth();
y = d.getFullYear();
}
else {
m = d.getMonth();
y = d.getFullYear();
}
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
year: y,
month: m,
agenda: 'h:mm{ - h:mm}',
editable: false,
disableResizing: true,
selectable: true,
selectHelper: true,
select: function (start, end, allDay, Id) {
var Selectedtdate = start;
//alert('start'+start);
var todate = new Date();
//alert('todate'+todate.getMonth()+3);
//if (Selectedtdate > todate && Selectedtdate.getDate() != todate.getDate()) {
//if (Selectedtdate > todate.getMonth()+3 ) {
// alert('Please select less than 90 days later from todate.');
// return;
//}
AddEvent(start);
calendar.fullCalendar('unselect');
},
events: { url: '#Url.Action("SelectedScheduleEvents", "Schedule")' + '?AgencyUsersID=' + agencyuserid + '&FiltervisittypeID=' + 0 + '&PatientID=' + PatientID + '&typeSchedule=' + typeSchedule },
eventClick: function (calEvent, jsEvent, view) {
var eventTime = $.fullCalendar.formatDate(calEvent.start, "h:sstt");
var Id = calEvent.id;
var apptype = calEvent.appointmenttype;
var clinicianId = calEvent.clinicianId;
var startdate = calEvent.start;
var enddate = calEvent.end;
var comment = calEvent.comment;
var meetduration = calEvent.duration;
var backcolor = calEvent.backgroundColor;
var patientIds = calEvent.patientIds;
var locationid = calEvent.locationId;
var lname = calEvent.locationName;
var visittypeid = calEvent.VisitTypeID;
EditEvent(Id, calEvent.title, patientIds, clinicianId, startdate, enddate, eventTime, meetduration, comment, backcolor, apptype, locationid, lname, visittypeid);
},
eventMouseout: function (calEvent, domEvent) {
if (!$("#events-layer").hasClass('mouse_in')) {
$("#events-layer").remove();
}
}
});
$("#divLoading").hide();
$("#hdnCurrentDate").val(0);
}
</script>
</head>
<body style="padding: 0; font-family: Arial, Helvetica, sans-serif;">
<div style="display: none">#Html.TextBoxFor(x => x.SelectedPID)</div>
<div class="widget first">
<div>
<div id="calendar" style="width: 100%;">
</div>
</div>
</div>
#* End Confirm Assessment form *#
</body>
</html>
And in controller when I use this
return View(objappointmentmodel);
then it's look like this
And when in controller I use this
return new ViewAsPdf("PrintCalendar", objappointmentmodel)
{
PageSize = Rotativa.Options.Size.A4,
PageOrientation = Orientation.Portrait,
PageMargins = { Left = 0, Right = 0 }
};
then it's look like this. This isn't loading properly.
What should I do?
I have researched also about this. But I can't find a proper solution.
Please suggest me.

i got similiar problem-
the rotativa didnt manage to handle the font-family.
when i use ARIAL the PDF looks good.
try also to change path to js and css file to a full path.
good luck

I've been using Rototiva recently to make customer print outs on the fly and I've ran into issues regarding relative paths as opposed to fully qualified paths. My strategy was to create a partial view and view model for the parts of my page that required jquery and images (rendered using the #Html.Action() helper) and then make the pdf with two different action results in my controller:
public ActionResult CustPrintOut() {
// doing stuff
return View("CustPrintOut"); // return a view that renders your partials
}
public ActionResult printout() {
return new ActionAsPdf("CustPrintOut") {
FileName = "printout.pdf"
};
}