Sharing <div> from another live Page - javascript

Any suggestions on how to get or borrow the div from another page. My pages consist of two csr view(customer service representative terminal) and the customers terminal view
Right now I'm doing a queuing system what I want to do is share some part of div of the csr view to the terminal view
terminal view is only a view of data like que code for them to know whos next to be call by our csr and etc and I want to include there the timer for every que that the csr made, a timer must set and I want to display this timer on the terminal view itself as well for the customer to know how long it is already for that cue, obviously timer must only initialized on the csr view page only and cant be on the terminal view
and terminal view is only viewing on a wide screen tv/monitor so user/customer cant navigate it
my code for the timer is here
<div class="stopwatch">
<div class="controls">
<button class="start">Start</button>
<button class="stop">Stop</button>
<button class="reset">Reset</button>
</div>
<div class="display">
<span class="minutes">00</span>:<span class="seconds">00</span>:<span class="centiseconds">00</span>
</div>
</div>
<script src="stopwatch/stopwatch.js"></script>
I need to borrow or get/share the <div> <div class="display"> and display it on the terminal view and if the que is finish timer will stop and on the next and same process must be initialized.
I look for some similar question but it is not the exact what i need
jQuery get variable value from another html page
my structured pages is like this
RQS
|_csrpage(index.php where stopwatch is included)
|_terminalview(index.php inside here must display)
they are both from separate folder

If the window with the DIV that you wish to get or borrow can be opened using a standard hyperlink or similar on the main window then it is fairly trivial to share data between pages using postMessage after capturing a reference to the opening page
As example here are two basic html pages.
index.html
the main page that is to display the "borrowed" data
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<script>
document.addEventListener('DOMContentLoaded', function(){
const view=document.getElementById('view');
window.addEventListener('message', function(e){
view.innerHTML=e.data
});
});
</script>
</head>
<body>
<a href='source.html' target='_blank'>Open Source page with clock/timer</a>
<div id='view'></div>
</body>
</html>
source.html
the page with the timer/ clock ( data to be "borrowed" )
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>#clock{border:1px solid black;padding:1rem;text-align:center;width:50%;float:none;margin:auto}</style>
</head>
<body>
<div id='clock'></div>
<script>
(function(){
const target=window.opener;
(function(){
document.getElementById('clock').innerHTML=new Date().toLocaleTimeString('en-GB');
target.postMessage( document.getElementById('clock').innerHTML, '*' )
setTimeout( arguments.callee, 1000 );
})();
})();
</script>
</body>
</html>
In the above source.html page there is a simple clock running which acts as the data to be shared with the original page. In your code this would be your timer

Related

When debugging Chrome Javascript, the Javascript loaded by specifying a path cannot enter the breakpoint

If you load javascript by specifying a path, there is a problem that you cannot enter even if you specify a breakpoint.
Intermittently enters breakpoints, to be exact. In the case of the code below, it may enter after 5 to 6 refreshes, and in some cases, it may not enter the breakpoint even after 20 refreshes. This number of refresh attempts seems to be purely random, with no regularity.
Below is the HTML code for loading javascript.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="test">
<script src="/js/test.js"></script>
<div class="mx-auto container-lg top-div">
<div>TEST</div>
</div>
</th:block>
</html>
And below is the javascript code that is called.
window.onload = function() {
var aa = 100;
}
As you can see, it's just a code to see if you enter a breakpoint at the time of window.onload.
However, if you write the javascript in the HTML file as shown below, it will enter the breakpoint every refresh without any problems.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="test">
<!--<script src="/js/test.js"></script>-->
<script>
window.onload = function() {
var aa = 100;
}
</script>
<div class="mx-auto container-lg top-div">
<div>TEST</div>
</div>
</th:block>
</html>
And the above page is loaded into the common Layout HTML using th:replace as shown in the code below.
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://thymeleaf.org">
<!--Layout Head-->
<div th:replace="/fragments/head.html :: head"></div>
<!--Layout Nav Header-->
<div th:replace="/fragments/topnav.html :: topnav"></div>
<!------------------------------------------------------------->
<!--Layout Content(Page)-->
<!--This is the part where the main content page is delivered from the controller and the
appropriate page is retrieved.-->
<!--The example in this article replaces the test fragment with th:replace below.-->
<div th:replace="#{'/page/' + ${layoutContent_Page}} :: ${layoutContent_Fragment}"></div>
<!------------------------------------------------------------->
<!--Layout Footer-->
<div th:replace="/fragments/footer.html :: footer"></div>
<!--Sidebar(Collapsed)-->
<div th:replace="/fragments/sidebar.html :: sidebar"></div>
</html>
What's the problem? As you can see, I'm using Intellij community, SpringBoot, and Bootstrap.
I think there is something different about loading pages with javascript into th:replace.
One peculiarity is that when you check and refresh Chrome JS Debugger's Event Listener Breakpoints -> Load -> load, bootstrap eventhandler runs first and always enters the window.onload function of test.js written above.

d3-graphviz basic example won't render

I'm trying to use d3-graphviz in a very basic html page to render a graph for display. However, nothing ever renders. I worked my example down to the exact content of the "basic example" from the documentation and still nothing renders. Here is my page content which is exactly the same as https://bl.ocks.org/magjac/a23d1f1405c2334f288a9cca4c0ef05b which is referenced from https://github.com/magjac/d3-graphviz
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/#hpcc-js/wasm#0.3.11/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz#3.0.5/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
d3.select("#graph").graphviz()
.renderDot('digraph {a -> b}');
</script>
If I load that file (chrome, firefox, or safari) then I just get a blank page. I can throw in HTML above the <div> which renders, but the graph doesn't render. Any ideas what I'm doing wrong?
This code runs if I set up a local web server and access it. To do the same, you'll need to set up a web server.

Google Trends embed is destroying my webpage

I am doing my damnedest to embed a Google trends chart into a section of my site.
In theory, it seems easy:
1.) copy script from Google:
2.) Clear a space in your webpage:
3.) Add the code:
<div class="full-row4" style="height: 300px;">
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script>
<script type="text/javascript">
trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"/m/078rys","geo":"","time":"today 12-m"}],"category":0,"property":""},
{"exploreQuery":"q=%2Fm%2F078rys&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}
);
</script>
</div>
Seems easy right? wrong!
Every time I do this, I get this result:
Upon further inspection, I found that when those scripts were loaded in, it wipes my entire body of the webpage. (Note: the chart gets loaded in thru an AJAX call containing the entire active page minus the navbars)
I've tried an array of different logic to try and get this to work, but everything I try deletes all HTML in the body tag of the webpage. (script tags are still there)
I found people with a similar issue, but it seems Google has changed how you embed these widgets into a site. Rendering any previous stackoverflow documentation useless. (at least from what I found)
you can use renderExploreWidgetTo() function instead, it takes DOM element as first parameter:
var divElem = document.getElementById('wrapper');
trends.embed.renderExploreWidgetTo(divElem,"TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
Google trends embed script create an iframe at the hosting website.
Here is a simple example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>hello</h1>
<div>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dogs","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dogs&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script>
</div>
<h1>world</h1>
</body>
</html>
As you can see, the body is not affected.
The problem is probably not with the trends scripts, but a more general issue.
Try creating an iframe at your page, does it display correctly?

JQuery Mobile Widget not Formatting on Dynamic Content on Re-Visits

I have a single page jQuery Mobile app with four "data-role='pages'" in place; so, essentially, it's one HTML doc with four "pages."
Each "page" also has a navigation footer that I am populating dynamically through javascript. I defined a variable called "theFooter," and assigned all my empty footer divs (with classes of "footer") like so:
$('.footer').html(theFooter);
Now, in order to get this to work properly, I have to populate those footers PRIOR to the page being created, otherwise jQuery Mobile won't apply it framework to make the footer bar look like a mobile app nav bar.
So I achieve that through this:
$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that the 'page' has been run
$('.footer').html(theFooter);
});
It works like a dream, the first time around. Let's suppose the pages are "about," "contact," "mission," and "calendar"…
You click "about"… perfect.
You click "contact".. perfect.
You can do this for each of the "pages," and each time the "pagebeforecreate" is fired and the footer looks GREAT.
HOWEVER, if now you click on, say, "about" again (or any of the ones that you've already visited), the page transitions and the content is in place, but there is NO JQUERY MOBILE FORMATTING. And it is not firing the 'pagebeforecreate' function again, which makes sense, because it has already been created the first time.
I've tried working with 'pageinit' and 'pagebeforeshow' firings, but have gotten nowhere.
I have tried .trigger() and .page() methods… and got nowhere.
Can someone explain exactly how to make that JQuery Mobile formatting stick?
If you call .trigger('create') on the parent element of the widget you can enhance it's markup at any point in time:
$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that the 'page' has been run
$('.footer').html(theFooter).trigger('create');
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/>
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" />
<title> Hello World </title>
<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><h3>Broken Bells</h3><p>Broken Bells</p>Purchase album </ul>').trigger('create');
});
</script>
</head>
<body>
omt
<div>
<div id="omtList">
</div><!--/content-primary -->
</body>
</html>

Is it possible to make a link with 'target' attribute run script on another page?

*Update: Ultimately I've decided that accomplishing exactly what I want here isn't possible due to the issues it poses to security. Kalle's answer below gives a solution that is closest to what I want to accomplish.
In order to solve my problem I've created scripts on both pages and will use a sort of push notification that is routed through the server in order for them to communicate.
Thanks for the help!! *
I have two pages. Both windows already exist independently. Page two has a function declared in JS.
I would like to be able to call the function in window two by clicking a link in window one.
Page 1:
<html>
<head>
<title>This is a title!</title>
</head>
<body style="background: lightblue">
Click Me!
</body>
Page 2:
<html>
<head>
<META HTTP-EQUIV="Window-target" CONTENT="my_target" />
<title>This is a title!</title>
<script type=text/javascript>
function clicked() {
alert('test');
}
</script>
</head>
<body style="background: lightblue">
</body>
Since it is on the same domain you can get this to work but would have to change the way you were doing it a little.
First off you would have to open it in a popup using this syntax rather than a new tab:
newwindow=window.open(url,'name','height=200,width=150');
and then you could simply call newwindow.clicked() after the popup is called.
update
just did a quick test and this will open it in a new tab. (sorry its been a while since I used the open function.
newwindow=window.open(url,'name');
Just noticed also that you should wait for the popup to load. So in my Example it would look a little something like this (with jQuery):
var newwindow = window.open('http://www.tylerbiscoe.com/vb/new.html');
$(newwindow).load(function(){
newwindow.clicked();
});
Ok, brand new answer. I hope this is what you were thinking. This is however, when you open page 2 from page 1.. So basically, page 1 would know who page 2 is..
Online example: http://kopli.pri.ee/stackoverflow/6832271.php
Page 1
<html>
<head>
<title>Page 1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
.ajaxlink {color: blue; cursor: pointer; border-bottom: 1px dotted blue;}
</style>
</head>
<body>
<span id="open_page_2" class="ajaxlink">Open new window</span>
<br>
<br>
Click Me!
<script>
$('#open_page_2').click(function(){
child = window.open('test2.php','page_2','width=600,height=600');
});
$('a[target=my_target]').click(function () {
child.SecondPageFunction();
return false;
});
</script>
</body>
</html>
Page 2
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h1>Your seeing page 2!</h1>
<script>
function SecondPageFunction () {
alert('Second page action got triggered!');
}
</script>
</body>
</html>
The script must be a part of the page you're opening in the new window. You're absolutely correct about it being a security flaw if it was elsewise allowed.
You could add some query string argument that could be picked up onload by javascript in the page you are opening and call your function if the query string arg is present.

Categories