While using strutst html tags, how can I call onclick event on submit button?

Question

I have parent page where there is an element. Onclick of that element popup window comes. On popup window there is one textbox and submit button. Now I want to refresh parent page when submit button on popup window clicked. I have solution to refresh parent page:

window.onload = function()
{
  window.opener.location.reload();
}

I have added this script in popup jsp page. So whenever I click on element on parent page, popup window comes and parent page gets refreshed(want to skip this), then I add some text in textbox on popup and submit the data, since it is submit button popup again reloads and parent page gets refreshed(which is expected to happen). Since I am using window.onload on popup page, it gets refreshed twice, I want to skip first refresh. So I decided to perform refresh on click of submit button. Popup page JSP code:

<td align="center">
 <html:submit styleId="btn_add" property="submitButton" onclick="formConfirmOff();" value="Add" />
</td>  

Another solution I was trying to skip first refresh:

document.getElementById("btn_add").onclick = function(){
        window.opener.location.reload();
    }

But using above script it gives me error that cannot set property onclick of null so it may be because script is getting executed before DOM loads. so I added script in

window.onload = function(){
        document.getElementById("btn_add").onclick = function(){
            window.opener.location.reload();
        }
    }

But when did this shows Confirm Navigation dialog with options Leave this page and stay on this page. What may be the issue. Does the order of function passed to onclick matters ? I simply want to refresh parent page when data is added on popup child page using submit button.

EDIT:

$(document).ready(function() {
        $("#frm_addSpeedData").submit(function(event) {  
        //event.preventDefault();
        $.ajax({
             type: "POST", //chose your request type method POST or GET
              url: "/webapp/addSpeedDataAction.do", // your struts action url
              data: $(this).serialize(),
              success: function() {
                window.opener.location.reload(); // callback code here
              }
            })
        })
    });

Sometimes this code works but sometimes not. Means when popup opens I submit the data on popup. Then on success parent window gets refreshed. But still I can not see updates on parent page. what may be the issue ?

Answer 1

You will need to do this manually using AJAX call to your server and on successful execution you will refresh your parent page.

Below is example of using JQuery Ajax :

<script type="text/javascript">
$(document).ready(function() {
  $("#form_selector").submit(function(event) {  
        event.preventDefault();
        $.ajax({
             type: "POST", //chose your request type method POST or GET
              url: "Your_Action", // your struts action url
              data: $(this).serialize(),
              success: function() {
                window.opener.location.reload(); // callback code here
              }
        })
   })
});
</script>  

Here is JavaScript version :

var url = "/webfdms/addSpeedDataAction.do";

xmlHttp.open("GET", theUrl, true);
xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xmlHttp.overrideMimeType("application/octet-stream");
xmlHttp.responseType = "blob";

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == xmlHttp.DONE) {
        if (xmlHttp.status == 200) {
            window.opener.location.reload();
        }
    }   
};
xmlHttp.send();