PDF is not rendering properly in Rotativa - javascript

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"
};
}

Related

Google Visualization API load 2 scripts on the same HTML

Hello Im trying to load 2 scripts at the same page but they seem to be overlapping eachother.In the first script im getting a table with a few columns and cells. In the 2nd one im getting just a single cell from the second sheet tab but as i said they overlap eachother and i can see only one at a time. This is my first time using google visualizations and i tried to rename the variables and names but i get the same thing.Is there a way to merge both scripts in one and have the html page load both of them without overlapping. Thank you.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
</head>
<body >
<div id="box">
<script src="js/google-sheets-html.js" type="text/javascript"></script>
<div id="table">
</div>
</div>
<div id="box2">
<script src="js/google-sheets-html2.js" type="text/javascript"></script>
<div id="table2">
</div>
</div>
</body>
</html>
First Script
google.load('visualization', '1', {
packages: ['table']
});
var visualization;
function drawVisualization() {
var query = new google.visualization.Query('https://spreadsheets.google.com/tq?key=xxx&output=html&usp=sharing');
query.setQuery('SELECT A, B, C, D, E, F, G ,H ,I ORDER BY A DESC Limit 10 label A "Date", B "Agent", C "Client", D "Country", E "Desk", F "Department", G "Method", H "Amount", I "Currency"');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('There was a problem with your query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
allowHtml: true,
legend: 'bottom'
});
}
google.setOnLoadCallback(drawVisualization);
Second Script
google.load('visualization', '1', {
packages: ['table']
});
var visualization;
function drawVisualization() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/xxx/gviz/tq?gid=xxx');
query.setQuery('SELECT A');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('There was a problem with your query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.Table(document.getElementById('table2'));
visualization.draw(data, {
allowHtml: true,
legend: 'bottom'
});
}
google.setOnLoadCallback(drawVisualization);
combine them into one script.
you only need to load google charts once,
regardless the number of tables / charts being drawn.
see following snippets...
HTML
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
</head>
<body >
<div id="box">
<div id="table">
</div>
</div>
<div id="box2">
<div id="table2">
</div>
</div>
<script src="js/google-sheets-html.js"></script>
</body>
</html>
JS
google.charts.load('current', {
packages: ['table']
}).then(function () {
var query = new google.visualization.Query('https://spreadsheets.google.com/tq?key=xxx&output=html&usp=sharing');
query.setQuery('SELECT A, B, C, D, E, F, G ,H ,I ORDER BY A DESC Limit 10 label A "Date", B "Agent", C "Client", D "Country", E "Desk", F "Department", G "Method", H "Amount", I "Currency"');
query.send(function (response) {
handleQueryResponse(response, 'table');
});
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/xxx/gviz/tq?gid=xxx');
query.setQuery('SELECT A');
query.send(function (response) {
handleQueryResponse(response, 'table2');
});
function handleQueryResponse(response, id) {
if (response.isError()) {
alert('There was a problem with your query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.Table(document.getElementById(id));
visualization.draw(data, {
allowHtml: true,
legend: 'bottom'
});
}
});

jQuery file not linked properly

Here is the HTML head:
<head>
<link type='text/css' rel='stylesheet' href='style.css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" href='script.js'></script>
</head>
Here are the contents of the jQuery file:
$(document).ready(function() {
var $block_number = prompt('How many blocks?');
function writeBoard() {
while ($.isNumeric($block_number) === false && $block_number < 150) {
$block_number = prompt('How many blocks?');
}
for (var i = 0; i < $block_number; i++) {
$('#board').prepend("<div class='block'></div>");
}
};
writeBoard();
$(".block").on("mouseover", function () {
$(this).css("background-color", "black");
});
$('#redo').on('click', function () {
$('.block').css('background-color', 'white');
$block_number = prompt('How many blocks?');
writeBoard();
});
});
It doesn't seem to be working when the page is loaded locally as it was on jsfiddle for some reason. Any thoughts?
Fiddle: http://jsfiddle.net/zfiscr/9dutj67b/
Your script tag should be as follows :
<script type="text/javascript" src="script.js"></script>
instead of
<script type="text/javascript" href="script.js"></script>
Hope that helps!!!
Script has src , CSS has href :)
<script type="text/javascript" src='script.js'></script>
is correct.
Why ? Please check Here

How to get my markers to update on a Leaflet map?

I've created a map that grabs data from a JSON-source and puts a marker for all drivers inside that JSON-data. Problem is, I want these drivers position to update all the time. To do so, I've created a function that repeats itself every 3 seconds. This will cause duplicated drivers, how to I get my markers just to update its position, not creating another one? Code below, JSON-data doesn't work for now due to CORS.
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" type=
"text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript">
</script><!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
<![endif]-->
<style type="text/css">
/*<![CDATA[*/
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
/*]]>*/
</style>
</head>
<body>
<div id="map"></div><script src="https://www.google.com/jsapi?.js" type=
"text/javascript">
</script><script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js" type=
"text/javascript">
</script><script src="leaflet-ajax.js" type="text/javascript">
</script><script type="text/javascript">
//<![CDATA[
init(); //Calls the "grab my location" function
function init() {
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13
}),
marker = L.marker(map.getCenter()).addTo(map)
.bindPopup("<center><b>Jag<\/b><\/center>").openPopup();
glcl = google.loader.ClientLocation,
onLocationfound = function (e) {
marker.setLatLng(e.latlng);
map.setView(marker.getLatLng(), map.getZoom());
};
L.tileLayer('http://{s}.tile.cloudmade.com/1fa9625d371549a298938509a2eac256/997/256/{z}/{x}/{y}.png').addTo(map);
map.on('locationfound', onLocationfound);
if (glcl) { //when google.loader.ClientLocation contains result
onLocationfound({
latlng: [glcl.latitude, glcl.longitude]
});
} else {}
map.locate();
driversRealtime();
function driversRealtime() {
setInterval(function () {
var url = "data.json";
var name;
var img;
$.getJSON(url,
function (response) {
name = response.drivers[0].name;
img = response.drivers[0].img;
for (var i = 0; i < response.drivers.length; i++) {
var driver = response.drivers[i];
var m = L.marker(new L.LatLng(driver.currentLat, driver.currentLon)).addTo(map)
.bindPopup("<center><b>" + driver.name + "<\/b><\/center>");
}
});
}, 3000); //Delay i millisekunder
}
}
// API-URL: http://blackcab.didair.se/api/drivers
//]]>
</script>
</body>
</html>

showing array values in list items - Jquery, Backbone.js

i am trying to output array values via a click using backbone view model, please advise how to output each array values on a separate line or maybe displaying each array value in a list item via jquery. Thanks :)
<!DOCTYPE html>
<head>
<meta charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
</head>
<body>
<button>click</button>
<div class="ctype"></div>
<div class="cexperience"></div>
<script type="text/javascript">
var Job1 = Backbone.Model.extend({
defaults:{
type:'permanent',
experience:['html','css','php']
}
});
var myJob1 = new Job1();
var Jobview1 = Backbone.View.extend({
el:'button',
events:{
'click':'render'
},
render: function(){
var _type = myJob1.get('type');
var _experience = myJob1.get('experience');
$('div.ctype').html(_type);
$('div.cexperience').html(_experience);
return this
}
})
$(document).ready(function(e) {
var myJobview1 = new Jobview1();
});
</script>
</body>
</html>
_.each(_experience, function (key, value) {
var tmp = $('<p />');
tmp.html(value);
$('.experience').append(tmp);
)};
this should work.
maybe you need to switch key, value to value, key.
i tend to forget the order of the parameters.

multiple scripts in javascript

i have this code for a datetime picker
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/timepicker.js"></script>
<script type="text/javascript">
$(function() {
$('#datetime').datepicker({
duration: '',
showTime: true,
constrainInput: false
});
});
</script>
i also have this code for a dialog box that shows when a field is empty.
<link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.draggable.js"></script>
<script type="text/javascript" src="ui/ui.resizable.js"></script>
<script type="text/javascript" src="ui/ui.dialog.js"></script>
<script type="text/javascript" src="external/bgiframe/jquery.bgiframe.js"></script>
<script type="text/javascript">
function haha(form) {
if(document.getElementById('in').checked || document.getElementById('off').checked) {
if(form.title.value=='' || form.nature.value=='' || form.start_date.value=='' || form.end_date.value=='' || form.hour1.value=='' || form.min1.value=='' || form.ampm1.value=='' || form.hour2.value=='' || form.min2.value=='' || form.ampm2.value=='' || form.venue.value=='' || form.rationale.value=='' || form.objectives.value=='' || form.description.value=='' || form.target.value=='' || form.monitoring.value=='') {
hello();
return false;
}
else{
return true;
}
}
else {
hello();
return false;
}
}
$(function() {
$("#dialog2").dialog({
autoOpen: false,
bgiframe: true,
modal: true,
resizable: false,
draggable: false,
height:160,
width:260,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
});
function hello() {
$("#dialog2").dialog('open');
}
function getElem(id) {
return document.all ? document.all(id) :
document.getElementById ? document.getElementById(id) :
document.layers ? document.layers[id] :
null;
}
function printToPage(id,content,classname) {
var el = getElem(id);
if (!el) return;
if (el.style) {
el.innerHTML = content;
if (classname) el.className = classname;
}
else if (el.document) {
var SPANstr = (classname) ? '<span class="' + classname + '">' : '<span>';
el.document.write('haha');
el.document.close();
}
}
</script>
the problem is i can't seem to make them work together? how can i make multiple scripts to work in a single page?
Assuming your
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
line is built specifically for the Datepicker, and doesn't already include the dialog framework in it, include it after the
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.draggable.js"></script>
<script type="text/javascript" src="ui/ui.resizable.js"></script>
<script type="text/javascript" src="ui/ui.dialog.js"></script>
<script type="text/javascript" src="external/bgiframe/jquery.bgiframe.js"></script>
lines.
Then change your
$(function() {
$("#dialog2").dialog({...});
}
method to look like this
$(function() {
$("#dialog2").dialog({...});
$('#datetime').datepicker({...});
}
Without knowing what your actual markup looks like, this should work.

Categories

Resources