IE8 iframe not successfully running JS/CSS code - javascript

I am currently hacking together a calendar application which I am embedding into a website via an iframe, but I have come across a bug in internet explorer
function BuildListView(startday, l, events, config){
var cc = '<div id="myGrid" style="width:95%;height:95%;"></div>';
var html = [];
html.push(cc);
html.push('<link rel="stylesheet" href="../slickgrid/slick.grid.css" type="text/css" media="screen" charset="utf-8" /> ');
html.push('<link rel="stylesheet" href="../slickgrid/css/smoothness/jquery-ui-1.8.2.custom.css" type="text/css" media="screen" charset="utf-8" /> ');
html.push('<link rel="stylesheet" href="../slickgrid/examples/examples.css" type="text/css" media="screen" charset="utf-8" /> ');
html.push('<script language="JavaScript" src="../slickgrid/lib/jquery.event.drag-2.0.min.js"></script>');
html.push('<script language="JavaScript" src="../slickgrid/slick.grid.js"></script>');
gridcontainer.html(html.join(""));
html = null;
var grid;
var columns = [
{id:"event", name:"Event", field:"event",width:300},
{id:"start", name:"Start", field:"start",width:175},
{id:"finish", name:"Finish", field:"finish",width:175},
{id:"location", name:"Location", field:"location",width:200}
];
function sortByStart(a, b) {
var x = a.start.toLowerCase();
var y = b.start.toLowerCase();
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
var options = {
enableCellNavigation: false,
enableColumnReorder: false,
rowCssClasses: function(item) {
// if a task is 100% done then its row gets an additional CSS class
return (item.event == "Task 0") ? 'complete' : '';
}
};
$.getJSON("../cal.php", function(json) {
var data = [];
var i=0;
$.each(json.events, function(index, event) {
data[i++] = {
event: event[1],
start: event[2],
finish: event[3],
location: event[9],
};
});
data.sort(sortByStart);
$.each(data,function(index, value){
value.start = (new Date(value.start)).toUTCString();
value.finish = (new Date(value.finish)).toUTCString();
})
grid = new Slick.Grid($("#myGrid"), data, columns, options);
});
}
Dirty I know, this works fine loaded by itself and in iframes in FF/Chrome but in IE the final call
grid = new Slick.Grid($("#myGrid"), data, columns, options);
Is causing problems. The same thing happens when I comment out the CSS files so I'm assuming it's a post load CSS error. What would stop the CSS in an iframe being altered?

Have you checked your DOCTYPE? Some DOCTYPEs trigger Standards mode in FF/Chrome but Quirks mode in IE8. SlickGrid doesn't work in Quirks mode (not surprisingly!). I just fixed a very similar problem by changing this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
See this article for more info.

Related

How to pass CSS href to inline CSS in app script?

UPDATE:
I need to save an HTML webpage as a pdf in my google Drive. I am using app script.
However, the PDF is rendered differently from the HTLM page. I need the PDF to be the same as the HTML. FROM RESEARCH I DISCOVERED THAT EXTERNAL CSS IS NOT RENDERED PROPERLY, ONLY INLINE CSS.
I have an HTML page and I need to transform the external CSS into inline CSS. I need to do this using an app script.
Is it possible?
EDIT: MORE DETAILS -- HERE IS MY FUNCTION IN APPSCRIPT AND MY HTML CSS HEADER
function downloadFile() {
var fileURL = "https://www.....
var folder = "primes"
var fileName = "";
var fileSize = "";
var response = UrlFetchApp.fetch(fileURL, {
headers: { Authorization: 'Bearer ' + ScriptApp.getOAuthToken() },
})
var htmlBody = response.getContentText();
var rc = response.getResponseCode();
if (rc == 200) {
var blob = Utilities.newBlob(htmlBody,
MimeType.HTML).getAs('application/pdf').setName('Nota.pdf');
var folder = DriveApp.getFolderById("1gBA8YCs3PH7v7CNl3nlsjNqYzhOxhjYa");
if(folder != null){
var file = folder.createFile(blob);
fileName = file.getName()
fileSize = file.getSize()
}
}
var fileInfo = {'rc':rc,"filename": fileName, "fileSize":fileSize}
Logger.log(fileInfo)
}
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bling - </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://www.bling.com.br/libs/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://www.bling.com.br/libs/utils-1632934481.js"></script> <link rel="stylesheet" type="text/css" href="https://www.bling.com.br/styles/danfe.css" />
<style>
table.grid tr td{
/*padding:2px;*/
The output I get is totally not rendered correctly
Just replace the external css with the actual value with padded style tags.
Script:
var htmlBody = response.getContentText();
// replace external css with the actual css, padded with style tags
var externalCss = `<link rel="stylesheet" type="text/css" href="https://www.bling.com.br/styles/danfe.css" />`;
htmlBody = htmlBody.replace(externalCss, `<style>${UrlFetchApp.fetch('https://www.bling.com.br/styles/danfe.css').getContentText()}</style>`)
var rc = response.getResponseCode();
If this doesn't work due to captcha. (I'm not sure if captcha will cause you some issues when fetching). Copy the actual css (pad it with tags), save it in a file and include it in your string before converting to blob by using:
HtmlService.createHtmlOutputFromFile(filename).getContent()
Output:

Launching html file in firefox

I'm trying to launch a HTML file in firefox automatically
Our company has IE set as the default and this file is meant to launch in firefox to work properly
This is the code I have to check that, but for some reason it doesn't want to work properly
The filepath is correct which was the first thing I thought of
Can anyone assist?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="opener_files/opener.css" media="screen" type="text/css">
<script type="text/javascript">
function codeAddress(){
if (browserName = "Internet Explorer");
var shell = new ActiveXObject("WScript.Shell");
shell.run('"Firefox" "file:///Mel19a001ppn/transfer/L&D_LT&S/SimonW/Sean/DEBT T1 Re-design/SD_Debt_Systems_Introduction/intro.html"');
}
window.onload = codeAddress;
window.setTimeout(CloseMe);
function CloseMe()
{
window.open('','_parent','');
window.close();
}
</script>
</head>
</html>
Edit:
I played around with it some more, and got this to run and launch firefox
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="opener_files/opener.css" media="screen" type="text/css">
<script type="text/javascript">
function codeAddress(){
if (navigator.userAgent.indexOf("MSIE") != -1 ) {
var shellApp = new ActiveXObject("Shell.Application");
var commandtoRun ="C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe";
shellApp.ShellExecute(commandtoRun,"","", "open", "3");
}
}
window.onload = codeAddress;
window.setTimeout(CloseMe);
function CloseMe()
{
window.open('','_parent','');
window.close();
}
</script>
</head>
</html>
That opens firefox properly but now I can't work out how to load the filepath that I have
Any ideas?
You can get the installation path of FireFox from the Windows Registry, like so:
var shell = new ActiveXObject("WScript.Shell"),
cVer = shell.RegRead('HKLM\\SOFTWARE\\Mozilla\\Mozilla Firefox\\currentVersion'),
FF = '"' + shell.RegRead('HKLM\\SOFTWARE\\Mozilla\\Mozilla Firefox\\' + cVer +'\\Main\\PathToExe') + '"';
And then try to run FireFox:
shell.Run(FF + ' "\\\\Mel19a001ppn\\transfer\\L&D_LT&S\\SimonW\\Sean\\DEBT T1 Re-design\\SD_Debt_Systems_Introduction\\intro.html"');

Correct way to append data into existing data table using ajax

Introduction
I am working with the functions where user search donor organizations by name.
Data loads in DataTable, paging enabled and works fine for the initial data load.
(Data load with initial call from jquery is about 100 records)
Lately, i have tried to implement the ajax method, which is suppose to load "next 100 records" and append to the existing records(now record reaches at 200 aprox).
Problem
Record loading on ajax call is loaded into datatable but displays this recent record on current page(no paging applied on it).
When user change the page to navigate between records, this recent record disappear.
I am just manipulating DOM elements, i think i have to pass it to datatable, yes?
Complete Code(just copy and paste whole code to test,cdn libs used)
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<title>Demo : Test</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<form>
<input type="text" id="searchParam" name="searchParm" placeholder="enter search param">
<br>
<input type="submit" value="Submit" onclick="searchDonors(document.getElementById('searchParam').value); return false;">
</form>
<br />
</div>
<div class="col-md-9">
<div id="demoApim"><table id="demoApi"><thead><tr><td>Organization Name</td><td>Address</td></tr></thead><tbody id="tBody"></tbody></table></div>
</div>
<div class="col-md-3" id="searchBtn"><input type="submit" value="Load Next 100 Records" onclick="loadNext(); return false;"></div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var count;
$('#searchBtn').hide();
$(document).ready(function () { $('table').hide();});
function searchDonors(searchParam) {
window.searchDonorsParam = searchParam;
count = 100;
var request = new XMLHttpRequest();
request.open("GET", "http://graphapi.firstgiving.com/v1/list/organization?q=organization_name:" + searchParam + "*%20AND%20country:US&&page_size=100&page=1", false);
request.send();
var xml = request.responseXML;
//$.each(xml, function (key, val) {
var oName = xml.getElementsByTagName("organization_name");
//console.log(oName);
var oAddress = xml.getElementsByTagName("address_line_1");
var counts = xml.getElementsByTagName("organization_name").length;
for (var i = 1; i < counts; i++) {
var html = [];
html.push('<tr><td>', oName[i].innerHTML)
html.push('</td><td>', oAddress[i].innerHTML)
html.push('</td></tr>')
$("#tBody").append(html.join(''));
}
$('#demoApi').DataTable();
$('table').show();
$('#searchBtn').show();
//});
//console.log(oName);
//console.log(oAddress);
}
function loadNext()
{
if (count = 100)
{
$.ajax({
url: "http://graphapi.firstgiving.com/v1/list/organization?q=organization_name:" + searchDonorsParam + "*%20AND%20country:US&&page_size=100&page=2",
method: "GET",
dataType: "xml",
success: function (xml) {
var xmlDoc = $.parseXML(xml),
$xml = $(xmlDoc);
console.log(xml.getElementsByTagName("organization_name"));
var oNameMore = xml.getElementsByTagName("organization_name");
var oAddressMore = xml.getElementsByTagName("address_line_1");
var countsNew = xml.getElementsByTagName("organization_name").length;
var html;
for (var i = 1; i < countsNew; i++) {
html = [];
html.push('<tr><td>', oNameMore[i].innerHTML)
html.push('</td><td>', oAddressMore[i].innerHTML)
html.push('</td></tr>')
$("#tBody").append(html.join(''));
}
},
error: function () {
console.log("call failled");
}
});
}
}
</script>
</body>
</html>
If someone have idea about that problem please let me know, any kind of help or reference will be appreciated.
"I think i have to pass it to datatable, yes?". Yes. The correct way is to go through the API. Without using the API, dataTables cannot be aware of whatever changes you have made to the underlying <table> and therefore your recent records disappear :
var table; //outside your function scopes
in searchDonors() :
table = $('#demoApi').DataTable();
in loadNext() use row.add() instead of injecting markup to <tbody> :
for (var i = 1; i < countsNew; i++) {
table.row.add([oNameMore[i].innerHTML, oAddressMore[i].innerHTML]);
}
table.draw();
yes ofc modify DOM its not enought for datatables, you need to use datatables function to access data, use this:
initialize the table:
var myTable = $('#demoApi').DataTable();
then
myTable.row.add( [oNameMore[i].innerHTML,oAddressMore[i].innerHTML] );
all the data are stored inside datables settings object,
updating the DOM don't change the current table settings so you will
lose you change after any table redraw ( search, change page, ecc.. )

Why one requires getElementById and the other doesn't

Why does this work
app.prints(address,list.options[list.selectedIndex].value);
but this doesn't?
app.prints(status,macAddress);
JavaScript
var hey = 5;
var app = {
createList: function () {
for (var i = 0; i < 5; i++) {
list.options[i] = new Option(hey + i, "mac" + i);
}
app.prints(address, list.options[list.selectedIndex].value);
},
prints: function (location, message) {
location.innerHTML = message;
},
manageConnection: function () {
var macAddress = list.options[list.selectedIndex].value;
app.prints(status, macAddress);
}
}
HTML
<!DOCTYPE html>
<!-- Don't panic! All this
code looks intimidating but eventually it will make sense. -->
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="ECMA.js"></script>
<title>My LCD code</title>
</head>
<body onload="app.initialize();">
<p>Welcome to the LCD software</p>
<select id="list" onchange="app.prints
(address,list.options[list.selectedIndex].value);"></select>
<div id="address"></div>
<button id="connect" onclick="app.manageConnection();">Connect</button>
<div id="status">hi</div>
</body>
</html>
The difference is that a global status variable has already been defined by the browser to represent the text in the status bar. And, browsers don't allow a reference to the element to replace it.
To avoid the naming conflict, you can rename the element.
But, you really shouldn't depend on automatic globals for ids. Not all browsers implement the feature, and some only in certain modes.
var list = document.getElementById('list');
var address = document.getElementById('address');
app.prints(address, list.options[list.selectedIndex].value);

Image does not render in browser when hosted on the hard drive: I.E. Firefox, Safari, loads in Chrome

My app is supposed to draw a grid over an image and provide you with the coordinates of that grid. This however does not seem to work in I.E., Safari, and Firefox when the image is hosted on my local machine. When I host the photo on Picasa the images show up fine. This is working in Chrome. The images will eventually be hosted on my server but I am working with it locally first. I am really new to this. Any help would be greatly appreciated. Thank you
Here is the HTML and javascript I am using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<meta charset=utf-8 />
<title>Grid test</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<link rel="stylesheet" type="text/css" href="css\grid_style.css">
<img src="c:\EA_A02_N_1-4_5mM_Xgal_7d_B.cropped.resized.grey.png" id="img"/>
<script>
function SetGrid(el) {
var size = el.getSize();
var coord = el.getCoordinates();
var gridTable = new Element('table', {
'id' : 'gridTable',
'styles' : {
'position': 'absolute',
'width' : size.x,
'height' : size.y,
'top' : coord.top,
'left' : coord.left
}
});
var numcols = 48;
var numrows = 32;
var cellSize = {
width: size.x / numcols,
height: size.y / numrows
}
for (var row = 1; row<=numrows; row++){
thisRow = new Element('tr', {
'id' : row,
'class' : 'gridRow'
});
for(var col = 1; col<=numcols; col++){
thisCol = new Element('td', {
'id' : col,
'title': row + ' x ' + col,
'class' : 'gridCol0'
});
thisCol.inject(thisRow, 'bottom');
};
thisRow.inject(gridTable, 'bottom');
}
gridTable.addEvents({
// Add the click event to the gridTable
click: function(e) {
// Do something with the grid position.
alert(Math.floor((e.client.x - coord.left) / cellSize.width)
+ ', ' + Math.floor((e.client.y - coord.top)/ cellSize.height));
}
});
gridTable.inject(el.getParent());
}
window.addEvent('load', function() {
SetGrid($('img'));
}
);</script>
</body>
</html>​
It's probably a security "zone" related problem. Browsers tend to be picky about allowing javascript from external URLs run alongside code that reads things off the local disk for fear of leaking confidential information.
Does it work if you host all the javascript locally too?

Categories