Obtaining access to JavaScript data from a child element is crucial

A client has implemented a feature on their webpage that detects changes made in a grid of data and prompts the user to save before leaving. If users feel confused or encounter multiple errors, they can simply cancel their changes and start over.

They have incorporated these pages into a login system using iframes. The plan is to introduce a new submenu within the login system for easy navigation through the pages displayed in iframes, replacing the original on-page navigation.

The grids on these pages set flags to indicate when data in a cell has been modified. The page navigation seamlessly checks these flags and alerts users about unsaved data in any of the grids.

The question now arises - how will the parent page's menu identify whether flags have been set by the child pages' grids? Currently, these flags are stored in an array where the index corresponds to the grid number.

Most cells perform this action or call another function which then triggers this process:

--------------------------------------------------------
. . . onchange='make_input_changed(grid_NM)' . . .

-------------------------------------------------------

// example with up to 6 grids on page
var input_changed = new Array('false', 'false', 'false', 'false', 'false', 'false');

// set a flag for each grid indicating changed data
function make_input_changed(grid_NM) { input_changed[grid_NM] = true; } 


-----------------------------------------------------

Is it possible for the parent to access these flags from the child?

Can the child trigger a parent function to monitor changes?

Answer №1

A frame is like a special portal, allowing you to peek into another world.

To explore the hierarchy of windows and frames, you can utilize window.top or window.parent. As long as your frames reside within the same domain, everything should run smoothly.

You have the ability to access variables in another frame:

parent.Frame2.varInFrame2 = 100;

... and even call functions in another frame:

parent.Frame2.notifyLogin(id)

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

Combining Option Value and Name Selection Using React Hooks

Currently, I am facing a situation where I need to retrieve two different values (item.id and item.name) to set the State when selecting an item from my dropdown menu. Right now, I am only able to do this for one value (item.id). Is it possible to achieve ...

Accordion not appearing on the webpage

I'm currently working on implementing a helpful feature at the bottom of my webpage to assist users with navigation. I was thinking of using an accordion as a dropdown helper, but I've been facing some challenges getting it to function properly. ...

Incorporate a different address using $location.path(path); and submit the ng-form

I have a form: <form name="myForm" ng-submit="save(myObject)"> ... <button type="submit" class="btn btn-primary" ng-click="changeLocation('/railway-connection')">Save </button> </form> My goal is to perform two actions w ...

The issue of Ajax response not triggering the ng-click function

When attempting to pass data through an AJAX return, I encountered an issue with a function that writes an ng-click in Angular 1. The code snippet is as follows: $.ajax({ 'method': 'GET', 'url': base_url +&apos ...

"Identify the protocol name (string) based on a specific port number in TCP/UDP communication

Is there a built-in function in any web-oriented language to return protocol names based on port numbers? For example, if we have the following code: protocol = get_protocol_name(22) print protocol We would expect it to print out "ssh". A more detailed ...

Display each div one at a time

I am working on a script that should reveal my divs step by step. However, the current code only shows all the divs at once when clicked. How can I modify it to detect each individual div and unveil them one by one? For example, on the 1st click => expa ...

Creating a string specifically for implementing regular expressions in JavaScript

I'm currently working on a custom jQuery plugin known as jQuery-Faker. This plugin is designed to produce fake data for populating form fields based on their respective field names. One of the tasks I have set out to accomplish is generating phone num ...

What is the reason behind JSLint's preference for x === "undefined" over typeof x == "undefined"?

I'm feeling lost when it comes to JSLint. Initially, my code checked if div:jqmData("me") was undefined in this way: if ( typeof el.jqmData("me") == "undefined" ? el.not(':jqmData(panel="main")').length > 0 : el.not(':jqm ...

Tips on preventing form submission when clicking on another button within the same form

I created a shopping cart page with functionality to adjust the quantity using JavaScript. I have shared some of the HTML code below, <form action="payment.php" method="post"> <div class="qty__amount"> ...

What circumstances could lead to a timeout while executing sequelize in a Node.js environment?

Within my application built with Node.js version 10.15.0, I utilize the sequelize package (version 4.44.3) to establish a connection to a remote MySQL database. This application operates within a Docker container. However, after prolonged usage, I encounte ...

Updating is not allowed during a current state transition, like the one happening in `render` at the moment

Although this question has been asked many times before, I am still struggling to fix my code. It seems like calling setState in this way is causing an issue. I followed the example code from the material-ui website, so this should be easy, right? class ...

Adjust the flexslider to transition to a new slide when hovering over the thumbnails

I have a flexslider with thumbnails like this ; https://i.stack.imgur.com/9bfC2.jpg I am looking to change the slide when the user hovers over the thumbnails. How can I achieve this functionality? Here is the jQuery code I am currently using to set up th ...

Selecting objects using a mouse pointer in Three.js

Is it possible to implement mouse picking on imported 3D models like a .obj file in Three.js? I've found plenty of tutorials for default objects, but I'm struggling to display a sphere at the exact position where the user clicks the model. Can an ...

Transmit JSON data through a REST API request body

Looking to send a JSON request via REST, with client code in Node.js and server code in Golang. The structure of the body is as follows: const query = "{\"query\":\"query {n result: application(id: \"fb7b5992-4d0a-4782-acb7-13ae6cc66 ...

Establish Mongoose query requirement according to the property of the document

Presently, I have a Mongoose Event document with attributes like startTime, endTime, and duration. In my node.js file, I am working on executing a query that fetches all Events where the start time is earlier than the current timestamp, and the end time is ...

Utilizing the state as a condition within the useEffect to update the component

Is there a way to automatically hide the mobile menu when the URL changes in ReactRouter? I have noticed that I get a warning for not tracking mobileOpen as a dependency, but strangely the code still works fine. const Navbar: React.FC<Props> = props ...

AJAX code fetching dynamic content without relying on file loading

When I load my program, the dynamic code does not appear on the page until I reload it again. I attempted to use the onload event in the body to load content from an XML file using AJAX, but it only works after closing and reopening the program, not dynam ...

improve your AJAX implementation in Django

Recently, I implemented some AJAX functionality in a Django application that I have been developing. Coming from a background in Ruby on Rails, I haven't had much experience with pure JavaScript. So, inspired by Rails' partials, I came up with ...

Deliver an intentionally bogus HTTP response using Express

I'm currently working on creating test cases for a web application and I am interested in testing how well the client can handle invalid HTTP responses. Can you provide some suggestions on how to purposely mess up a response so that it is no longer va ...

Ensure that all checkboxes are only selected within a single table

I have a challenge with selecting all check boxes in multiple tables when the header check box is selected. I am attempting to achieve this using jQuery without needing to parse or pass in the table id. Currently, when I select one header check box, all th ...