Palastia

I see. But I think the CKEditor text area needs to sort of reload. I tested location.reload upon inserting mathml into CKEditor from a popup window and it worked (the mathml becomes an image from a plugin within CKEditor), but only in FireFox, since it supports forward-back caching and no javascript states are actually lost. Other browsers just reloaded the page entirely without the mathml data in textarea. Where should I use the onkeyup event to make it work? Thanks.

I apologize for my ignorance, but what exactly is the "keyup" insitric event (on the editor element)? Please forgive me, Im rather new to coding altogether. Edit: So I just looked up the keyup event but how exactly can I use this to preserve the data upon reloading the text area?

Hey christian thanks for replying! Based on what I've read on CKEditor's API documentation, the only instance that I can use for this is UpdateElement();? I tried this once but it did not work. I suspect probably Im not sure where to use it and didn't write the code correctly.

Thank you for replying. But how exactly can I achieve this in my scenario?

Hey everyone. Is it possible to reload a page without losing data? The reason why I need this because in my scenario, I am inserting data (mathml) from a pop window into CKEditor text area and a plugin within CKEditor actually converts the mathml data into an image. But in order to do this, I need for the page to reload again after inserting the raw mathml to turn it into an image. So I need to be able to reload the page and keep the data within the CKEditor textarea. I have done quite a fair bit of research and stumbled upon the Ajax load function. But I am unsure if it can be used in my scenario. I would appreciate if someone could provide me with some advice and point me in the right direction. Thanks.

Edit: I think I know what the problem is. What I need to do is upon inserting the value into ckeditor text area, I need to refresh or reload that same text area but with the earlier inserted data. This is because of a plugin for ckeditor I am using; it turns the inserted mathml into an image but only upon reload. But I do not know how to do this. I would appreciate it if anyone could help me out on this. Thanks.

Ugh I am also now facing the problem where the javascript is not working on any other browser other than Firefox. :'( Not exactly sure what the problem is.

On a slight drift, can the same thing be done with checkboxes rather than radiobuttons? How should I change the sendToParent() function?

Ah I see! Thank you!

Hi everyone Im kinda having a weird issue when attempting to echo mathml into my radiobutton value. It seems that a half of the mathml code is actually leaked outside the radiobutton itself. Something like this: [img=http://img32.imageshack.us/img32/8560/capture2jc.jpg] Is there a reason why this is happening? When I attempt to select one of the radio buttons to insert its MathML value into CKeditor, only half of the MathML code ends up being inserted into the editor. Below is the code where I retrieve the MathML and where I believe is the cause of this problem: <?php include ('database_connection.php'); $dbConn = mysql_connect('localhost', 'root', '') or trigger_error(mysql_error(), E_USER_ERROR); // select the database for use mysql_select_db('test', $dbConn); $query_retrieve_expression = "SELECT * FROM math"; $queryResource = mysql_query($query_retrieve_expression, $dbConn) or die(mysql_error()); ?> <table class="hovertable"> <tr> <th>Insert ?</th><th>Expression Name</th><th>Math Expression</th> </tr> <?php while($row = mysql_fetch_assoc($queryResource)) { ?> <tr> <td><input type="radio" name="insert" id="<?php echo $row['mathID']?>" value="<?php echo $row['mathexpression']?>" /> </td> <td><?php echo $row['expressionname']; ?></td> <td><?php echo $row['mathexpression']; ?></td> </tr> <?php } ?> </table> I would appreciate it if anyone could provide some insight on this and point me in the right direction. Thanks.

Hmm I see. Well once again thank you for all your help Adam! You've been really helpful!

Im kinda having a weird issue when attempting to echo mathml into my radiobutton value. It seems that a half of the mathml code is actually leaked outside the radiobutton itself. Something like this: Just curious but is there a reason for this?

I see! Thank you Adam! Just curious but have you had to deal with mathml in the past before?

So I think it should be like this? Parent Window: function sendRichMessage(editorName, message) { CKEDITOR.instances.editor1.insertText(editorName, message); } Child Window: function sendToParent() { var cta=''; var radio=document.getElementsByName("insert"); for(var i=0;i<radio.length;i++) { if (radio[i].checked) { var cta = radio[i].value; break; } } var pta = window.opener.document.getElementById("editor1"); pta.value = cta; opener.sendRichMessage('editor1', cta); self.close(); }

Umm sorry but I'm still not too sure where exactly I should write it in the parent window. var xChildWindow = null; function xWinOpen(sUrl) { // Modify 'features' to suit your needs: var features = "left=100,top=100,width=400,height=400,location=0,menubar=0," + "resizable=1,scrollbars=1,status=0,toolbar=0"; if (xChildWindow && !xChildWindow.closed) {xChildWindow.location.href = sUrl;} else {xChildWindow = window.open(sUrl, "myWinName", features);} xChildWindow.focus(); return false; }

Shouldn't the line CKEDITOR.instances.editor1.insertText( ' line1 \n\n line2' ); be in the child window's sendtoParent function?

Thanks Adam, I'll be sure to try this out later.

How can I achieve that exactly in my code? Should I write that in the parent window or child window? I am not really sure when it comes to this. Thanks.

Brilliant! I had completely left that out. Thank you Adam. The last problem I have is that passing the values into a regular text area is fine. But there are problems when attempting to pass the values into CKeditor text area.

Hey Adam, thank you for replying. I have had somemore progress. This time I am actually able to insert values from the radiobutton of the child window to the parent window. The problem I am facing at the moment is that even if I were to select none of the radio buttons, all radiobutton values from the child window would still be inserted into the text area of the parent window after i click insert in the child window. Below is the updated code of the child window. Child window: "retrievemath.php" <?php include ('database_connection.php'); $dbConn = mysql_connect('localhost', 'root', '') or trigger_error(mysql_error(), E_USER_ERROR); // select the database for use mysql_select_db('test', $dbConn); $query_retrieve_expression = "SELECT * FROM math"; $queryResource = mysql_query($query_retrieve_expression, $dbConn) or die(mysql_error()); ?> <head> <style type="text/css"> table.hovertable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #999999; border-collapse: collapse; } table.hovertable th { background-color:#c3dde0; border-width: 1px; padding: 8px; border-style: solid; border-color: #a9c6c9; } table.hovertable tr { background-color:#d4e3e5; } table.hovertable td { border-width: 1px; padding: 8px; border-style: solid; border-color: #a9c6c9; } </style> <script src="ckeditor/ckeditor.js"></script> <script type='text/javascript'> window.onload = function() { document.getElementById('f1').onsubmit = sendToParent; } function sendToParent() { var cta=''; var radio=document.getElementsByName("insert"); for(var i=0;i<radio.length;i++) { cta+=radio[i].value; } var pta = window.opener.document.getElementById("editor1"); pta.value = cta; self.close(); } </script> </head> <body> <form id="f1" action="retrievemath.php" method="post"> <div> <table class="hovertable"> <tr> <th>Insert ?</th><th>Expression Name</th><th>Math Expression</th> </tr> <?php while($row = mysql_fetch_assoc($queryResource)) { ?> <tr> <td><input type="radio" name="insert" id="<?php echo $row['mathID']?>" value="<?php echo $row['mathexpression']?>" /> </td> <td><?php echo $row['expressionname']; ?></td> <td><?php echo $row['mathexpression']; ?></td> </tr> <?php } ?> </table> </div> <input type="button" value="Insert" onclick="sendToParent();" /> </form> </body>

Update: I have figured out something wrong with my earlier code and changed the sendToParent function. But it still does not work. Child Window "retrievemath.php": <?php include ('database_connection.php'); $dbConn = mysql_connect('localhost', 'root', '') or trigger_error(mysql_error(), E_USER_ERROR); // select the database for use mysql_select_db('test', $dbConn); $query_retrieve_expression = "SELECT * FROM math"; $queryResource = mysql_query($query_retrieve_expression, $dbConn) or die(mysql_error()); ?> <head> <style type="text/css"> table.hovertable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #999999; border-collapse: collapse; } table.hovertable th { background-color:#c3dde0; border-width: 1px; padding: 8px; border-style: solid; border-color: #a9c6c9; } table.hovertable tr { background-color:#d4e3e5; } table.hovertable td { border-width: 1px; padding: 8px; border-style: solid; border-color: #a9c6c9; } </style> <script type='text/javascript'> window.onload = function() { document.getElementById('f1').onsubmit = sendToParent; } function sendToParent() { var cta=''; var radio=document.getElementsByName("insert"); for(var i=0;i<radio.length;i++) { cta+=radio[i].value; } var pta = opener.document.parent_window_formname.editor1('editor1'); pta.value = cta; self.close(); } </script> </head> <body> <form id="f1"> <table class="hovertable"> <tr> <th>Insert ?</th><th>Expression Name</th><th>Math Expression</th> </tr> <?php while($row = mysql_fetch_assoc($queryResource)) { ?> <tr> <td><input type="radio" name="insert" id="<?php echo $row['mathID']?>" value="<?php echo $row['expressionname']?>" /> </td> <td><?php echo $row['expressionname']; ?></td> <td><?php echo $row['mathexpression']; ?></td> </tr> <?php } ?> </table> <input type="button" value="Insert" onclick="sendToParent();" /> </form> </body>

So basically what im trying to do is that retrievemath.php (child window) will be populated with data from database into a html table. For each record there is a radio button that the user can select to insert the value of the selected radio button into a ckeditor text area in test.php (main window). Please forgive me for posting such large chunks of code as I am unable to identify the key problem area since I am a newbie to php and javascript. Thanks. Parent Window "test.php": <head> <script type='text/javascript'> window.onload = function() { document.getElementById('b1').onclick = openChild; } function openChild() { this.disabled = false; xWinOpen('retrievemath.php'); } var xChildWindow = null; function xWinOpen(sUrl) { // Modify 'features' to suit your needs: var features = "left=100,top=100,width=400,height=400,location=0,menubar=0," + "resizable=1,scrollbars=1,status=0,toolbar=0"; if (xChildWindow && !xChildWindow.closed) {xChildWindow.location.href = sUrl;} else {xChildWindow = window.open(sUrl, "myWinName", features);} xChildWindow.focus(); return false; } </script> <script src="ckeditor/ckeditor.js"></script> </head> <body> <form> <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10" ></textarea> <input type="button" id ="b1" onClick="myPopup2()" value="Insert math"> <p onClick="myPopup2()">Insert</p> </body> Child Window "retrievemath.php": <?php include ('database_connection.php'); $dbConn = mysql_connect('localhost', 'root', '') or trigger_error(mysql_error(), E_USER_ERROR); // select the database for use mysql_select_db('test', $dbConn); $query_retrieve_expression = "SELECT * FROM math"; $queryResource = mysql_query($query_retrieve_expression, $dbConn) or die(mysql_error()); ?> <head> <style type="text/css"> table.hovertable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #999999; border-collapse: collapse; } table.hovertable th { background-color:#c3dde0; border-width: 1px; padding: 8px; border-style: solid; border-color: #a9c6c9; } table.hovertable tr { background-color:#d4e3e5; } table.hovertable td { border-width: 1px; padding: 8px; border-style: solid; border-color: #a9c6c9; } </style> <script type='text/javascript'> window.onload = function() { document.getElementById('f1').onsubmit = sendToParent; } function sendToParent() { if (window.opener) { var cta = document.getElementById('<?php echo $row['mathID']?>'); var pta = window.opener.document.getElementById('editor1'); pta.value = cta.value; self.close(); } return false; } </script> </head> <body> <form id="f1"> <table class="hovertable"> <tr> <th>Insert ?</th><th>Expression Name</th><th>Math Expression</th> </tr> <?php while($row = mysql_fetch_assoc($queryResource)) { ?> <tr> <td><input type="radio" name="insert" id="<?php echo $row['mathID']?>" value="<?php echo $row['expressionname']?>" /> </td> <td><?php echo $row['expressionname']; ?></td> <td><?php echo $row['mathexpression']; ?></td> </tr> <?php } ?> </table> <input type="button" value="Insert" onclick="sendToParent();" /> </form> </body>

At the moment it appears I am having problems trying to determine which radio button is selected in the child window and then actually passing its value into the parent window.

Hi everyone, Im a newbie in javascript and php and would like to know if it is possible to insert into parent window textarea from child window using radio button's value in child window. I would greatly appreciate it if someone could assist me on this. Thanks.