Transferring data from a child window to its parent container

My situation involves a parent web page where I open a new window using JavaScript. The new window is an ASP.NET server-side page that needs to save data in the database and return an ID after saving it. Now, the challenge is passing this ID from the child server page back to the parent's JavaScript.

I essentially require the child server code to: 1) Return the value to the JavaScript code of the parent page 2) Close itself

What would be the best approach to achieve this?

Answer №1

Declare a variable in the parent page:

let databaseID;

Once the database call is completed from the opened window, add this code inside the loaded event of the opened window (or ready event if using jQuery or another library):

window.opener.databaseID = <%= newID %> 
// You can adapt this based on your framework's approach :-)
window.close();

You can also invoke a global function on the parent page utilizing the same method.

In the "parent" page:

function handleNewDatabaseID(databaseID) { alert("I received an ID! Here it is: " + databaseID); }

And in the opened window:

window.opener.handleNewDatabaseID(<%=newID%>);

Answer №2

In the event that you find yourself in the secondary window and your main window contains a variable named childResult:

window.opener.childResult = "insertYourIdHere";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Change this php code to .net format

I don't have much experience with PHP, so I'm not entirely sure what's happening here. Can someone assist me in converting the following code to .NET? PHP Process Page: <?php $Name = $_GET["Name"]; $Message = $_GET["Messag ...

Encountering errors while attempting to update stored information on a consistent basis

I am encountering a very frustrating error while attempting to remove a warning and update it in my database. Despite following what should be the correct syntax, an error persists. The goal is to decrement the user's warning count by 1 and reset the ...

Interactive elements embedded within an image - digital board game

I'm currently working on integrating a board game into React, and I am facing some difficulties in figuring out how to translate the board squares shown in the image into data. Is there a method through which I can assign unique IDs to each square di ...

My Discord bot powered by Discord.js is being unresponsive to commands

Hello, I'm facing a major issue with my command handler that I've been struggling with for a while now. The problem is that my bot doesn't respond when I try to use a command. I've tried various methods from YouTube but none of them see ...

Get rid of the spaces in web scraping <tr> tags using Node.js

I've encountered a problem that goes beyond my current knowledge. I'm attempting to web-scrape a specific webpage, targeting the <tr> element in nodejs. Although I can successfully retrieve the content, it seems that the format is not as cl ...

Having difficulty with sorting an array of objects

I am currently facing an issue in React where I have an array of objects with a createdAt attribute that I need to sort. Despite my efforts, the sorting doesn't seem to be working correctly as the output is not in the expected order. I have included t ...

Retrieving rows from a MySQL table that contain a specified BIGINT from an array parameter

I've encountered a problem with mysql while using serverless-mysql in TypeScript. It seems like my query might be incorrect. Here is how I am constructing the query: export default async function ExcuteQuery(query: any, values: any) { try { ...

What is the reason IE7 does not recognize these two strings as equal?

My event handler is designed to remove an element from a list if the corresponding checkbox is unchecked. When the checkbox is clicked, I first capture the value of the label associated with it: var label = $(this).next().html(); Next, I loop through the ...

Organize an array based on two criteria using Angular

How do I sort first by payment and then by amount in Angular? While in C#, I can easily achieve this with array.orderBy(x => x.payment).thenby(x => x.amount) Is there a similar method or function in Angular for sorting arrays? I have explored the A ...

Achieving consistent outcomes across various devices: What's the secret?

Hey there, I am facing an issue with my form page that I created using HTML, CSS, and Javascript. It looks good on my computer but appears messy on a mobile phone. The elements are getting out of the white box (div) making the entire page look chaotic. Sin ...

Locating all elements on a webpage that are either above or below a specific element, capturing those that intersect visually

Is it possible to locate all the additional HTML elements that a particular element overlaps with, is positioned under, or intersects with? My goal is to ensure that this element is displayed above every other element. I am looking to identify all interse ...

Updating @Html.DisplayFor item following a successful ajax request

Attempting to update a value on my view, I seem to have the correct path, but the update only occurs when I reload the entire view. Here is the HTML: <table class="table"> <tr> <th> @Html.DisplayNameFor(model =&g ...

parsing string to extract key/value pairs

Currently, I am extracting key/value pairs from the body text of incoming emails. Here is an example of an email body: First Name: John Last Name: Smith Email : [email protected] Comments = Just a test comment that may span multiple lines. ...

Next.js App encounters a missing API route (The requested page is not found)

I have been working on a Next.js app and I created an api route for sending emails. Everything is functioning properly in my development environment. However, after deploying to production, I encountered a 404 error with the message "The page could not b ...

Adjusting the Size of an HTML Slideshow

While designing a homepage for my band, I encountered an issue when trying to integrate a slideshow element from an external source. The size of the slideshow is fixed at 600 x 300px and cannot be adjusted. Additionally, I found it challenging to position ...

Having trouble retrieving information from ajax to php

I'm struggling to understand why this code is not functioning as expected: idcurso= res[0]; idusuario= res[1]; semana= res[2]; fecha=res[3]; asistencia= true; $.ajax({ type: "POST", url: '/test/7/tomarasistencia.php', data: { ...

Laravel's Vue component is experiencing issues with loading Axios response data

Hey everyone, I hope you're all doing well! I'm facing a bit of an issue with passing data from an axios response to the data property. The data is successfully fetched from the database and displayed in the console, but when I try to display it ...

How can I gather information from members who have already signed up?

I have a form that submits data to the Angular Firebase database. Once the form is submitted, I want to display the previously submitted data in the form if the user signs in again. Below is my .ts file: import { Component, OnInit } from '@angular/c ...

Can you provide an example and explain the functions `getOptionSelected` and `getOptionLabel` in Material UI?

While going through the Mui Documentation, I came across the Autocomplete component section and found two interesting props: getOptionLabel and getOptionSelected. Although I read their definitions, I'm still struggling to grasp them fully. Can someone ...

Is invalid HTML causing issues with Backbone.js templating in Phonegap?

Summary: When my template file contains valid HTML code, it does not display in Phonegap. The structure of my index.html file is as follows: <body onload="onBodyLoad()"> <div data-role="page"> <a href="#login" id="clickme">C ...