A server process changes the content of a file readme.txt which is located in a users home directory (Linux Ubuntu 20.04 Server). I want to reflect the file content on the page without fully reloading the site. Therefore I tried AJAX in the index.php file:
<!DOCTYPE html>
<html>
<head>
<title>Read a File</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<?php
$reader = file_get_contents("/userhome/readme.txt");
echo $reader;
?>
<script type="text/javascript">
function readFile() {
$.get("index.php");
return false;
}
</script>
<button onclick="readFile()">Click me</button>
</body>
</html>
Shouldn't an AJAX GET request to the PHP file itself load the new content and display it on the page?
reader.php
<?php
$reader = file_get_contents("/userhome/readme.txt");
echo $reader;
?>
So basically after clicking the Read me button, the div with id read will be filled with the txt content
index.php
<!DOCTYPE html>
<html>
<head>
<title>Read a File</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="read">
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#load").click(function(){
$("#read").load("reader.php");
});
});
</script>
<button id="load">Read me</button>
</body>
</html>
there are many other solutions for this
Related
Is it possible to call and run a function in a page, lets say a.html from page b.html
page a.html is like below which has a function to update page background color
<!DOCTYPE html>
<html>
<head>
<title>Page A</title>
</head>
<body>
<h1>This is Page A</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script>
function UpdatePageA(){
$("body").css("background-color","gold");
}
</script>
</body>
</html>
Page b.html is like
<!DOCTYPE html>
<html>
<head>
<title>Page B</title>
</head>
<body>
<h1>Update Page A from Here</h1>
<button type="button" class="btn update-page-a">Update Page A</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script>
$(".update-page-a").on("click", function(){
UpdatePageA();
});
</script>
</body>
</html>
Option number 4 here: https://blog.bitsrc.io/4-ways-to-communicate-across-browser-tabs-in-realtime-e4f5f6cbedca
This is assuming that you have both tabs open. If you are talking about sequentially moving from a.html to b.html, then you could use query string parameters or local storage.
I am trying to develop the Browser Back Button redirect script.
So basically when the user arrives at index.html for google or any other social media, on clicking the back button the user should go to the specified page.
I tried creating it with javascript, But it's not working. Anybody can help about it?
I created 3 pages
1) Index.html
<!DOCTYPE html>
<html>
<body>
<p>Redirect Page</p>
</body>
</html>
2)redirect.html
<!DOCTYPE html>
<html>
<head>
<script>
function init() {
setTimeout(function(){window.scrollTo(0,1)},0);
}
window.history.pushState(‘back.html’, ‘back’, ‘back.html’);
window.history.pushState(‘index.html’, ‘Index’, ‘index.html’);
window.addEventListener(“popstate”, function(e) {
if(document.URL.indexOf(“back.html”) >= 0){
document.location.href = document.location;
}
});
</script>
</head>
<body>
<p>By pressing the browser back button it should redirect to specified url</p>
</body>
</html>
3) back.html
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script>
document.location.href = “https://www.google.com”;
</script>
</head>
<body>
</body>
</html>
Is there any reason why the javascript file ( app.js ) which is used inside my iframe do not get executed when my iFrame refreshes?
Basically what's happening now is:
When I first load index.html , the javascript app.js output "hello world" to the console, but then once the iframe gets automatically refreshed ( through reloader.js ) everything refreshes but the javascript, what I mean is, once the iframe is refreshed I don't get a new "hello world".
Does anyone passed through the same issue?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>treedux - Development Server</title>
<script src="reloader.js"></script>
<script>
</script>
</head>
<body>
<div class="topbar">
<div class="icon-menu"></div>
3dux.io Header
</div>
<iframe id="treeduxwrapper" class="iframe" src="iframe.html"></iframe>
</body>
</html>
iframe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>treedux - Development Server</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div class="topbar">
<div class="icon-menu"></div>
CONTENT
</div>
</body>
</html>
app.js
console.log('hello world')
Thanks in advance,
TF
Try to reload by this,
document.getElementById('treeduxwrapper').contentWindow.location.href = "iframe.html"
I think the issue is you have kept your reloader.js in the index.html which will reload the current page(index.html) only, not the iframe.html. So in short your iframe.html is not getting reload on every reload of index.html.
I have a webpage that includes a Javascript file(pqrs.js) , I have a iframe in the same page that needs same js file , so we need to include or download same file twice . There is any way to avoid this .
Domain for Iframe and main page is same .
As fooo.com/xyz contains an iframe
foo.com/xyz
<!doctype>
<html>
<head>
<script src='http://localhost/code/public/js/imageuploader.js'></script>
</head>
<body>
<iframe>
<!doctype>
<html>
<head>
<script src='http://localhost/code/public/js/imageuploader.js'></script>
</head>
<body>
</body>
</html>
<iframe>
</body>
</html>
I want to get the data which is in <script></script> tags on hello.html to index.html. How can i do that?
index.html:
<head>
<script>
// some codes
</script>
</head>
<body>
<div>
<!-- result will be come here -->
</div>
</body>
</html>
hello.html:
<html>
<head>
</head>
<body>
<script>
document.writeln("hello world");
</script>
</body>
</html>
edit: i want the "document.writeln("hello world");" part, it must be string.
save the script separately as myScript.js and then you can use it in both html files with the script include tag! <script src="myScript.js"></script>
Move the script into a new file, such as script.js, then add this to both files:
<script src="script.js"></script>