Is there a way in EvoHtmlToPdf to display the section/subsection of a page in the header/footer (i.e. the text of the "current" h1/h2 tag)?
With wkhtmltopdf and other tools, it is possible to replace special tags via JavaScript and the HTML header template (as described here for example Dynamic section name in wicked_pdf header).
Unfortunately, such a solution does not seem to work with EvoHtmlToPdf.
Here's the HTML code of my header template:
<html id="headerFooterHtml">
<head>
<script>
function substHeaderFooter(){
var vars={};
var searchString = document.location.search;
var debugMessage = document.getElementById("showJavaScriptWasExecuted");
if (debugMessage)
debugMessage.textContent = "Search string: ["+ searchString + "]";
var search_list = searchString.substring(1).split('&');
for(var i in search_list){
var content=search_list[i].split('=',2);
vars[content[0]] = decodeQueryParam(content[1]);
}
var tags=['section','subsection'];
for(var i in tags){
var name = tags[i],
classElements = document.getElementsByClassName(name);
for(var j=0; j<classElements.length; ++j){
classElements[j].textContent = vars[name];
}
}
}
</script>
</head>
<body id="headerFooterBody" onload="substHeaderFooter()">
<div id="showJavaScriptWasExecuted"></div>
<div id="sections">{section} / {subsection}</div>
</body>
Resulting header in PDF
I already added the EvoHtmlToPdf PrepareRenderPdfPageDelegate event handler to my code (if that's the way I have to go) but I don't know how to access the section of the current page there...
Thanks in advance for your help!
Can someone help me with ajax pagination please, i'm on it 2 days already and can't figure it out. I have Load More style pagination, this is the code, preety classic(down below).
Everything works as planing except when the placeholder reaches page 10. Then, hell break loose and nothing is loading anymore. The button still works untill maxpages is reached and so the button gets removed, but nothing happens with more than 10 placeholders. The website i'm currently using this scriptand the place you can test yourself is this: http://filmhdonline.com/category/toate-filmele/
I would appreciate someone having an ideea what i'm talking about. Thanks in advance.
jQuery(document).ready(function() {
// The number of the next page to load (/page/x/).
var pageNum = parseInt(pbd_alp.startPage);
// The maximum number of pages the current query can return.
var max = parseInt(pbd_alp.maxPages);
// The link of the next page of posts.
var nextLink = pbd_alp.nextLink; pageNum++;
//Load more videos translation
var more = pbd_alp.more;
//Loading videos translation
var loading = pbd_alp.loading;
/**
* Replace the traditional navigation with our own,
* but only if there is at least one page of new posts to load.
*/
if(pageNum <= max) {
// Remove the traditional navigation.
jQuery('.pagination').remove();
// Insert the "More Posts" link.
if( jQuery('#content').find('ul.listing-videos').length == 1 ){
jQuery('#content ul.listing-videos').append('<li class="more-posts pbd-alp-placeholder-' + pageNum + '"></li>');
jQuery('#content').append('<p id="pbd-alp-load-posts" class="pagination">' + more + '</p>');
}
}
/**
* Load new posts when the link is clicked.
*/
jQuery('#pbd-alp-load-posts a').click(function() {
// Are there more posts to load?
if(pageNum <= max) {
// Show that we're working.
jQuery(this).text(loading);
jQuery('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' #content ul.listing-videos li',
function() {
//jQuery('.pbd-alp-placeholder-'+ pageNum).children('li').unwrap();
console.log(pageNum);
jQuery(this).children().hide();
$newContent = jQuery(this).children().unwrap();
$newContent.fadeIn('fast');
// Update page number and nextLink.
pageNum++;
nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);
**// Add a new placeholder, for when user clicks again.
jQuery('#content ul.listing-videos').append('<li class="more-posts pbd-alp-placeholder-'+ pageNum +'"></li>');**
// Update the button message.
if(pageNum <= max) {
jQuery('#pbd-alp-load-posts a').text('Vezi mai multe');
} else {
jQuery('#pbd-alp-load-posts a').remove();
}
}
);
} else {
jQuery('#pbd-alp-load-posts a').append('.');
}
return false;
});
});
For ajax pagination in wordpress, You can use the plugin like https://wordpress.org/plugins/wp-pagenavi/.
OR
<div id="content">
<?php
$new_query = new WP_Query();
$new_query->query('post_type=post&showposts=1'.'&paged='.$paged);
?>
<?php while ($new_query->have_posts()) : $new_query->the_post(); ?>
<?php the_title(); ?>
<?php endwhile; ?>
<div id="pagination">
<?php next_posts_link('« Older Entries', $new_query->max_num_pages) ?>
<?php previous_posts_link('Newer Entries »') ?>
</div>
</div><!-- #content -->
<script>
jQuery(function($) {
$('#content').on('click', '#pagination a', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('#content').fadeOut(500, function(){
$(this).load(link + ' #content', function() {
$(this).fadeIn(500);
});
});
});
});
</script>
I Have the same problem.
If it still happening, replace:
nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);
to
nextLink = nextLink.replace(/\/page\/[0-9]*/, '/page/'+ pageNum);
Problem in wrong regex [0-9]? match only single number from 1 to 9. From 10 it takes only 1. Instead [0-9]* match from 0 to infinity. So, it breaks after 9 (form 0 to 9), because next 10 and it's take fore use only 1.
I am trying to set up a Kendo MVC Grid using client templates for a set of columns.
I have this and it is working:
columns.Bound(m => m.FC_Sun).ClientTemplate("# if(FC_Sun != Base_Sun) {#" + "<span style='color:red;'>#:FC_Sun # </span>" + "# } else {#" + "#: FC_Sun #" + "# } #");
However I would like to move this to a client template instead as I need to add quite a few more items to the column and an inline template just seems a little 'clunky'.
The question is, how can I do this with a single client template. I have an existing one which works for a particular column (the same one as above).
<script id="columnTemplate" type="text/kendo-tmpl">
#if(FC_Sun != Base_Sun){#
<span style='color:orange'>#:FC_Sun #</span>
#}else{#
<span>#: FC_Sun #</span>
#}#
</script>
As you can see this is very much tied to one column, doing it this way I would need to create 7 templates, one for each day of the week, which just seems overkill.
So is there a way to pass extra parameters to the template which tell it which values to use in the if statement..?
As it turns out there is a way to pass parameters to the template, in the grid:
"#=customColumnTemplate($.extend({}, data, { field: 'FC_Sun' }))#"
And the template:
<script id="columnTemplate" type="text/kendo-tmpl">
<p>#= data[field] #</p>
</script>
<script>
var customColumnTemplate = kendo.template($('#columnTemplate').html());
</script>
The way I actually did it in the end though was to skip the external template and use a function directly:
"#=customColumnTemplate(data, 'FC_Sun', 'Base_Sun')#"
.
function customColumnTemplate(data, field, baseField) {
var fc = data[field];
var fcBase = data[baseField];
if (fc != fcBase) {
return "<span style='color:red;'/>" + fc + "</span>";
}
return fc;
}
There isn't a way to pass parameters directly to a Kendo template, unfortunately. However, you could try using a switch statement in your template, and add an enumeration (or whatever would work) to your model for the switch key:
<script id="columnTemplate" type="text/kendo-tmpl">
# switch (DayofWeek) {
case "Sunday": #
<span style='color:orange;'>#:FC_Sun #</span>
# break; #
# case "Monday": #
<span style='color:red;'>#:FC_Mon #</span>
# break; #
...
# } #
</script>
This should allow you to "pass parameters" via the model, and control the appearance of the template per model instance.
Hope this helps.
I am trying to refresh some elements on my page every so often. I know theres a million topics on here about that and I have tried to get mine working, but here is what I need to refresh..
This is the code that gets generated when the page loads:
<div id="galleria">
<?php
$a = array();
$dir = '../public/wp-content/uploads/2012/01';
if ($handle = opendir($dir)) {
while (false !== ($file = readdir($handle))) {
if (preg_match("/\.png$/", $file)) $a[] = $file;
elseif (preg_match("/\.jpg$/", $file)) $a[] = $file;
elseif (preg_match("/\.jpeg$/", $file)) $a[] = $file;
}
closedir($handle);
}
$totalImgs = count($a);
$imgUsed = array();
for ($j = 0; $j < 100; $j++)
{
do
{
$randIndex = mt_rand(0, $totalImgs);
}
while ($imgUsed[$randIndex] === TRUE);
$imgUsed[$randIndex] = TRUE;
echo "<img src='" . $dir . '/' . $a[$randIndex] . "' />";
}
?>
</div>
I would like to automatically refresh this every 10 seconds but not reload the page. I have read up on ajax and it seems this is possible but I cannot seem to get it to work.
All this is doing is showing the galleria div, and loading the 100 images inside the div. Then the galleria script takes over and displays it nicely. Will AJAX work better or JQuery?
Thank you for your help!
"Will AJAX work better or jQuery?" -- AJAX is a technique, jQuery is a library. As it turns out, jQuery has an excellent API for AJAX.
Let's call this bit of PHP "galleria.php". On original page load, it is inserted into the parent PHP page using good ol' <?php include('galleria.php')?>. Now the end user is seeing the full initialized page.
To update it, you have a number of AJAX options available, but the easiest is to include jQuery on your page and then you can use .load() in a script:
var updateGallery = setInterval(function() {
$('#someDiv').load('galleria.php');
}, 10000);
There's room for tweaking... maybe galleria.php doesn't include the <div id="galleria">, which is set on the page. In which case you would load right into #galleria instead of #someDiv and save yourself an unnecessary container. Maybe you cache the $('#someDiv') object by declaring it in a different scope so that it can be re-used. But this is the general gist.
Use setInterval function with ajax call.
http://jquery-howto.blogspot.com/2009/04/ajax-update-content-every-x-seconds.html
As I wrote here you can fill a div with a jQuery ajax call.
<html>
<head>
<script type="text/javascript">
function refresh_gallery(){
$.ajax({
type: "POST",
url: "generate_gallery.php", // your PHP generating ONLY the inner DIV code
data: "showimages=100",
success: function(html){
$("#output").html(html);
}
});
}
$(function() {
refresh_gallery(); //first initialize
setTimeout(refresh_gallery(),10000); // refresh every 10 secs
});
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
I am using jqgrid 4 and i have got a lot of help from stackoverflow and especially Oleg.
The problem is that when i open my edit form for the first time the comboboxes do not show the selected values.
And this happen only in the first open of the edit form.
After the first time the comboboxes are set to the right value in the edit form.
I have used things from this page : jqgrid incorrect select drop down option values in edit box but problem still exists.
I changed all things Oleg proposed.
The first problem that i mentioned still exists. Moreover the datepicker in the first field of the form does not appear until i press in a another field first.
My update code is
the html is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<title>Grid</title>
<?php
session_start();
include("showprogram.php");
?>
<link rel="stylesheet" type="text/css" media="screen" href="src/css/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="src/css/ui.jqgrid.css" />
<script type='text/JavaScript' src='Scripts/calendar.js'></script>
<!-- <script type='Text/JavaScript' src='scw.js'></script> -->
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<style type="text/css">
#list1 {
font-size : 12px
}
body {z-index: 1000}
</style>
<script type='text/JavaScript'>
function showprogram () {
document.all.Calculation.style.visibility = "visible";
try {
ShowSchedule('#list1', '#pager1');
} catch (e) {
alert("An exception occurred while fetching the schedule. Error name: " + e.name + ". Error message: " + e.message);
}
}
</script>
</head>
<body>
<div id="grid" style="display:inline;">
<table id="list1" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager1" class="scroll" style="text-align:center;"></div>
</div>
</body>
and dataform is:
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1;
// connect to the database
include ('../library/opendb.php');
$result = mysql_query("SELECT COUNT(*) AS count FROM customers ");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
$SQL = "SELECT ID as id,Day AS Day, CustomerName AS name
FROM customers";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") )
{
header("Content-type: application/xhtml+xml;charset=utf-8");
}
else
{
header("Content-type: text/xml;charset=utf-8");
}
$et = ">";
echo "<?xml version='1.0' encoding='utf-8'?$et\n";
echo "<rows>";
echo "<page>".$page."</page>";
echo "<total>" . $total_pages . "</total>";
echo "<records>".$count."</records>"; // be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
echo "<row id='". $row[id]."'>";
echo "<cell>". $row[id]."</cell>";
echo "<cell>". $row[Day]."</cell>";
echo "<cell>". iconv("ISO-8859-7", "UTF-8", $row[name])."</cell>";
echo "<cell> Is this a button?<input type='button' value='E' onload=\"alert('ok');\"/> </cell>";
echo "</row>";
}
echo "</rows>";
include ('../library/closedb.php');
and the add.php is
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
$oper = $_POST['oper'];
if(!$sidx) $sidx =1;
$Day = $_POST['Day'];
$name = $_POST['name'];
include ('../library/opendb.php');
//Set at the right position
$name=$name+1;
if($oper == 'add')
{
$sql="INSERT INTO Customers (
Day,
CustomerName VALUES (
'".$Day."',
'".$name."')";
echo $sql;
$result = mysql_query($sql) or die (_ERROR26.":".mysql_error());
include ('../library/closedb.php');
}
elseif($oper == 'del')
{
$id = $_POST['id'];
$id=mysql_real_escape_string($id);
$sql="DELETE FROM customers
WHERE ID=
'".$id."'";
echo $sql;
$result = mysql_query($sql) or die (_ERROR26.":".mysql_error());
include ('../library/closedb.php');
}
elseif($oper == 'edit')
{
$id = $_POST['id'];
$id=mysql_real_escape_string($id);
$sql="UPDATE customers SET
Day = '".$Hmera."',
CustomerName = '".$name."'
WHERE ID = '".$id."'";
echo $sql;
$result = mysql_query($sql) or die (_ERROR26.":".mysql_error());
include ('../library/closedb.php');
}
and showprogram.php:
function getDatacustomer()
{
include ('../library/opendb.php');
$SQL = "SELECT CustomerName FROM customers ORDER BY CustomerID ;";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
$count = mysql_num_rows($result);
include ('../library/closedb.php');
$value="";
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
if ($i!=($count-1)){
$value=$value.''.$i.':'. $row[CustomerName].';';}
else
{$value=$value.''.$i.':'. $row[CustomerName].'';}
$i=$i+1;
}
$value='value:"'.$value.'"';
return $value;
}
?>
<script type='text/JavaScript'>
function ShowSchedule(list, pager) {
jQuery().ready(function (){
jQuery(list).jqGrid({
url:Url,
datatype: "xml",
height: "auto",
colNames:['id','Day','name'],
colModel:[
{name:'id',index:'id', width:40, align:'right', editable:false, editoptions:{readonly:true,size:10}},
{name:'Day',index:'Day', width:70, align:'right', editable:true, sorttype: 'date', editrules:{date:true},
editoptions:{dataInit:function(elem){setTimeout(function()
{$(elem).datepicker({dateFormat:"yy-mm-dd"});},100);}}},
{name:'name',index:'name', width:120, align:'right', editable:true, edittype:'select',editoptions:{<?php echo getDatacustomer() ?>}},
],
rowNum:30,
rowList:[10,20,30],
pager: pager,
sortname: 'Day',
viewrecords: true,
sortorder: "asc",
loadonce: true,
shrink: true,
//toppager: true, for toppage pager
editurl:'add.php',
caption:"Grid",
forceFit : true
});
jQuery(list).jqGrid('navGrid',pager,{edit:true,add:true,del:true,search:false,view:true, reload:true},
{width:600,height:"auto",
reloadAfterSubmit:true,
closeAfterEdit: true,
recreateForm: true,
onClose: function() {jQuery(list).jqGrid('setGridParam',{datatype:'xml', url:Url}).trigger('reloadGrid');},
beforeShowForm: function(form) {
var dlgDiv = $("#editmod" + jQuery(list)[0].id);
var parentDiv = dlgDiv.parent(); // div#gbox_list
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = "260 px";
dlgDiv[0].style.left = "600 px";
}
},
{width:600,height:"auto",reloadAfterSubmit:true,closeAfterAdd: true,recreateForm: true, onClose: function() {
jQuery(list).jqGrid('setGridParam',{datatype:'xml', url:Url}).trigger('reloadGrid');},beforeShowForm: function(form) {
var dlgDiv = $("#editmod" + jQuery(list)[0].id);
var parentDiv = dlgDiv.parent(); // div#gbox_list
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = "260 px";
dlgDiv[0].style.left = "600 px";
}
},
{width:600,height:"auto",reloadAfterSubmit:true,recreateForm: true},
{height:280,reloadAfterSubmit:true},
{width:650,height:"auto",reloadAfterSubmit:true,recreateForm: true, beforeShowForm: function(form) {
var dlgDiv = $("#viewmod" + jQuery(list)[0].id);
var parentDiv = dlgDiv.parent(); // div#gbox_list
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = "100 px";
dlgDiv[0].style.left = "600 px";
}},
{});
jQuery(list).jqGrid('setGridParam',{datatype:'xml', url:Url}).trigger('reloadGrid');
});
}
The table i want in the grid from the database is like:
id Day CustomerName
1 2011-09-09 John
Please help!
Your code have too many errors. I recommend you to compare your code with the code from My First Grid part of jqGrid documentation. I point only on some from there because the list of all errors will be too long:
You have to include <!DOCUMENT ...> line as the first line of your HTML file which generate your PHP file. The simplest form has HTML5: <!DOCUMENT html>. Currently you use quirks mode which is not supported by jQuery UI and jqGrid. Moreover you include currently showprogram.php event before <html>.
You include some JavaScript or CSS files many times in different versions (minimized and not minimized), full code and a part of the same code and so on. If you include for example jquery-ui-1.8.1.custom.css you don't need include ui.datepicker.css. If you include ui.jqgrid.css you don't need include jqModal.css. Including both jquery.js and jquery-1.3.2.min.js is the next error. Including ui.datepicker.js, jquery-ui-1.8.1.custom.min.js and jquery.ui.datetimepicker.min.js instead of just one jquery-ui-1.8.1.custom.min.js is the next error. If you includes jquery.jqGrid.min.js it would be wrong to include non-minimized parts of the same code grid.common.js, ... jqDnR.js. I can continue...
You should call the methods like jQuery(list).setGridParam and so on only inside of jQuery(document).ready(function () {...}); (the usage of old styled jQuery().ready(function (){...}); or out of the block is wrong).
Setting jqGrid parameter and calling jQuery(list).trigger("reloadGrid") before the grid will be created (before jQuery(list).jqGrid({...});) is wrong.
The code jQuery(list).jqGrid({...}); create the grid. It create many internal structures and create many HTML elements of the grid like title, column headers, pager and so on. The grid should be created only once. If you want to reload the data in the grid you should use jQuery(list).trigger('reloadGrid'). In your current code, for example in the onClose event handler you just call ShowSchedule which will try to create the grid one more time, which is wrong.
So you should examine your fill code and redesign how you divide the code in ports. I can repeat
that the above list of errors is not full. You have to examine your code vary careful and rewrite many its parts.
UPDATED: You modified code are still a mix from PHP code and JavaScript code. I don't use PHP myself, but I suppose that your problem with selection of the items in the comboboxes exist only because of the mix.
The only syntax error in your code is the usage of trailing commas at the end of colModel definition (,] is illegal). If I just use your code with some simple XML input and some simple result of <?php echo getDatacustomer() ?> (I use value:'John:John;Bob:Bob') the code works see the demo.
More better would be to make clear separation of JavaScript code from the PHP code. I would recommend you to use dataUrl property of editoptions. In the case the corresponding part of PHP code should generate
<select><option value='John'>John</option><option value='Bob'>Bob</option></select>
instead of value:"John:John;Bob:Bob".
UPDATED 2: The option
ajaxEditOptions: {cache: false}
should solve your problem if I understand your current problem correctly.