Is there a way to display a file having a .php extn in html using javacript on a click event as any files which are supposed to be displayed on different clicks ?
You can do this by jquery which is fairly simpler method
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("your file url");
});
});
</script>
</head>
<body>
<div id="div1"></div>
<button>load file</button>
</body>
</html>
Related
Below code work for if I used the same web URL
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("https://www.samewebsiteurl h1");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
I also want to fetch my website content on the same website, but it's not working in BlogSpot because of my website on Blogger.
Here is an example of one of my blog
http://ethiopian-adv.blogspot.com/2021/02/chemicals-and-conditioners-for-your.html
Please help me to fetch its post heading.
I have created an html file
<html>
<head>
<title>test</title>
</head>
<body>
<p id="demo">l</p>
<script type="text/javascript" src="profile/test.js">
s(shiva);
</script>
</body>
</html>
i want to change the value of the paragaraph. So my external js file is
function s(nam) {
document.getElementById("demo").innerHTML = nam;
}
But is not changing can anyone suggest me how can change the value.
You can not include code in a javascript tag with a "src" attribute. So move the loose javascript in a new tag.
<script type="text/javascript" src="profile/test.js"></script>
<script type="text/javascript">
s('shiva');
</script>
I have created a next.html and added the jquery.min.js file in the same folder but the still doesn't work. there is nothing in my next.html apart from a sentence in plane text.
<html>
<head>
<title>refresh</title>
</head>
<script src="jquery-1.12.4.min.js"></script>
<body>
<button name="button" id="button">reload</button>
<div name="button" id="auto"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#button").click(function() {
$("#auto").load("next.html");
});
});
</script>
</body>
</html>
I'm trying to learn AJAX, and do the example listed on W3School, but when I set up node js as server and trying to change DOM of my html, it didn't work.
This is before I press Button.
This is after I press Button.
The example lists below:
enter link description here
my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
I have an image.html file in dreamweaver.
in source code I link an js file called img.js
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>PHOTO</title>
<script language="javascript" type="text/javascript" src="js/img.js"></script>
</body>
</html>
if an use an alert in img.js
alert("My First Jquery Test");
it shows correctly in web page but if write some javascript code like
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
The paragraph above was changed by a script.
nothing shows..why and how I show this?
The script is working as you can see here.
Report your fully HTML file if still have problem.
Remember:
<html>
<head></head>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Do it right
edit img.js
window.onload=function(){
alert("My First Jquery Test");
document.getElementById("p2").style.color="blue";
}