View ServiceNow incident_list.do HTML page source via Javascript - javascript

Got a puzzle for you guys. I'm attempting to extract text from a ServiceNow incident_list.do page using document.documentElement.innerHTML . However, only the following is returned:
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" async="" src="https://ssl.google-analytics.com/ga.js"></script><script type="text/javascript" src="js/browser-polyfill.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/back.js"> </script>
</head>
<body>
</body>
This is clearly wrong. Not only do I see content on the page, but "view source" shows something completely different (also populated with content). How do I force Javascript to spit out the CURRENT page source, as it's seen on the page in an active window?

Related

Why window is loading before DOM?

I have written a basic Hello World application using jQuery in an HTML page in eclipse.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" >
window.onload = function (){
alert("Window loaded");
}
$(document).ready(function(){
alert("DOM loaded");
})
</script>
</head>
<body>
<p>Hello </p>
</body>
</html>`
I have used JRE 8 in eclipse. Upon running it on Chrome, "Window loaded" alert box displays first and then "DOM loaded". Ideally it should be opposite. DOM should load first.
DOM loads first if refernece jQuery library from google APIs.
Could anybody help me on this? The question is not about the comparison between the two.

Can a libgdx web application work along with web components technology?

I'm working with libgdx 1.9.2 and gwt 2.6.1.
After the GWT-compilation of my java app, I get a JS script (html.nocache.js) that I can include in my html page, and visualisate in a web browser (inside a div, here it's "embed-html"). That part is working nicely.
Here's the code:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="html/html.nocache.js"></script>
</head>
<body>
<div id="embed-html"></div>
</body>
</html>
My next goal is to use web components, and more precisely custom elements, to have a simple tag <my-app></my-app> in any web page to get my application.
my index.html:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="webcomponents.js/webcomponents.js"></script>
<link rel="import" href="component.html">
</head>
<body>
<my-app></my-app>
</body>
</html>
my component.html:
<template id="template">
<div id="embed-html"></div>
<link href="styles.css" rel="stylesheet" type="text/css">
</template>
<script>
var helloDoc = document._currentScript.ownerDocument;
var myApp = document.registerElement('my-app', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var root = this.createShadowRoot();
var template = helloDoc.querySelector('#template');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
}
}
})
});
</script>
<script type="text/javascript" src="html/html.nocache.js"></script>
But the JS script generated by GWT-compilation has some document.write(...) inside; so all that is included is my empty div, my style sheet correctly loaded, and warnings: "Warning: A call to document.write() from an asynchronously-loaded external script was ignored". Since it is generated, I don't think I can avoid using these document.write().
If I put the <script type="text/javascript" src="html/html.nocache.js"></script> in the head of index.html (where it was before I tried using webcomponents), the app is not added inside the div, as it should, but under (the div and style sheet are included as expected).
And if I put the script inside the template, nothing happens.
So I am wondering if there is a way to have a GWT application working with web components, or if I should search for another way to easily include my application into external websites.
(If you wonder the reasons why I want to do so, it's because I want clients to be able to add my app easily on their own website, with only an import and a tag, the same way I could import a YouTube video or a Google map.)

Multiple jQuery plugins on multiple pages

My question may be very simple to most people on here. But i am very new to jQuery, and i am having a sort of difficulty with repetitiveness.
I have a custom script on a page which has a lot of text, that allows that text to be collapsed. This script is in jQuery. The page is in php.
I have multiple pages like this. I find myself having to place the code for the script documents on every page like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/readmore.min.js"></script>
<script src="javascripts/main_func.js"></script>
Is there a way that i can place it only on the index.php file and call the script function which is:
<script type="text/javascript">
$(document).ready(function(){
$('.article').readmore({maxHeight: 640});
});
</script>
I am not sure how your page loads but this is what you would have to do essentially:
index.php
<?php
require('header.php');
require('content.php');
require('footer.php');
?>
header.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US" >
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="viewport" content="width=device-width">
<title>Page Title</title>
<link rel="stylesheet" href="/css/default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/readmore.min.js"></script>
<script src="javascripts/main_func.js"></script>
</head>
<body>
content.php
<div id="content">
<!-- Do display code here -->
</div>
footer.php
<div id="footer">Footer Content</div>
</body>
</html>
If you have a new page, it would look something like this:
newpage.php
<?php
// Keep same header
require('header.php');
// New content page
require('newcontent.php');
// Same footer
require('footer.php');
?>

Why jQuery progress bar is not working?

This is a Google hosted jQuery script ..right?
So I do not need to download anything ..I guess.
but then when I load the page why do not it shows any thing
What is the trick am I missing here?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery UI Progress Bar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"> </script>
<script>
$(function () {
//call progress bar constructor
$("#container").progressbar({ value: 50 });
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
By any chance are you testing from your local machine with "file:" URLs?
If so, you can't use URLs in the form:
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
because that is the equivalent of:
src="file://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
And thus your scripts won't be found.
During development, set them to http::
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
And switch them back when you go to production (if you want).

FancyBox Implementation Problems

I'm having some problems getting FancyBox to work...I figure its something pretty simple but I'm still a beginner with web design and the process is a little confusing to me right now. This is what I have so far:
<!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=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- ******************* CSS ******************* -->
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<!-- ******************* Javascript ******************* -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.iframe").fancybox();
});
</script>
</head>
<body>
<a class="iframe" href="./iFrameFancy.html">Test FancyBox Here!</a>
</body>
The error I'm getting is pretty popular on SO but I've looked for all the fixes mentioned and nothing has worked yet. This is what I'm getting:
Uncaught TypeError: Object #<Object> has no method 'fancybox'
Any help with this would be greatly appreciated! Thanks all!
You are loading fancybox twice (the normal source one and the packed one). Also remove the dot from your src attributes and make sure the file is where you say it is
So change this
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.pack.js"></script>
To this
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack-1.3.4.js"></script>
or only this
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack-1.3.4.pack.js"></script>
but not both
Try not including the fancybox js file twice on the same page.

Categories