views:

58

answers:

2

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'>
    <a href="javascript:void(0)" onclick="newwin();">Click here</a> 

</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>
+1  A: 

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());
});
James Wiseman
+1  A: 

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>
AlfaTeK