I've converted a sample PDF file to HTML5 using Oracle's OutSide In Web View Export using the AjaxChunked method, but I cannot get the file to render correctly using the supplied JavaScript API. The file is rendered correctly is browsed to directly.
For example, the incorrect rendering through the JavaScript API:
And how the file looks if browsed to directly:
The source code for the correct rendering is this:
And here is the index.html I've written using the Web View Export JavaScript API:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="oit.css">-->
<script src="oit.js"></script>
<title>Oracle Web View Export Test</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
$(document).ready(function(){
console.log("Document ready");
var viewContainer = document.getElementById("container");
OIT.view.attach(viewContainer);
OIT.view.load("adobe-acrobat.html");
});
OIT.document.addEventListener("load", function (evt) {
console.log("Just loaded: " + evt.detail.url);
});
And here is the code that converts the document (C#):
try
{
OutsideIn.OutsideIn.InstallLocation = new DirectoryInfo(Environment.CurrentDirectory + "\\Resources");
}
catch (Exception uhoh)
{
Console.WriteLine(uhoh.Message);
}
Exporter exporter = OutsideIn.OutsideIn.NewLocalExporter();
try
{
exporter.SetPerformExtendedFI(false);
exporter.SetFontReferenceMethod(Options.FontReferenceMethodValue.ReferenceExported);
/* The FONTDIRECTORY option must be set. */
List<DirectoryInfo> FontDirectories = new List<DirectoryInfo>();
DirectoryInfo SystemFontsDirectory = new DirectoryInfo(Environment.GetFolderPath(Environment.SpecialFolder.Fonts));
FontDirectories.Add(SystemFontsDirectory);
exporter.SetFontDirectories(FontDirectories);
exporter.SetWebViewStructure(Options.WebViewStructureValue.AjaxStreamed);
//exporter.SetPerformExtendedFI(true);
exporter.SetSourceFile(file);
exporter.SetDestinationFile(newoutputPath + "\\" + Path.GetFileNameWithoutExtension(file) + ".html");
exporter.SetDestinationFormat(FileFormat.FI_HTML5);
}
catch (Exception fail)
{
Console.WriteLine("Fail: " + fail.Message);
Console.ReadLine();
}
Console.WriteLine("Exporting: " + file);
exporter.Export();
I've looked high and low for some idea on what is causing the problem, but I can't seem to find anything. The documentation provided by Oracle isn't great, so I'm at a loss. There is a post on the Oracle support forums from over two years ago with this exact problem, but no solution is provided.
Any ideas or suggestions would be greatly appreciated.
Just in case someone stumbles across this and is having the same issue, it turns out that for whatever reason, the OIT.view.load() method doesn't correctly load the CSS for the page (oit.css), so you have to manually put that into the HTML file you're calling the view.load() from.
In addition to this, the top level DIV created for the document has a height of zero. No idea why, so we fixed this using OIT.view.height(document.height), or alternatively whatever height you want it to be. This seems to have solved the problems, and the document is displayed correctly in the browser.
Related
I'm integrating a mailerlite popup for a client's next.js project, and I'm having a difficult time converting the JavaScript snippets into the jsx required to make the popups function properly. On first load it seems to work just fine, but on relaod I'm getting the following error.
window is not defined
I've encountered the issue while dealing with DOM manipulation, but in this case, judging from the code in the snippet, I need the window object.
Install the following snippet of Javascript on every page of your website right before the closing tag.You only need to add this snippet once, even if you plan to have a few different webforms.
<!-- MailerLite Universal -->
<script>
(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
_.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
var ml_account = ml('accounts', '912433', 'd5p1f7l9g0', 'load');
</script>
<!-- End MailerLite Universal -->
I've placed this code in my Layout wrapper. As previously stated, it works fine on first load, but as soon as the user navigates to a new page above error shows up.
PS I found an old question regarding this topic here, but it's old and not quite relevant to my situation. I need to figure out how to convert the above snippet for nextjs. Any help at all would be appreciated.
This approach treats the MailerLite universal tag as its own <script> hosted on your site's domain.
Add a NextJS custom document.
Create a JavaScript file containing the MailerLite universal tag code in ./public. I put mine in ./public/scripts/ml.js.
Add a <script> tag loading #2 in your custom _document.js file:
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
<script async src="/scripts/ml.js"></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
Everything worked as intended from there! (Caveat: I'm only using embedded forms).
I am new to the world of JavaScript and I'm trying to use the function load() to insert another html file. It' a little bit hard to explain, here is the code:
<script>
$(document).ready(function() {
$('#main').click(
function(){
$('#news').load('today.html');
}
); //end click
}); //end ready
</script>
Can you help me? I'm not using a web server.
Thanks
Why it Doesn't Work
Browser security restrictions can block you from using AJAX functions with content that is accessed through the file:// protocol (i.e. from a local file on your computer, without a web server).
Solution
I run a web server on my pc so that I can avoid all of these problems - back when I was working on a Windows PC, I used WAMP. These days, I use Linux (with Apache, PHP and MySQL) on my computer so I can work in an environment that is closer to the server.
I do not believe the code you have presented has any faults in any way. I believe it is to do with your loading of the JQuery library, as with the following code I achieved these results:
index.html
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#main').click(
function(){
$('#news').load('news.html');
}
); //end click
}); //end ready
</script>
</head>
<body>
<p id="main">HELLO</p>
<p id="news">NEWS</p>
</body>
</html>
news.html
<html>
<head></head>
<body><h1>HELLO STACK OVERFLOW!!!</h1></body>
</html>
Before click:
After click:
However, when I was building this example I first tried using the Google APIs version of JQuery and found that I could not currently connect to the API. Therefore I believe the solution to your problem is to go to this website: http://code.jquery.com/jquery-1.11.1.js and copy and paste everything into a text file called 'jquery.js'. Then add the following to the head tag of your main HTML file:
<script src="jquery.js"></script>
Make sure that 'jquery.js' is in the same directory as the main HTML file of your project otherwise this will not work. Hope this helps :)
You can find error message in load(url,fnResponse) response is success or fail
also check this jquery-load-method
$(document).ready(function() {
$('#main').click(
function(){
$('#news').load('today.html', function( response, status, xhr ) {
if ( status == "error" ) {
alert( "Sorry but there was an error: " + xhr.status + " " + xhr.statusText );
}
});
}
); //end click
}); //end ready
Here is my code:
<!DOCTYPE html>
<html lang="en" >
<head>
<script type="text/javascript">
function showResponse(response){
var responseString = JSON.stringify(response, '', 2);
document.getElementById('response').innerHTML += responseString;
}
function onClientLoad(){
gapi.client.load('youtube','v3', onYouTubeApiLoad);
}
function onYouTubeApiLoad(){
gapi.client.setApiKey('MyActualKey');
search();
}
function search(){
var request = gapi.client.youtube.search.list({
part: 'snippet'
});
request.execute(onSearchResponse);
}
function onSearchResponse(response){
showResponse(response);
}
</script>
<title></title>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>
</head>
<body>
<div id="response"></div>
</body>
</html>
This code is from Codecademy, and I thought I can use it on an html page and it would work.
I got an API key from google and I set my Youtube data api v3 setting to enabled in my google developers console, but this code gives me a blank page.
What am I doing wrong?
There are a few missing pieces, code snippets which codecademy likely took for granted but which are essential when placing it in your own server outside of their app. First of all, you need a line that actually loads the gapi library from google. You can put this in your code, just before the closing :
<script src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>
In short, this will get the library from Google's servers, and when it's loaded the library will automatically call your onClientLoad method, kicking off your app.
Next, you say you have an API key; make sure you put that key into your code by replacing this:
gapi.client.setApiKey('MyKey');
with this:
gapi.client.setApiKey('{WHATEVER_YOUR_ACTUAL_KEY IS');
Finally, as the commenters mentioned, your body is empty, so when your code executes the showResponse method there's no place to put what comes back. Add this:
<div id="response"></div>
I am required to remotely include into my appcelerator project, a javascript file available at a particular link, and use the function declared in that file to process some data.
What i would like to achieve is something like the following in html -
<script src="https://some-link/Data.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var testVariable = someMethod(localdata);
});
//use testVariable as necessary
</script>
//someMethod() is declared in remotely available Data.js
I am a newb at Appcelerator and im not really able to follow some of the threads i have come across, so some detailed help would be really appreciated. Thank you in advance.
Well according to me , you should first understand few points first :
You want to include a remote file hosted at some server , now as the Titanium code converts to native code at compile time , you cannot include Titanium API's from remote file.
If you want to include a remote file , then only option which I see is loading that file in webview.
Now coming to your problem , as you said that you want to fetch some data only from remote server by triggering some JS function from remote file. So following is what would I do :-
a/ Create a hidden webview in my main window with a EventListener of webview. Something like :
var webview = Titanium.UI.createWebView({url:'localHtmlFile.html'});
//event listener to handle the response from webview
Ti.App.addEventListener('fromWebView', function(e)
{
var testVariable = e.data;
});
b/ In localHtmlFile.html file :
<!DOCTYPE html>
<html>
<body>
<script src="https://some-link/Data.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var testVariable = someMethod();
//respond the fetch data to the main window via fireEvent
Ti.App.fireEvent( 'fromWebView', { data : testVariable } );
});
</script>
</body>
</html>
PS : This is just a logic to begin with , you have to edit code according to your requirements
I have java script file that reads in a csv file, and has many functions to to visualize the data differently, using d3. I want each visualization to be displayed in different html pages. Ive made every html page, refer to the javascript file. Each page also has its own script that calls functions from the referred javascript file.
The problem, I am facing is that when ever I go to a new page, the function gets called before the data being read. Only works when refreshing the page. I there a way to just read the data in once, and every page can access it.
If you look at the code below, callingFunction() returns undefined (maybe because data is not stored in var data?) The callingFunction() works fine when the page is refreshed.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>D3</title>
**<script src="my.js"></script>** //my script file
</head>
<body>
<script>
callFunction(); //uses var data defined in my.js
</script>
Here is the "my.js":
var data;
function data(file){d3.csv("file", function (error, data) {
ds = data;
callFunction();
}
load your script after the target DOM :
<canvas></canvas>
...........................
<script type="text/javascript"></script>
Use angularJs Js library: it organize your js code according to MVC design pattern.
If you have more than one method to implement a business logic , Use console.time & console.timeEnd to evaluate code performance .
console.time('anID');
// Here your code
console.timeEnd('anID');