i have an working api key --
... just need a little guidance creating a script or loop to grab lat/lng from query and plotting onto a map in html format in cognos report studio
HTML ITEM -> SOURCE TYPE (TEXT)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<!-- Reference to the Bing Maps SDK -->
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]'
async defer></script>
<script type='text/javascript'>
function GetMap()
{
var map = new Microsoft.Maps.Map('#myMap');
//Add your post map load code here.
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
HTML ITEM -> REPORT EXPRESSION
<body onload="GetMap();">
var map = new Microsoft.Maps.Map('#myMap');
Related
what I found out =>
you can't import scripts from links inside chrome extension's background scripts or content scripts (basically anywhere inside new page HTML or popup HTML)
so you what you need to do is =>
<html lang="en">
<head>
<script src="./googleAnalytics.js"></script>
<script src="./googleAnalyticsStarter.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
</body>
</html>
instead of =>
<html lang="en">
<head>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-XXXXXXXX");
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app</noscript>
</body>
</html>
I have a very simple react program that imports react using a script command and a cdn.
How do I covert it to preact while keeping the same structure?
I tried to follow these instruction, but they weren't very clear
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/react#15/dist/react.js"> </script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div id='root'></div>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
ReactDOM.render(<T title='welcome'/>,document.getElementById('root'))
</script>
</body>
</html>
As per this github issue you have a couple of different options for using Preact with a script tag. You can directly call h- Preact's version of React.createElement or you can use babel standalone to transform your JSX as you were in your original React example. Here is a Preact conversion of your original example.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/7.2.0/preact.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<body>
<div id='root'></div>
<!-- option 1: alias it -->
<script>window.React = { createElement: preact.h }</script>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
preact.render(<T title="Welcome" />, document.getElementById('root'));
</script>
</body>
</html>
I am trying to read my index.html file from my server.js in order to add a new that links to a new html file I generate. I am using the POST method to do this and can successfully generate the new HTML file, however I am not sure how I can add a new inside the index.HTML.
Here is my server.js:
//POST method
if(req.method === 'POST'){
req.on('data', (data) => {
let elementObj = querystring.parse(data.toString());
element = elementObj.elementName;
elementSymbol = elementObj.elementSymbol;
elementAtomic = elementObj.elementAtomicNumber;
elementDescription = elementObj.elementDescription;
let newElement = fs.createWriteStream(`./public/${element}.html`);
newElement.write(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements - ${element}</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>${element}</h1>
<h2>${elementSymbol}</h2>
<h3>Atomic number ${elementAtomic}</h3>
<p>${elementDescription}</p>
<p>back</p>
</body>
</html>`);
let indexElements = document.querySelector('#elements');
let li = document.createElement('li');
let a = document.createElement('a');
a.setAttribute('href', `/${element}.html`);
let elem = document.querySelector(`a[href = "/${element}.html"]`);
elem.innerHTML = `${element}`;
indexElements.appendChild(li);
li.appendChild(a);
res.end(data);
});
}
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>The Elements</h1>
<h2>These are all the known elements.</h2>
<h3>These are 2</h3>
<ol id = 'elements'>
<li>
Hydrogen
</li>
<li>
Helium
</li>
</ol>
<script src="../../server.js"></script>
</body>
</html>
The result I want in my newly, modified index.html (new 'Boron' <li> added):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>The Elements</h1>
<h2>These are all the known elements.</h2>
<h3>These are 2</h3>
<ol id = 'elements'>
<li>
Hydrogen
</li>
<li>
Helium
</li>
<li>
Boron
</li>
</ol>
<script src="../../server.js"></script>
</body>
</html>
Your question doesn't make it clear exactly what you're trying to do, but if these are your requirements:
You want to have an HTML template on disk.
That you can insert some content into based on some dynamic data.
You can't use anything other than plain node.js http server (so no existing template engines).
Then, you essentially have to build your own little template engine. You can do that by reading the file into memory and then doing some sort of search/replace on some markers in the file to insert your content and then send that newly formed content. Here's a general idea for how to do that:
Contents of template.html file on disk
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>The Elements</h1>
<h2>These are all the known elements.</h2>
<h3>These are 2</h3>
<ol id='elements'>
<li>
Hydrogen
</li>
<li>
Helium
</li>
<!-- new elements -->
</ol>
<script src="../../server.js"></script>
</body>
</html>
Server code for handling the POST
//POST method
if(req.method === 'POST'){
req.on('data', (data) => {
let elementObj = querystring.parse(data.toString());
let element = elementObj.elementName;
let elementSymbol = elementObj.elementSymbol;
let elementAtomic = elementObj.elementAtomicNumber;
let elementDescription = elementObj.elementDescription;
fs.readFile("template.html", function(err, data) {
if (err) return res.status(500).end();
// build new content
let newContent = "<li><a href=${element}.html>${element}</a></li>";
data = data.replace(/<!-- new elements -->/, newContent);
res.send(data);
});
});
});
Thank you for reading.
I am stuck on passing information between my background.js and popup.html!
In this example, I am trying to call testRequest in background.js from popup.html. I have looked at dozens of examples of how to do this and coded as many solutions, but I have not been successful...this is one of the solutions I tried:
Popup.html:
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" src="background.js">
$(document).ready(function () {
document.getElementById("test").textContent = chrome.extension.getBackgroundPage.testRequest();
});
</script>
<div id="test"></div>
</body>
</html>
background.js
var testRequest = function(){
return 'yay!';
}
Your help is greatly appreciated!
~Brian
You could use simple message passing to do this. For example:
Popup.html
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
popup.js
$(function() {
chrome.runtime.sendMessage({method:"testRequest"},function(reply){
$('#test').text(reply);
});
});
background.js
chrome.runtime.onMessage.addListener(function(message,sender,sendRepsonse){
if(message.method == "testRequest")
sendResponse(testRequest());
});
function testRequest(){
return "yay!";
}
Inline code is not allowed in popup.html so we move it all to an external file, you were using jQuery already so don't be afraid to use it more, and if you are using it, don't forget to include it.
So, I am trying to do a basic Google Chrome Hello World kind of extension. Can someone explain me why the below code doesn't work? Thanks.
popup.js:
document.getElementById("foobar").innerHTML = "Hello Chrome Extensions";
popup.html:
<!doctype html>
<html>
<head>
<title>Hello Chrome</title>
<script src="popup.js"></script>
<div id="foobar"></div>
</head>
<body>
</body>
</html>
I am following the "framework" of http://developer.chrome.com/extensions/getstarted.html.
It can be solved in two ways:
Swap the order of <script .. > and <div ..>.
Wrap the code in popup.js in a domready event:
document.addEventListener('DOMContentLoaded', function() {
// Code here...
});
Your code failed because the <div> was unknown at the time of executing the script.