I have two javascript files, js1 and js2.
js1 is defined in index.jsp. and inside js1 i'm using js2. once i'm executing js2 i want to take some values from index.jsp. (js2 can't define in ndex.jsp file)
so,
How can i access html using this external js file (js2)
this is my index.jsp
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js1.js"></script>
</head>
<body>
<h1>test</h1>
<span id="up"></span>test<br><br><span id="down"></span>
<br><br>
Time : <span id="foo"></span>
<br><br>
<div id="uid" >this is the value i want to access</div>
<button onclick="start()">Start sync</button>
</body>
this is js1.js
navigator.serviceWorker.register('js2.js', { scope: '/login/' }).then(function(reg) {
if(reg.installing) {
console.log('Service worker installing');
} else if(reg.waiting) {
console.log('Service worker installed');
} else if(reg.active) {
console.log('Service worker active');
}
//setTimeout(refresh, 10000);
}).catch(function(error){
console.log('Registration failed with ' + error);
});
this is js2.js
var eventSource2 = new EventSource("HelloServlet");
eventSource2.addEventListener('down_vote',function(event){
console.log("data from down" , event.data);
var MyDiv1 = document.getElementById('uid'); //this is not working
var val = MyDiv1.innerHTML; //this is not working
console.log(val + "ddddd 2"); //this is not working
console.log("down");
});
There is a mystery variable index
var MyDiv1 = index.getElementById('uid'); //this is not working
should probably be
var MyDiv1 = document.getElementById('uid');
You are including js1.js at the beggining of you main page, so it can't find the DOM elements of index.jsp
You should include js1.js at the end of index.jsp
or include it in document.ready() of index.jsp
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>test</h1>
<span id="up"></span>test<br><br><span id="down"></span>
<br><br>
Time : <span id="foo"></span>
<br><br>
<div id="uid" >this is the value i want to access</div>
<button onclick="start()">Start sync</button>
<script type="text/javascript" src="js1.js"></script>
</body>
Related
I am trying to automate the process of opening an external site from a button of an internal site that I created, but I can not reference the document I created, follow the code below, tried several times and could not, any help is valid, thank you so much.
<!DOCTYPE html>
<head>
<title>Principal</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="\\fswcorp\ceic\ssoa\gaacc\System\JQuery\jquery-3.2.1.min.js"></script>
<script src="\\fswcorp\ceic\ssoa\gaacc\System\jQueryMask\dist\jquery.mask.min.js"></script>
<script src="\\fswcorp\ceic\ssoa\gaacc\System\jQueryUI\jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#dateBegin").mask('00/00/0000');
$("#dateEnd").mask('00/00/0000');
$("#buttonDownloadBRScan").click(function() {
$windowopen = window.open();
$windowopen.location.href = "https://www.fdibr.com.br/autenticacao/autenticacao/login";
$test = $windowopen.document.getElementById("usuario").innerHTML = "7478704";
})
});
</script>
</head>
<body>
<div class="dataInput">
<label id="labelDateBegin">Data Inicial</label>
<input id="dateBegin" type="date" />
<label id="labelDateEnd">Data Final</label>
<input id="dateEnd" type="date" />
</div>
<br><br>
<button id="buttonDownload">Download</button>
<button id="buttonDownloadBRScan">Download BRScan</button>
</body>
Assuming you have access to that domain in the window you're opening (same origin policy), you have to wait for the window to finish opening first before accessing elements inside.
$("#buttonDownloadBRScan").click(function(){
const w = window.open('https://www.fdibr.com.br/autenticacao/autenticacao/login');
w.addEventListener('DOMContentLoaded', () => {
w.document.getElementById("usuario").innerHTML = "7478704";
});
})
Try something like this:
<input id="yourID" type="button" onclick="open_page()" value="Your Message Here"/>
<script>
function open_page () {
window.open('Your Webpage');
}
</script>
the external site and your internal site have different domain,you can't modify the external site content from your internal site directly.you can use window.postMessage,maybe it would resolve your problem
This code runs immediately once the page is loaded. The onclick event is completely ignored by javascript. What is an easy fix for this because like youtube when you play a video the document.title is updated with a speaker. I want to learn to do that with external javascript because I can do it with internal javascript in the html.
<!DOCTYPE html>
<html>
<head>
<title> Animation </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="animationcss.css">
</head>
<body>
<script src="animation.js"></script>
<input id="changeButton" type="button" value="Change" ></input>
/External Javascript/
var element = document.getElementById("changeButton");
element.onclick = textChange("changetothis");
function textChange(text){
document.title = text;
}
try calling the function after the document is loaded by placing the script tag below the object or making $(document).ready() function,
this code works fine with me
<!DOCTYPE html>
<html>
<head>
<title> Animation </title>
<meta charset="UTF-8">
</head>
<body>
<input id="changeButton" type="button" value="Change" ></input>
<script src="script.js"></script>
<body>
</html>
and the script is
var el = document.getElementById("changeButton");
el.onclick = function(){
textChange("changetothis");
}
function textChange(text){
document.title = text;
}
You can achieve your desired effect by using an anonymous function, like so:
document.getElementById("changeButton").onclick = function () {
document.title = newTitle;
}
The variable 'newTitle' should be declared & initalized above this code somewhere in order for it to work.
I just started using jQuery, then forgive me for noobish.
What I'm trying to do is 'get reference to a object that is wrapped in a class', but there are more classes with same name.
How can I reach the right object and get the reference to it, when the only thing that will differ it from a thousand other more objects is the text inside the div.
In this case, I'm trying to show only the text "this should be returned", that is under the classes 'ng-anyclass'.
After that, will be possible store the reference to that specific div and change it text? Or any other properties?
Here's the code:
Page 1 - the loader:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var s = $('#result').load('Page2.html .ng-anyclass .ng-anyclass .ng-anyclass');
});
</script>
</head>
<body>
<div id="result"></div>
<div>Other Stuff Here</div>
</body>
</html>
Page 2 - the target page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="ng-anyclass">
<div class="ng-anyclass">
<div class="ng-anyclass">this should be returned</div>
</div>
<div class="ng-anyclass">
<div class="ng-anyclass">not this</div>
</div>
</div>
</body>
</html>
You can use :eq(0) for this:
jQuery(function($) {
$('#result').load('page2.html .ng-anyclass .ng-anyclass .ng-anyclass:eq(0)', function(){
var _this = $(this)
setTimeout(function(){
_this.find('.ng-anyclass').text('changed');
},1000);
});
});
updated plnkr Demo.
If you want to write text somewhere you can use CSS selector, like this :
$('body .ng-anyclass .ng-anyclass:eq(0) .ng-anyclass').text('your text')
eq(0) it's a shortcut of first-child, or eq(1) is nth-child(2) for example
I hope it will be help you
I have a form on main page, by pressing a specific button on it - new window() opens with a table in it, and by double clicking the line in the table it should transfer data from table into input fields of my form, but it doesn't.
But if i run everything from one page it works fine.
So how should i modify my code so it can transfer data from new window
Main page:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<button type="button" onclick="NewWindow()">Banks</button>
<br /><br />
Bank Name:
<br />
<textarea id='bank' cols=56 rows=6></textarea>
Bank Adress:
<br />
<textarea id='bic' cols=56 rows=6></textarea>
<script>
var textarea_bank = document.getElementById('bank'),
textarea_bic = document.getElementById('bic');
function comm(obj) {
textarea_bank.value = obj.cells[0].innerHTML;
textarea_bic.value = obj.cells[1].innerHTML;
}
function NewWindow()
{
myChildWin = window.open("test.html", "_blank", "toolbar=no, scrollbars=no, resizable=no, top=100, left=100, width=600, height=600");
}
</script>
</body>
</html>
Window with table(test.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<table id="mySuperTBL">
<tr>
<td><b>BankName</b>
</td>
<td><b>BIC</b>
</td>
</tr>
<tr id='1' ondblclick='comm(this)'>
<td>Bank</td>
<td>Adress</td>
</tr>
</table>
</body>
</html>
Very simple, You should create two files. the second one is "stam.html" (this will be the child window):
Editing - bi-directional communication :-)
for the example the file will open itself (keep this file as "stam.html"). If this the parent, it will set the message to the child. else - it will set text to the parent.
<!DOCTYPE html>
<html>
<head>
<title>Bla!</title>
<script type='text/javascript'>
var m_ChildWindow = null; //
function OpenChildWIndow() {
m_ChildWindow = window.open ("stam.html");
}
function SetDataToChild(data) {
if (m_ChildWindow) {
m_ChildWindow.document.getElementById('body').innerHTML += "Dear son:" + data;
} else {
opener.document.getElementById('body').innerHTML += "Dear Daddy:" + data;
}
}
function Init() {
var button = document.getElementById('cmdSendMsg');
if (opener) {
button.innerHTML = "send message to daddy";
}
}
</script>
</head>
<body id='body' onload = "Init();">
<button onclick='OpenChildWIndow();'>Click to open child</button>
<br>
<button onclick='SetDataToChild("Hello <br>");' id='cmdSendMsg'>Click to add data to child</button>
</body>
</html>
Here you have two buttons. the first will open the new window, the second one will add "hello" to it.
You should use query string, the below code shows how you can send an id of value 1 to the test.html
function NewWindow()
{
myChildWin = window.open("test.html?id=1", "_blank", "toolbar=no, scrollbars=no, resizable=no, top=100, left=100, width=600, height=600");
}
I have the following code that works:
<html>
<head>
<script>
function loaded(){
oFormElement = document.forms['test form'].elements["txtStatus"];
oFormElement.value = "just loaded";
}
</script>
</head>
<body onload="loaded()">
<p>my first socket.io test</p>
<form id = "test form">
<input type="text" id ="txtStatus" value="">
</form>
</body>
</html>
now, if I include the reference to socket.io, it stops working
<html>
<head>
<script src="socket.io/socket.io.js">
<script>
function loaded(){
is this because socket.io handles from elements in it's own way, or is because the browser cannot find socket.io ? Is there any way to debug this/fix this ?
You need to close the first <script> tag...
<html>
<head>
<script src="socket.io/socket.io.js"></script>
<script>
function loaded(){
// ...