I cannot automatically refresh the parent page after closing the child page. I know this question was asked before but I couldnt solve my problem using them. Following is my parent page(parent.php).
<html>
<head>
<script type="text/javascript">
var popupWindow=null;
function child_open()
{
popupWindow =window.open('child_page.html',"_blank","directories=no, status=no, menubar=no, scrollbars=yes, resizable=no,width=600, height=280,top=200,left=200");
}
function parent_disable() {
if(popupWindow && !popupWindow.closed)
popupWindow.focus();
}
</script>
</head>
<body onFocus="parent_disable();" onclick="parent_disable();">
Click me
</body>
</html>
and this is my child_page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<h1>child page</h1>
This is the child page
<body>
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
</script>
</body>
</html>
This works perfectly with Mozilla,.
Script:
function RefreshParentPage() {
window.self.close();
window.opener.location = 'your parent page path';
top.location.reload();
}
HTML:
<a onClick="RefreshParentPage()" href="#">Close Child Page</a>
Related
the function setImg() if called with an argument is not running but if no argument is passed then the function runs what m i doing wrong please help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function setImg(p)
{
window.alert(p);
document.getElementById('img').innerHTML ="<img src=p width='100' height='105'>";
}
</script>
</head>
<body>
load image
<div id="img">
</div>
</body>
</html>
You are missing the quotes for the src plus you should break up the string and add the variable to prevent it reading p as text.
Update the JS to the following:
<script type="text/javascript">
function setImg(p)
{
document.getElementById('img').innerHTML ="<img src='" + p + "' width='100' height='105'>";
}
</script>
Plus in the HTML you need to be careful with quotes:
load image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function setImg(p)
{
window.alert(p);
document.getElementById('img').innerHTML ="<img src=p width='100' height='105'>";
}
</script>
</head>
<body>
load image
<div id="img">
</div>
</body>
</html>
Well your were closing html attribute accidentally, you should use ' single-quotes instead.
Small mistake of quotes
change
load image
to
load image
I need to use onunload event of body. But its not working. I have following code for that. Please help me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onunload="myFunction();">
</body>
</html>
<script type="application/javascript">
function myFunction()
{
alert("hello");
}
</script>
</html>
<script type="application/javascript">
function myFunction()
{
alert("hello");
}
</script>
you should use this inner html like
<html>
<head>
....
<script type="application/javascript">
function myFunction()
{
alert("hello");
}
</script>
</head>
<body onunload="...">
Yes i got the solution. Thanks to #artm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="application/javascript">
window.onbeforeunload=before;
window.onunload=after;
function before(evt)
{
$.ajax({
type:'POST',
url:'addVar.php',
dataType:'text',
data:{
},
success:function(data){
},
error:function(XMLHttpRequest,textStatus,errorThrown){
}
});
//return "asd";//If the return statement was not here, other code could be executed silently (with no pop-up)
}
function after(evt)
{
//This event fires too fast for the application to execute before the browser unloads
}
</script>
</head>
<body >
</body>
</html>
Your <script> tag is outside of your <html> tag. Try moving it into your <head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="application/javascript">
function myFunction()
{
alert("hello");
}
</script>
</head>
<body onunload="myFunction();">
</body>
</html>
My code works inside an html but not from an external .js file.
In my external .js, I have a function like .animate() and hide() etc. working fine but
just for functions like .text() or .html() it is not working in the external file.
I even deleted all my code and just kept this script, still it didn't work, but when I copy pasted into my html it worked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body >
<div id="demo"> --- </div>
<button>click me</button>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("button").click(function(){
$("#demo").html("text");
});
</script>
</html>
Try this in your JS
$(function() {
$("button").click(function(){
$("#demo").html("text");
});
});
your html code is fully messed up!! update your code with the below
HTML
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
</head>
<body>
<div id="demo"> --- </div>
<button>click me</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("button").on("click", function() {
$("#demo").html("text");
});
});
</script>
</body>
</html>
I have the following code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#submit").click(function () {
$("#dialog").dialog({modal: true, height: 590, width: 1005 });
});
});
</script>
</head>
<body>
<a href="" id="submit">
<div id="dialog" title="Contact form">
<p>appear now</p>
</div>
</body>
</html>
when i run this code in ie it works fine and pops up the window no problem. But when i run this in firefox it just refreshes the page. Anyone know how to fix this and why its happening?
I see 2 things
1) Prevent link default behavior (navigate to href url, in this case, current page) using event.preventDefault
$("#submit").click(function (e) {
e.preventDefault():
$("#dialog").dialog({modal: true, height: 590, width: 1005 });
});
2) Your a tag is incorrect, it never closes. Not sure if this is a copy paste mistake or your real html.
I hope every one familiar with gmail chat where you can pop out your chat window in to new window with its content and if you press the pop-in that new window will be placed in that previous position
I did some work around for that and the following is my problem
I am able to open the content in new window with out its content for example if I have typed in the text box in child.html which is inside the iframe is not showing when on the popout.
Opener
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup checking</title>
<script type="text/javascript">
var winObj;
function openwindow()
{
winObj=window.open("","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
var s=document.getElementById('page').innerHTML;
console.log(s);
winObj.document.write(s);
}
function changeValue()
{
console.log(winObj.document.getElementById('changer').value);
winObj.document.getElementById('changer').value='changer';
}
</script>
</head>
<body>
<div id="page">
<iframe src="child.html" width="100" height="100"></iframe>
</div>
<div id="page1">
<input type="text" id="text1"/>
<input type="button" value="popup" onclick="openwindow()"/>
<input type="button" value="changevalue" onclick="changeValue()"/>
</div>
</body>
</html>
Child
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function openerChange()
{
window.opener.document.getElementById('text1').value="Value changed.."
}
</script>
</head>
<body>
<input type="text" value="" id="changer" />
<input type="button" value="changed" onclick="openerChange()"/>
</body>
</html>
You need a semicolon.
function openerChange()
{
window.opener.document.getElementById('text1').value="Value changed..";
}