Using C#, PowerShell and Jsoup I've tried to capturing the percentage that is displayed at the end, 99.96%. Using the DOM explorer in IE, this is what I see:
<!DOCTYPE html>
<html>
<body id="website#22;page">
<div id="wrap">
<script type="text/javascript">...</script>
<div class="topRow" id="iTopRow">...</div>
<div id="header">...</div>
<div id="content">
<div class="paddingfix">
<script type="text.javascript">...</script>
<div class="toppaddingfix"></div>
<div title="Summary Percentage"
class="overallPercentage">
<div>
<div style="padding-bottom: 12px;">
<div class="textRegionContainer" id="iTextRegion_D14">
<div class="position" style="display: none;"<>/div>
<div class="status" style="display: none;">loaded</div>
<div class="textRegionPlaceHolder">
<p class="textRegionTitle">
99.96 %
</p>
</div>
</div>
</div>
However, when programmatically trying to capture it I receive this:
<div id="iTextRegion_DR14" class="textRegionContainer">
<script type="text/javascript">
$(document).ready(function() {
var client = new wLive.Service.Client(false);
var textRegion = new wLive.Controls.TextRegion(
'Tools',
'AppServerOutDetails3',
'DR14',
'#iTextRegion_DR14',
{"id":"DR14","data":null,"paragraphs":["<bindingref
name=\"Reliability\" \/> %\u000d\u000a "],"style":0},
client);
wLive.Controls.DataBridge.registerDataRegion('#iDataBridge', textRegion);
});
</script>
</div>
How do I programmatically capture that percentage so I can then have another program evaluate it's value?
Related
I want to return HTML Code from a .js file.
Here is my code:
HTML:
...
..
.
<script id="message-response-template" type="text/x-handlebars-template">
<div class="sender-message-line table-content vivify swoopInBottom">
<div class="table-content-cell" id="ava">
<img src="/static//img/pro_2.png" alt="DP" class="avatar">
</div>
<div class="msg-conatiner">
<div class="actual-msg"></div>
<span>Message</span>
<div class="">
<div class="message-seen text-right">{{time}}</div>
</div>
</div>
</div>
</script>
...
..
.
JS
setTimeout(function () {
var contextResponse = {
response:$('HTML CODE I WANT TO RETURN').html(),
time: this.getCurrentTime()
};
I can only return string files but when I want to return the whole HTML code that I wrote up there, nothing shows up
I tried :
response: $('<script id="message-response-template" type="text/x-handlebars-template"> <div class="sender-message-line table-content vivify swoopInBottom"> <div class="table-content-cell" id="ava"> <img src="/static//img/pro_2.png" alt="DP" class="avatar"> </div> <div class="msg-conatiner"> <div class="actual-msg"></div> <span>Message</span> <div class=""> <div class="message-seen text-right">{{time}}</div> </div> </div> </div> </script>').html()
If you're using Jquery:
$("#yourDiv").load('yourhtmlfile.html #readMe');
And add the id to your html:
<div><div id="readMe"><p>text</p></div></div>
I want to show all the nodes of my html page inside a div.
What i have so far (js):
var nodes = document.getElementsByTagName("*");
div3.innerHTML = nodes;
And html:
<body>
<div id="content">
<div id="1-1">
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
The output I get from this code in div3: [object HTMLCollection]
How do I get all the nodes to show like:
BODY
DIV
DIV
DIV
DIV
DIV
DIV
DIV
SCRIPT
So every node in the file basically
You have to loop through all the nodes so that you get the nodeName property individually.
Please Note: Since document object has some other tags like HTML, HEAD, STLYLE, SCRIPT etc., all of them will be targeted with * selector.
var nodes = [...document.getElementsByTagName("*")];
nodes.forEach(function(el){
div3.innerHTML += el.nodeName + ' ';
})
<body>
<div id="content">
<div id="1-1">
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
You can use JavaScript querySelectorAll method, which is used to select all the nodes based on the parameter we passed. for example if we pass * inside document.querySelectorAll('*'), it selects all the node in the document. "*" is the universal selector.
var allNode=document.querySelectorAll('*')
console.log(allNode)
<body>
<div id="content">
<div>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
Use element_name.querySelectorAll('*') to get all elements inside it.
var b=document.getElementById('div3')
document.querySelectorAll('*').forEach(e=>b.innerHTML+=e.nodeName + "<br>")
<body>
<div id="content">
<div id="1-1">
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
I am calling a function that replaces innerHTML of a div when a user clicks on a particular div. I am able to pass raw html code inside the function to achieve the desired result but I want to use the same function to dynamically replace the content of different divs depending on which div was clicked.
For instance if div1 was clicked then the innerHTML should be replaced with a div1.html file and div2 with div2.html file. I coming from a PHP background and just learning vanilla javascript so I'm wondering how this can be done.
Here's some sample code I playing around with
function jobDescription() {
document.getElementById('details').innerHTML = "\
<div class=\"col-12 fade show\">\
<div class=\"card text-white bg-dark\">\
<div class=\"card-body text-center\">\
<h4 class=\"card-title\">Fullstack Web Developer</h4>\
<p class=\"card-text\">REMOTE</p>\
</div>\
</div>\
</div>\
";
}
<div id="details" class="row align-items-center mt-5">
<div id="freelance" class="col-lg-4 col-md-6 mb-3" onclick="jobDescription()">
<div class="card text-white bg-dark">
<div class="card-body text-center">
<h4 class="card-title">Backend Web Developer</h4>
<p class="card-text">FREELANCE</p>
</div>
</div>
</div>
</div>
For this you can use the concept of iframes.
function FuncDesc(id, val)
{ alert(val);document.getElementById('i'+id).src = val; }
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<div id ="div1" onclick="FuncDesc(this.id, 'div1.html')">Div1</div>
<div id ="div2" onclick="FuncDesc(this.id, 'div2.html')">Div2</div>
<iframe id="idiv1"></iframe>
<iframe id="idiv2"></iframe>
</body>
</html>
I have the DOM structure as
<div id="content">
<div id="wrapper">
<input type="text" id="search" />
</div>
</div>
<div class="subContent">
</div>
<div class="subContent">
</div>
I want to select <div class="subContent"> on enter event of input box which is closest to the input box.
$('#search').on('keypress', function(){
$(this).parent().parent().next();
});
Is there a better way to do this ?
$(this).closest('#wrapper').nextAll('.subContent').first()
That way you can change it to use classes
I guess this can help you
$("#search").click(function () {
$(this).closest("div.module").hide();
});
Possible duplicate of
Hiding the closest div with the specified class
Use This:-
<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="content">
<div id="wrapper">
<input type="text" id="search" />
<div class="subContent" style = 'background-color:red;'>div1</div>
<div class="subContent" style = 'background-color:red;'>div2</div>
<div class="subContent" style = 'background-color:red;'>div3</div>
</div>
</div>
</html>
<script>
$('#search').on('keypress', function(){
$(this).next().css( "background-color", "blue" );
});
</script>
Please see the following code:
<div id="song" class="s1">
<div class = "l">foo</div>
<div class="r">
<div>foo</div><div>foo</div>
<div class="link">Link</div>
</div></div>
<div id="song" class="s2">
<div class = "l">foo</div>
<div class="r">
<div>foo</div><div>foo</div>
<div class="link">Link</div>
</div></div>
<div id="song" class="s3">
<div class = "l">foo</div>
<div class="r">
<div>foo</div><div>foo</div>
<div class="link">Link</div>
</div></div>
There are several more s like these. I've to get the link from the first <div> whose ID is song only using JavaScript because I've fetched this data using php into an <object> tag.
Thank you :)
You should use JQuery like (at the bottom of your file):
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
var links = $.map($('div#song .link a'), function(a) { return $(a).attr('href'); });
console.log(links);
</script>
Output:
["some url", "some url", "some url"]
Noting only the first set,
<div id="song1" class="s1">
<div class = "l">foo</div>
<div class="r">
<div>foo</div>
<div>foo</div>
<div class="link">Link</div>
</div>
You can get the link which is some url by
var link = $(".s1").find("a");
console.log(link.attr('href') );