I have a parent page that contains a textarea and a link to open a child window. The child window has another textarea and a button. User enters some text in the textarea in the child window and clicks the button, a javascript gets fired that updates the content of the textarea in the parent window with that of the textarea of the child window and closed the child window.
I am currently doing this in javascript and it works fine, but since we will move to jQuery very soon how would one accomplish the same using jQuery.
page1.html
----------
<script type="text/javascript">
function newwin() {
window.open('page2.html','','width=600');
}
</script>
<body>
<textarea id='t1'>
Click here
</body>
page2.html
----------
<script type="text/javascript">
function updateparent() {
window.opener.document.getElementById('t1').value = document.getElementById('t2').value;
window.close();
}
</script>
<body>
<textarea id='t2'>
<input type="submit" onclick="updateparent();">
</body>
Interesting question.
As mentioned by Domonic Roger, if its working then you probably want to be leaving it.
For me the question is not "What is the JQuery code for this snippet?", but how to I use jQuery to achieve the same solution.
Sometimes it is not just a simple case of a straight code replace. Take the following:
function updateparent() {
window.opener.document.getElementById('t1').value = document.getElementById('t2').value;
window.close();
}
Now, the jQuery code might be something like this:
function updateparent() {
window.opener.$("#t1").val($("#t2").val());
window.close();
}
But, I wouldn't do this. I would use pop window functionality available in the jQuery UI, or some plugin (e.g. blockui) to acheve the popup window.
Also, this code:
<body>
<textarea id='t2'>
<input type="submit" onclick="updateparent();">
</body>
In jQuery we are encouraged to use late binding of events, so any inline JavaScript would go:
<body>
<textarea id='t2'>
<input id="MyInput" type="submit">
</body>
And be bound once the document is ready:
$(document).ready(function(){
$("#MyInput").click(updateparent());
});
A more "jquery" way to do this:
page1.html
----------
<script type="text/javascript">
$(document).ready(function() {
$("#link1").click(function(){
window.open('page2.html','','width=600');
});
});
</script>
<body>
<textarea id='t1'>
<a id="link1" href="#">Click here</a>
</body>
page2.html
----------
<script type="text/javascript">
$(document).ready(function() {
$("#link1").click(function(){
window.opener.jQuery("#t1").val($("#t2").val());
window.close();
});
});
</script>
<body>
<textarea id='t2'>
<input type="submit" id="link2">
</body>
Related
Hello guys I am New to javascript I want to know why does the html button disappears as soon as i click it. The browser shows the text but the button disappears. here is how my html looks likes
<html>
<head>
<script type="text/javascript">
function funcname(){
document.write("<br/> <br/> <br/> some text");
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
</body>
</html>
The write() method writes HTML expressions or JavaScript code to a document.
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
Answer from: source
<html>
<head>
<script type="text/javascript">
function funcname()
{
document.body.innerHTML += "Some Text";
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
</body>
</html>
Try above code it will work fine.If you use document.write() overwritten body so should be use document.body.innerHTML .
The Document.write function overwrites the document content when called, as stated by the Mozilla Developer Network:
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.
Source: https://developer.mozilla.org/en-US/docs/Web/API/Document/write
document.write() will override your whole body element. If you want to override only specific parts, you could define a target and use innerHTML to change the text.
<html>
<head>
<script type="text/javascript">
function funcname(){
document.getElementById("someParagraph").innerHTML = "Paragraph changed!";
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
<p id="someParagraph">Hey<p>
</body>
</html>
I have a simple test page that sets the focus to a textarea on an oninit function. However the exact code fails to do this if the page is called as a child.
Putting alert box proves that the oninit function is being called but fails to put the focus in the textbox. Pressing reload though does then focus correctly.
So given that my code works perfectly when called on a main page, and also works in a child if reload is called, then why doesn't it work the first time?
<html>
<body onload="init()">
<script type="text/javascript">
function init()
{
document.getElementById("message").focus();
}
</script>
<textarea id="message" rows=10 cols=40></textarea>
</body>
</html>
Nothing clever here as you can, just only doesn't work if the page is loaded by window.open("test2.html");
You can also use setTimeout irrespective of the event.
setTimeout(function() {
document.getElementById("elementId").focus();
}, 0);
which browser do you use?
I check in firefox, chrome & IE.
Your code runs perfect and focus on the textarea.
I create two file test1.html and test2.html in a same directory.
In test1.html i insert the the follwing code..
<html>
<body>
<script type="text/javascript">
function init()
{
window.open('test2.html');
}
</script>
<button onclick="init()">test</button>
</body>
</html>
And in test2.html..
<html>
<body onload="init()">
<script type="text/javascript">
function init()
{
document.getElementById("message").focus();
}
</script>
<textarea id="message" rows=10 cols=40></textarea>
</body>
</html>
Than, I run the test1.html and click the button and test2.html appears with focus on the textarea.
Can somebody help me with this?
I have a parent window and a pop up window. I want them to communicate, but there is something wrong with the code. please advise me for javascript or jquery. I just want the popup to control the parent window too.
My index.html
<html>
<head>
<script>
function openwindow() { window.open("pop.html","mywindow","menubar=1,resizable=1,width=400,height=400"); }
</script>
</head>
<body>
Show pop up!
</body>
</html>
then after we click the anchor , pop will show. here is the pop up code with form:
popup code:
<html>
<head>
<script>
function clicked(){window.opener.document.getElementById('will-hide-in-pop').style.display="none"; }
</script>
</head>
<body>
<div>
<form action="process.php" method="GET">
<input type="text" name="text" />
<input type="checkbox" name="cbox" />
<input type="submit" name="" onclick="clicked()"/>
</form>
</div>
</body>
</html>
did I put a right code?
I just want it if the form is submitted, the anchor in the parent window will also vanish
please help me
Try invoking your function in jQuery submit:
$(document).ready(function () {
$('form').submit(function () {
clicked();
});
});
take care about selector: .getElementById('will-hide-in-pop') in popup, you use getElementById, but in index, there is class="will-hide-in-pop".
i have this code i need to close the parent.html window when the child window opened, i need the code for that working well in IE and Firefox
Parent.html
<HTML>
<SCRIPT TYPE="text/javascript">
function sendTo()
{
window.open('child.html','_blank','resizable=yes,width='+(screen.width-500)+',height='+(screen.height-500)+'');
}
</SCRIPT>
<BODY>
<form name="form">
<input type="text" value="" name="text1" id="pdetails1">
<input type="text" value="" name="text1" id="pdetails2">
</br>
<input type="submit" value="submit" onClick="sendTo()">
</BODY>
</HTML>
child.html
<html>
<body>
<form>
<input type=text name="text5" value="">
<input type=submit name="submit"value="submit">
</form>
</body>
</html>
in child:
<script type="text/javascript">
window.opener.close();
</script>
Most browsers won't let you, however.
try this
Parent Window:
<script type="text/javascript">
function sendTo()
{
window.open('child.html','_blank','resizable=yes,width='+(screen.width-500)+',height='+(screen.height-500)+'');
this.window.close();
}
</SCRIPT>
OR
In Child window
<script type="text/javascript">
window.opener.close()
</SCRIPT>
Do this. First open the current window to trick your current tab into thinking it has been opened by a script. Then close it using window.close(). The below script should go into the parent window, not the child window. You could run this after running the script to open the child.
<script type="text/javascript">
window.open('','_parent','');
window.close();
</script>
Step 1 : Type the in address bar as " about:config " and press enter key
Step 2: "i'll be careful , I promise" Click on this button
Step 3: " dom.allow_scripts_to_close_windows " Search this line and Double click on it.
I'm designing a series of forms. Is there a way I can mark a field to be populated by the browsers cursor (just like this pages loads with the cursor already in the title field above).
Thanks
Giles
Use focus() function like this in Javascript. Put this code at the end of your HTML code, just before the </body> tag:
<script language="javascript" type="text/javascript">
document.getElementById("textboxid").focus();
</script>
Replace the textboxid with the ID of the <input> text box you are using in your form.
You can use Javascript to set your desired input focus:
Using JavaScript:
<script language="javascript" type="text/javascript">
document.getElementById("xtpo_1").focus();
</script>
Using a JavaScript Library like Jquery:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#xtpo_1").focus();
});
</script>
Even better, write an function
function autoFocus(x){
document.getElementById(x).focus();
}
and put it in a separate javascript file called basic_functions.js or something.
Load that file at the top of your page in the header like this
<script type="text/javascript" src="basic_functions.js"></script>
In your body tag, call the function onload.
<body onload="focus('first_name')" >
Then create you input:
<input type='text' value='' name='first_name' id='first_name' />
That way you keep javascript functions out of your page and you can reuse the function on other pages. you can then put other basic functions like this in that file and include it in all pages where it is needed
In a HTML5 page, for browser supporting HTML5, you can do:
<input name="lorem" autofocus>
Vanilla Javascript:
<input id="lorem" name="lorem">
...
<script language="javascript" type="text/javascript">
document.getElementById("lorem").focus();
</script>
</body>
</html>
jQuery:
jQuery(document).ready(function($){
$('#email').focus();
});
Also you can do it in jQuery style and paste js-code anywhere:
HTML:
<input type="text" id="name"><br />
<input type="text" id="email">
Javascript:
jQuery(document).ready(function($){
$('#email').focus();
});
Check it online: http://www.jsfiddle.net/4d5JG/