This is probably a performance issue, but I'm wondering how I'd go about proving that.
I set up an Image Resizer website and it works fine if I'm clicking on links to images, but if I use the following code to display a bunch of pictures on a website, the images do not show.
I'm wondering if it's because ImageResizer is being called so many times so quickly (only 15x) and it's getting tripped up somehow. I know enough to implement this and be dangerous, but not enough to understand what the hangup is here. It's possible that Dynamics CRM 2013 (what this code is being run as part of) has some code timeout or something that just skips showing the images if they take too long to load... not sure on that end.
Any and all help would be appreciated! Thanks everyone!
<html>
<head>
<title>Image View</title>
<script language="javascript" type="text/javascript">
function getImages() {
var unitSerial = window.parent.Xrm.Page.getAttribute("new_serial").getValue();
var guid = window.parent.Xrm.Page.data.entity.getId();
guid = guid.substring(1, guid.length-1);
var imageHTML = "<table><tr>";
for (var i=1; i<16; i++) {
imageURL = "http://website/Images/" + guid + "-" + unitSerial + "-" + i + ".png";
imageHTML = imageHTML + "<td><a href='"+imageURL+"' target=_blank><img height=95px border=0px width=130px source='"+imageURL+"?maxwidth=130&maxheight=95' /><br /><center>Pic " + i +"</center></a></td>";
}
imageHTML = imageHTML + "</tr></table>";
document.getElementById("images").innerHTML = imageHTML;
}
</script>
</head>
<body>
<div id="images"></div><script language="javascript" type="text/javascript">getImages();</script>
</body></html>
I just noticed the attribute I have written is "source" in the img tag but it needs to be "src". Whaaaaat a dummy. changed that and it works, of course.
Related
I'm trying to read data from the datastore of my Google App Engine Application, populate the google charts Datatable with it then visualize the whole thing into a graph using the source code from the google charts example which uses Javascript code embedded on the web page.
My issue is with fetching the data. I thought of two ways of doing this: either run the query directly inside the javascript code or run the query from the python code , send the results of that query as a template value to the html code, filter it to get the values I'm interested in and somehow passing the whole thing to the javascript code then diplay the data (looks more complicated). I've tried the first option but it doesn't seem to work. Since i wasn't sure what the URL of my datastore was, I though it was the same as the server which uses it so I passed the URL of my appengine application as a parameter to the query function. I tried to run an SQL query on this but I got an error.
Below are the corresponding JS code (alone) and the whole HTML code
function drawVisualization() {
var query = new google.visualization.Query('http://davidfirstapp.appspot.com');
query.setQuery('SELECT ac_current1, ac_voltage1 ORDER BY ac_current1 LIMIT 10');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.LineChart(document.getElementById('visualization'));
visualization.draw(data, {legend: 'bottom'});
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['linechart']});
</script>
<script type="text/javascript">
var visualization;
function drawVisualization() {
var query = new google.visualization.Query('http://davidfirstapp.appspot.com');
query.setQuery('SELECT ac_current1, ac_voltage1 ORDER BY ac_current1 LIMIT 10');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.LineChart(document.getElementById('visualization'));
visualization.draw(data, {legend: 'bottom'});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>
You cant query your own webpage and somehow expect it to connect to the datastore. Your webpage contains your own html output that you defined. Read more about appengine / web applications and how the datastore works.
You need to do the datastore query from the frontend, not the browsers js. Build a table and pass it to the browser where it builds the datatable and chart.
I'm having problem setting marker position and map center, with "Invalid value for property " error or "invalid value for property " error such as:
Error: Invalid value for property : (13.7323691218542,
100.64347976627096) Source File:
http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/5/main.js Line: 26
This is based on tests on Firefox and Chrome
My top HTML contains:
Javascript function "move_it()"
An iframe (id: "mapIframe") sourced by a cgi (nwfMap.cgi)
And the "mapIframe" iframe cgi contains:
A var mapNwf for a map
A var markerMe for a marker
An iframe (id: "myInfoIframe") sourced by a cgi (nwfSetInfo.cgi)
And the "myInfoIframe" iframe cgi contains:
A call to the function "move_it()" defined in top HTML
This call is intended to move the marker (markerMe) to a specific location
and also to set the map (mapNwf) center to the same specific location
The invocation of the "move_it" was executed OK until when it tried to do:
mrk.setPosition(pos); or
mp.setCenter(pos);
It's here I've encountered the "Invalid value for property ..." errors.
The immediately preceding execution were of:
alert('mp = [' + mp.getCenter() + ']'); and
alert('mrk = [' + mrk.getPosition() + ']');
were OK with correct location (lat/lng) value displayed (map center and marker position)
So the question is, how come getCenter and getPosition worked for same map and marker variables, but the setCenter and setPosition had failed?
If getCenter and getPosition came back with correct data, it indicates that there's no variable context issues, right?
But then how come I can only "read" but not "set" the values via these variables?
Would it be related to the appearance of the google line:
in the top HTML, and in its iframe, and in the iframe's iframe?
Repetition and the nested level causing some google map context issue leading to my problem?
Much thanks in advance for any advice! Followings are relevant code portions for your examination and investigation:
Relevant portions of the top HTML
<html>
........
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script language="JavaScript">
function move_it(slat, slng) {
var ifrm = document.getElementById('mapIframe');
var mp = ifrm.contentWindow.mapNwf;
var mrk = ifrm.contentWindow.markerMe;
var pos = new google.maps.LatLng(slat,slng);
alert('mp = [' + mp.getCenter() + ']');
alert('mrk = [' + mrk.getPosition() + ']');
alert('pos = [' + pos + ']');
mrk.setPosition(pos);
mp.setCenter(pos);
}
</script>
.........
<div id="nwfMap">
<iframe width=100% height=520 frameBorder=0 src="nwfMap.cgi" name="mapIframe" id="mapIframe" scrolling=no></iframe>
</div>
........
</html>
Relevant portions of the "mapIframe" iframe (produced by nwfMap.cgi)
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var mapNwf = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var latLngPre = new google.maps.LatLng(0.0, 0.0);
var markerMe = new google.maps.Marker({
position: latLngPre,
title: 'Me Here',
map: mapNwf,
draggable: true,
animation: google.maps.Animation.DROP
});
.........
</script>
.........
<div id="myInfoForm" style="display: none;">
<iframe border=1 width=100% height=200 align=center marginwidth=0 marginheight=0 seamless=seamless frameBorder=0 src="nwfSetInfo.cgi" name="myInfoIframe" id="myInfoIframe" scrolling=no></iframe>
</div>
.........
Relevant portions of the "myInfoIframe" iframe (produced by nwfSetInfo.cgi)
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
parent.parent.move_it(13.7323691218542, 100.643479766271);
</script>
The problem is fixed now, by moving the "move_it()" function definition down from the top level HTML to the mid-level iframe "mapIframe" and by changing the "move_it()" invocation in the "myInfoIframe" iframe from
parent.parent.move_it(13.7323691218542, 100.643479766271);
to
parent.move_it(13.7323691218542, 100.643479766271);
Don't know why, but obviously by the reducing of invocation context level something got corrected on the original "can read but not write on map variable" problem. If any one has a good explanation, would like to hear about it. Thanks.
In essence I have the same problem as described in this question, but the accepted answer there is not fully working for me.
I want to have the id of the record I'm processing in an HTML5 compliant data-myid attribute, then when the text in the text area is changed, I want call a function that will send an ajax request containing the new value and data-myid to the server. This is important because there can be multiple inlineEditBoxesi a single page. The ajax request part I'm fine with, is getting the proper values to send where I'm stuck.
So far, I know the end result of the HTML declaration will look something like this:
<span data-dojo-type="dijit.InlineEditBox" data-dojo-props="editor:'dijit.form.Textarea'" data-myid="123" title="some title" id="test" >
<script type="dojo/connect" event="onChange" data-dojo-args="myid,value">
console.log(myid + " changed to value " + value);
</script>1339598</span>
But I have not been able to get this to work.
You can get the myId value through
this.domNode.dataset.myid;
... in your onChange event.
Example here : http://jsfiddle.net/psoares/ycEN7/
A more portable solution is to use dojo/dom-attr instead though, like this :
*HTML
<div id="editBox" data-dojo-type="dijit/InlineEditBox"
data-dojo-props="editor:'dijit/form/Textarea'"
data-myid="123"
title="some title">1339598</div>
<div id="output"><div>`
*Javascript :
require(["dojo/dom",
"dojo/dom-attr",
"dojo/parser",
"dojo/html",
"dijit/registry",
"dijit/InlineEditBox",
"dijit/form/Textarea",
"dojo/domReady!"],
function(dom, domAttr, parser, html, registry){
var editBox;
parser.parse().then(function(instances){
editBox = registry.byId("editBox");
editBox.on("change", function(value){
var myId = domAttr.get(this.domNode, "data-myid");
html.set(dom.byId("output"), "Editor " + myId + "'s value changed to " + value);
});
});
});
wkhtml doesn´t repeat table elements "th" on every page like it should. So I thought it could be possible to simply use the --header-html option and add the table headers manually this way. But I don´t want them on the first page, since there are table headers already, plus some other first page stuff... I found some JS solution, but its too much complicated for me, since I know just the very basics of JS... Any ideas?
Did you try the JS solution? It's actually not that complicated. I just did a test with a long html file that contained a table that is split into many different pages and I managed to remove the headers from page 1 and 3 using this header file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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]];
if(vars['page'] == 1){ // If page is 1, set FakeHeaders display to none
document.getElementById("FakeHeaders").style.display = 'none';
}
if(vars['page'] == 3) { // If page is 3, set FakeHeaders display to none
document.getElementById("FakeHeaders").style.display = 'none';
}
}
}
</script>
</head>
<body style="border:0;margin:0;" onload="subst()">
<table style="border-bottom: 1px solid pink; width: 100%; margin-bottom:5px;" id="FakeHeaders">
<tr>
<th>Your awesome table column header 1</th>
<th>Column 2</th>
<th style="text-align:right">
Page <span class="page"></span>/<span class="topage"></span>
</th>
</tr>
</table>
</body>
</html>
They key points to not there is that the table "headers" are contained in a table that has the ID "FakeHeaders". The javascript function subst() is run when the body is loaded and during the function it checks if the current page is 1 or if the current page is 3 and if it is, the FakeHeaders is set invisible. You will need to play with the margins and CSS to get it to look like you want but this Should work.
This is a known problem with wkhtmltopdf and most likely it won't be fixed any time soon, see issue 566 in the issue tracker. I see the JavaScript option as the only usable workaround, but you can try playing around with divs or manually splitting the tables if your input html, style and page sizes/margins are very predictable - but be warned, it will be really annoying.
If you can split the first page alone as a separate html, you can do this by using 'cover' in WKHTMLTOPDF.
PDFKit.new(url, :header_html => header_url, :cover => cover_url).
I faced similar problem in which I had used WKHTMLTOPDF header/footer and I wanted to remove them from the cover page. The issue was that the maximum height of header/footer was still appearing on all pages including the cover page.
The solution that clicked my mind and saved the day was that I generated two WKHTMLTOPDF files, one with header/footer on all pages and the other one without any header/footer. I then picked cover page from WKHTMLTOPDF generated file without header/footer and rest of the pages from the other WKHTMLTOPDF generated file with header/footer on all pages. I used PDF Merger library in PHP to merge selected pages of two WKHTMLTOPDF generated 'PDF' files to generate single PDF file with cover page and header/footer on rest of the pages.
<script type="text/javascript">
var pdfInfo = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) { var z = x[i].split('=',2); pdfInfo[z[0]] = unescape(z[1]); }
function getPdfInfo() {
var page = pdfInfo.page || 1;
if(page != 1) {
document.getElementById('pHeader').style.display = 'none';
}
}
getPdfInfo();
</script>
For some reason, Nenotlep's answer didn't worked for me. It removed only page number..
So I created a class with a display: none; and simply added it. It worked this way.
function pagination() {
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]];
if (vars['page'] == 1) {
var element = document.getElementById("pager");
element.classList.add("pager-hidden");
}
}
}
.pager {
font-size: 0.09375in;
padding-right: 1.00003in;
text-align: right;
letter-spacing: 0.01042in;
padding-bottom: 0.37501in;
}
.pager.pager-hidden {
display: none;
}
<body onload="pagination()">
<div class="pager" id="pager">
<div class="pager-pages">Page <span class="page"></span> / <span class="topage"></span></div>
</div>
</body>
For example, I am trying to iframe the youtube subscription box on the homepage, and the problem is, if I make the iframe really long, then it wastes space, but if I make the size I want, then if the user clicks the "load more videos" button, then it gets cut off. So is there any way to make the iframe (or any alternatives) be a percentage of the size, or dynamically change when the page changes?
Create a file and call it iframe.html
<html>
<head>
<script type="text/javascript"></span>
function autoIframe(frameId){
try{
frame = document.getElementById(frameId);
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
if (innerDoc == null){
// Google Chrome
frame.height = document.all[frameId].clientHeight + document.all[frameId].offsetHeight + document.all[frameId].offsetTop;
}
else{
objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 18;
}
}
catch(err){
alert('Err: ' + err.message);
window.status = err.message;
}
}
</script>
</head>
<body>
<iframe id="tree" name="tree" src="tree.html" onload="if (window.parent && window.parent.autoIframe) {window.parent.autoIframe('tree');}"></iframe>
</body>
</html>
Now create an html page called tree.html and put some dummy content in it.Make sure that the iframe.html and the tree.html are in the same directory. Open the .html files in browser and you will observe the o/p.
Some more useful links :
How to detect iframe resize?
How to detect iframe iframe resize