Partially update parent page on child page event
Posted By : Shiv Kumar | 18-Apr-2014
I had a requirement that from one of my view another page is opened in new tab.After submitting form(or some other action) on child view, I had to update some part of parent/opener view simultaneously. To do this there are several grails plugin available like "ICE push plugin" and "Grails Event Push Plugin".But I used native javascript to do this as it is easy to use and doesn't require any plugin and dependency to work.
Solution :
Suppose I have a div with id="childMessage" in parent page which I want to update on button click in child page.
So on child Page :
<html>
<body>
<button type="button" onclick="update('Hello')">Click Here</button>
<script>
function update(data){
window.onbeforeunload = reflectChanges(data);
}
function reflectChanges(data) {
//this condition checks if the parent view is open or not.If it is then update operation is performed.
if (window.opener != null && !window.opener.closed)
window.opener.updateParentView(data);
}
</script>
</body>
</html>
On parent View we have to define above called function("updateParentView") like this :
<html>
<head>
<script type="text/javascript" charset="utf-8">
function updateParentView(data){ // In this function you can do anything according to your requirement.
$('#childMessage').html(data)
}
</script>
</head>
<body>
<div id="childMessage"></div>
</body>
</html>
Thanks
Shiv Kumar
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Shiv Kumar
Shiv is an experienced Java Developer with a strong background in multiple technologies. He specializes in defining system architectures to ensure reliable and resilient solutions. He possesses a comprehensive understanding of the latest technologies and has hands-on experience in Core Java, Spring Boot, Hibernate, Apache Kafka messaging queue, Redis, as well as relational databases like MySQL and PostgreSQL, and non-relational databases like MongoDB. He excels in API implementations, Microservices, Web Services development, testing, and deployments. Shiv actively contributes to code enhancements and consistently delivers valuable contributions to various client projects, including Fabtrack, Pando, Pandojo, Digikam, WhatsApp Integration, Croniz, Punchin Application, Script TV, Bhaasha, and more. He demonstrates strong analytical skills and a creative mindset. In addition, he has a passion for reading books and exploring new technologies and innovations.