rotativa pdf doesn't show last page - pdf

I am using Aspnet mvc and .NET rotativa to convert html to pdf.
I am using CustomSwitches to display paging in PDF footer as the example [here
#{ Layout = null;}
<!DOCTYPE html>
<html>
<head>
<script>
function subst() {
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) { var z = x[i].split('=', 2); vars[z[0]] = unescape(z[1]); }
var x = ['frompage', 'topage', 'page', 'webpage', 'section', 'subsection', 'subsubsection'];
for (var i in x) {
var y = document.getElementsByClassName(x[i]);
for (var j = 0; j < y.length; ++j) y[j].textContent = vars[x[i]];
}
}
</script>
</head>
<body style="border:0; margin: 0;" onload=" subst()">
<table style=" width: 100%">
<tr>
<td class="section"></td>
<td style="text-align:right">
<span class="page"></span> / <span class="topage"></span>
</td>
</tr>
</table>
</body>
</html>
but when generating the report in PDF, does not appear the page of the last page, someone has gone through it and found a solution?

I managed to solve my problem by adding the following code:
CustomSwitches = "--footer-right \"[page]/[topage]\""
Something like this for a full example:
return new ViewAsPdf("MyAction", Model) {
FileName = "somepdf.pdf",
WkhtmlPath = "~/Rotativa"
,CustomSwitches = "--footer-right \"[page]/[topage]\""
};

Related

Property of object in array is reactive when all elements are changed, but not if only some are changed

I have this selectAllToggle function, which reactively selects or deselects all elements in the array. Reactively in that when the selectButton is used, all the checkboxes in the browser show selected or deselected.
The problem arise when one or more (but not all) checkboxes were manually selected. If any checkboxes are selected, the selectButtonName changes to "Deselect All", and when pressed, I want it to deselect all.
The code I have correctly updates the array, in that it sets the 'selected' property to false for every student in the array, but the reactivity of it doesn't work - the tick boxes of the students that were selected manually, remain ticked in the browser.
selectAllToggle: function(key, row, $event) {
var setTo = false;
var newname = "Select All";
if (this.selectButtonName === "Select All") {
setTo = true;
newname = "Deselect All";
}
if (this.selectButtonName === "Deselect All") {
setTo = false;
newname = "Select All";
}
if (this.students.length > 0) {
for (var i = 0; i < this.students.length; i++) {
this.students[i]['selected'] = setTo;
}
}
this.selectButtonName = newname;
console.log(this.students); //shows the correct 'selected' state for all
},
The view looks like this (using vue-tables-2)
<v-client-table
v-if="gridReady"
v-model.sync="students"
:columns="gridcolumns"
:options="gridoptions"
ref="grid">
<input type="checkbox"
slot="selected"
slot-scope="{row, update}"
v-model="row.selected"
#change="selectStudent('select', row, $event)">
</v-client-table>
What can I do to make this function reactive?
For deselecting after one or more element selection, you may use a computed property as the snippet below for reactively perform.
new Vue({
el: '#app',
data: {
selected: [],
clientList: [1, 2, 3, 4, 5]
},
computed: {
selectAll: {
get: function() {
return this.selected.length > 0 &&
this.selected.length <= this.clientList.length
},
set: function(value) {
let list = [];
if (value) {
this.selected = this.clientList
} else {
this.selected = []
}
}
}
},
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
<div id='app'>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Client Name</th>
<th style="width: 10%"><input type="checkbox" v-model="selectAll" /></th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in clientList">
<td style="font-weight: bold;width: 75%">{{item}}
</td>
<td style="width: 25%">
<input type="checkbox" :value="item" v-model="selected" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

How to input a number on an Internet Explorer element?

I am trying to input a number on an IE element (input) from Excel VBA.
I am not a HTML developer, but there are some frame codes that might influence my problem.
This is what I have in VBA:
IE.Navigate "http://thisandthat/herewego.asp"
IE.Document.getElementsbyId("txt_cod_re_rh").Value = "aaaa"
Nothing happens.
I also tried to get the element ID or test if VBA could see it, but it looks like VBA cannot find it on the page (tried ID and class):
Set element = Document.getElementByclass("select_st")
ThisWorkbook.Sheets(1).Range("b1").Value = element
This is my HTML:
<SCRIPT LANGUAGE="VBS">
smthing
</SCRIPT>
<HTML>
<HEAD>
<link href="../css/standard.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="include/scripts.js"></script>
<script language="JavaScript">
function exibeRelatorierer(server) {
d = window.document.frmFilter;
var cod_VP = d.cbo_VP;
var cod_periodo = d.cbo_Periodoerer;
var cod_re_rh = d.txt_cod_re_rh;
if (cod_re_rh.value == '') {
cod_re_rh.value = "0";
}
if (cod_periodo.value == -1) {
alert("Select smthing.");
}else{
if (d.TC[0].checked) {
parent.frames['frmMain'].location = servidor234234 + "RPT_CPR01884_TS" + "&rc:Area=Toolbar&rc:LinkTarget=frmMain&rc:JavaScript=True&rs:ClearSession=true&rc:Parameters=false" + "&COD_VP=" + cod_VP.value + "&COD_PERIODO=" + cod_periodo.value + "&COD_RE_RH=" + cod_re_rh.value
} else {
parent.frames['frmMain'].location = servidor234234 + "RPT_CPR01884_CP" + "&rc:Area=Toolbar&rc:LinkTarget=frmMain&rc:JavaScript=True&rs:ClearSession=true&rc:Parameters=false" + "&COD_VP=" + cod_VP.value + "&COD_PERIODO=" + cod_periodo.value + "&COD_RE_RH=" + cod_re_rh.value
}
I believe this code above is messing me up trying to insert value to the txt_cod_re_rh.
I read something about a frame? Is this element on another frame? (No idea, really.)
This is the code where the input box is:
<form id="Form1" name="frmFiltro">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr class="table_bhoras1" height="50" align="center">
<td>Extração</td>
</tr>
</table>
<table id="Table3" cellSpacing="0" cellPadding="0" width="100%" border="0" class="titsemlink2">
<TR class="titsemlink2">
<td>
Inform number:
</td>
<td>
<input class="select_st" type="text" name="txt_cod_re_rh" id="txt_cod_re_rh" value="" />
</td>
</TR>
You have typos in your code. The methods .getElementsbyId or getElementByclass do not exist within the InternetExplorer document object in VBA.
You can try this via element id:
Set element = IE.Document.getElementById("txt_cod_re_rh")
element.value = "aaaa"
Or via classname:
Set element = IE.Document.getElementsByClassName("select_st")(0)
element.value = "aaaa"
Withou the full html is difficult to tell if it is inside an iframe or not.

How to add autocomplete data into invoice dynamically

I am looking for a way to add autocomplete data from my code to an "invoice" page automatically. I want the user to be able to also click to add or remove each item(quickbooks style, with multiple form fields available, and adding dynamically) and in the long run, be able to drag elements to a certain position in the invoice. All I am looking for now is this :
good : pseudocode on how to do this
best : basic working code to take off with.
This is what I have so far :
Page that calls the data :
<?php
require 'database.php';
require 'results.php';
if(!empty($_GET['wid'])) { $wid = $_GET['wid']; }
elseif(!empty($_POST['wid'])) { $wid = $_POST['wid']; }
else { $wid = null; }
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/engine.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="span10 offset1">
<div class="row">
<h3>Add Item to Workorder</h3>
</div>
<form class="form-horizontal" action="additems.php" method="post">
<?php
// Add Custom Call for values from prior page ?>
<input type="hidden" name="wid" value="<?php echo htmlentities($wid); ?>">
<?php
//not required, but for get link purposes
if(isset($_POST['search']) && $_POST['search']!=''){
$search = $_POST['search'];
} elseif (isset($_GET['search']) && $_GET['search']!=''){
$search = $_GET['search'];
} else {
$search='';
}
//
echo"
<input type='text' class='search_input' name='search' id='search' placeholder='search' value='$search' autofocus>
<div id='search_output' class='search_output'>";
?>
Page that retrieves results :
<?php
require_once"database.php";//connection to database
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
if(isset($_POST['search']) && $_POST['search']){
$search=$_POST['search'];
} elseif(isset($_GET['search']) && $_GET['search']){
$search=$_GET['search'];
}
if(isset($search)){
$search = '%' . strtr($search, ['%' => '\%', '_' => '\_']);
$search = str_replace(" ", "%", $search);
$search= "%$search%";
$sql="select * from products where `model` LIKE ? OR `category` LIKE ? OR `description` LIKE ? OR `subcategory` LIKE ? LIMIT 50;";
$statement = $pdo->prepare($sql);
$statement->execute([$search, $search, $search, $search]);
//configure for your custom data dump to autocomplete
echo "
<table class='table table-striped table-bordered' width='100%'>
<thead>
<tr>
<th>Model</th>
<th>Category</th>
<th>Description</th>
</tr>
</thead>
<tbody>
";
while($row = $statement->fetch()){
$item=$row['model'];
$title=$row['category'];
$description=$row['description'];
echo "
<tr>
<td>
<a href='?item=$item'>
$item
</td><td>
$title
</td><td>
$description
</a>
</td>
</tr>
";
}
//
}
This code contains Javascript and AJAX code which is for making dynamic search from the input and displaying the sql results in the 'search_output'.
<input type='text' class='search_input' onkeyup="performSearch(this.value);" id='search' placeholder='search' value='$search' autofocus>
<div id='search_output' class='search_output'>";
<script>
function performSearch(data) {
if (data.length > 0) {
var xmlhttp = new XMLHttpRequest() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("search_output").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "YOURPHPFILENAME.php?search=" + data, true);
xmlhttp.send();
}
}
</script>
Unfortunately for other Dynamic features you will need to learn JQUERY/AJAX and understand HTML DOM. There may be Third party API which may do this.

Get link from childNodes' innerHTML dynamically

I have page with products catalogue and need to assign link to every products using it's name (innerHTML). The page looks like:
<!DOCTYPE html>
<html>
<head>
<script>
function searchlinks() {
var catbox=document.getElementById("category-box");
var boxcont=catbox.getElementsByTagName("a");
var h3href=catbox.getElementsByTagName("h3");
var www0="../search/" + h3href[0].innerHTML + "+" + boxcont[0].innerHTML;
var www1="../search/" + h3href[0].innerHTML + "+" + boxcont[1].innerHTML;
var www2="../search/" + h3href[0].innerHTML + "+" + boxcont[2].innerHTML;
var www3="../search/" + h3href[0].innerHTML + "+" + boxcont[3].innerHTML;
boxcont[0].href=www0;
boxcont[1].href=www1;
boxcont[2].href=www2;
boxcont[3].href=www3;
}
</script>
</head>
<body onload="searchlinks()">
<div id="category-box"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent">
<h3>Clothing</h3>
Men's
Women's
Boys'
Girls'
</div></div></div>
<div id="category-box"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent">
<h3>Protective Gear</h3>
Chin Straps
Facemasks
Flak Jackets
Girdles
Hand Pads
Arm Pads
Helmets
Hip Pads
</div></div></div>
</body>
</html>
But I have faced with a lot of problems. Here are my questions:
1) How to assign links dynamically? (without using var = www0 , www1 ...)
2) Function searchlinks() affects only on the first "category-block" div. How to use this function for all such divs on the page?
Here is my jsfiddle: http://jsfiddle.net/RGe8U/1/
Here is the fixed script and html. I have given different ids for two different divs, as ids should be unique then search them individually and call addLink function for both of them.
<html>
<head>
<script>
function addLink(catbox) {
var boxcont=catbox.getElementsByTagName("a");
var h3href=catbox.getElementsByTagName("h3");
//alert(h3href[0].innerHTML);
for (var i=0; i<boxcont.length; i++) {
boxcont[i].href="../search/" + h3href[0].innerHTML + "+" + boxcont[i].innerHTML;
}
}
function searchlinks() {
addLink (document.getElementById("category-box"));
addLink (document.getElementById("category-box2"));
}
</script>
</head>
<body onload="searchlinks()">
<div id="category-box"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent">
<h3>Clothing</h3>
Men's
Women's
Boys'
Girls'
</div></div></div>
<div id="category-box2"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent">
<h3>ProtectiveGear</h3>
Chin Straps
Facemasks
Flak Jackets
Girdles
Hand Pads
Arm Pads
Helmets
Hip Pads
</div></div></div>
</body>
</html>
Edit: If you do not want to change the div ids then use this script:
<script>
function addLink(catbox) {
var boxcont=catbox.getElementsByTagName("a");
var h3href=catbox.getElementsByTagName("h3");
alert(h3href[0].innerHTML);
for (var i=0; i<boxcont.length; i++) {
boxcont[i].href="../search/" + h3href[0].innerHTML + "+" + boxcont[i].innerHTML;
}
}
function searchlinks() {
var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++) {
if (divs[i].id === "category-box")
addLink (divs[i]);
}
}
</script>

How to make an editable table using ASP.NET Web Pages?

I'm fairly new to html development and don't know how to tackle this problem. I need to create a table with some editable cells. Then I need to update a specific row in a database table based in the row edited. I've created some working solution that I'm almost sure don't use a correct approach to the problem, so I need to know how can I can I make this fine.
Note the repeated form. I would like to have only one form and one submit button to update only those edited rows.
#using Oracle.DataAccess.Client;
#using Oracle.DataAccess.Types;
#{
string some_conn = "SomeConnectionString";
OracleConnection conn = new OracleConnection(some_conn);
var comm = new OracleCommand("select * from some_table",conn);
conn.Open();
if(IsPost){
var some_id = Request.Form["some_id"];
var some_value = Request["some_value"];
var update_comm = new OracleCommand("update some_table"+
" set some_value ='"+some_value+"'" +
" where some_id ='" + some_id + "'", conn ) ;
update_comm.ExecuteNonQuery();
}
var dr = comm.ExecuteReader();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
#while(dr.Read()){
<tr>
#for(int i= 0; i < 7 ; i++){
if(i != 5){
<td> #(Convert.ToString(dr.GetValue(i)))</td>
}
}
<form method="post" action="">
<td> <input type="text" name="some_id" contenteditable="false" value="#(Convert.ToString(dr.GetValue(5)))"></td>
<td><textarea name="some_value" cols="10" rows="10">#(Convert.ToString(dr.GetValue(7)))</textarea></td>
<td> <input type="submit" value="update"></td>
</form>
</tr>
}
</table>
</body>
</html>
#{
conn.Close();
conn.Dispose();
}