Using jQuery to Send Data Back to Parent Popup Window

Is there a way to achieve the following functionality with jQuery: create a popup window that sends a value back to the main window when a link in the popup is clicked, then closes the popup and automatically submits a form in the main window based on the returned value?

I am aware that using jQuery Dialog is a common method for this, but I specifically need a popup window because it must be navigable, and I don't want to use an iframe within the jQuery Dialog.

The popup window will be used to gather multiple values, which will eventually be sent back to the main window as a delimited string. This data collection needs to happen before the main window's form is submitted. If there was a standard design pattern for an "Entity Picker," this would be it.

This should be compatible with IE8, Firefox 3.6, Safari 4, and Chrome 5.

Thank you, Mark

asp.netjavascriptjqueryajaxpopup

Answer №1

Below is the method I used:

let parentElement = $(parent.document.body);
$(parent).find('input#valStore').val(theVal);
$(parent).find('form#myForm').submit();
window.close();

Answer №2

If you've just opened a new browser tab, consider trying the following code:

$("#mylink").click(function(){ 
        value = /* fetch some data */
        window.opener.$("#myform .somehiddenfield").val(value); 
        window.opener.$("#myform").submit();
        window.close(); 
});

IMPORTANT NOTE: Please note that I have not validated this code in any web browser.

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

Approximating Values with JavaScript in Selenium

Hi there! I've been exploring selenium IDE and encountered an issue related to asserting an approximate value. My challenge is to validate a numeric value within an element identified by its id, where the value is in numerical format with commas separ ...

javascriptselenium

Supabase is encountering an issue: 'TypeError: fetch failed'

I'm currently developing a to-do list application using Supabase and NextJS-13. However, when I tried fetching the lists from Supabase, the server returned an error. Error Image The List table on Supabase consists of three columns: id created_ ...

javascriptnext.jssupabasesupabase-databasesupabase-js

Is it possible to pass multiple functions to the parent component in ReactJs if using OnChange() as a prop?

Just getting started with React and trying to pass data from a child component to a parent component. <div className="filter-module"> <i className="fas fa-sign-in-alt icon"></i> < ...

javascriptreactjsreact-propsreact-component

Error in Firefox when converting a string to a date in JavaScript using the format mm-dd-yyyy

Hi, I am encountering an issue with converting a string in the format mm-dd-yyyy into a date object. While it works perfectly fine in Internet Explorer and Chrome, it does not work in Firefox as it returns an invalid date at times. I have also tried using ...

javascriptjquerydatefirefox

Create an excel spreadsheet using HTML tables with the help of jQuery

Upon clicking a button, I aim to generate an excel sheet. Essentially, I am trying to achieve what is being discussed here (Kalle H. Väravas answer). If the following links are not working within Mozilla browser, then maybe my code requires ActiveXObject ...

javascriptjqueryhtmlexcel

Modifying an Object within a for-in loop

Hi there, I'm facing a challenge with updating an object that has child properties in my Angular application. Here is the initial object: $scope.osbStep = { test0Nav : { current : false, comp ...

javascriptangularjs

javascript - The onmessage event will not trigger when using a Java server

I have encountered an issue with my Java server and JavaScript websocket client. Despite trying various solutions from this site, I am still unable to resolve the problem. So, I decided to share my code here in hopes of getting some assistance. The proble ...

javajavascriptwebsocket

Sending information from the client to the server using AJAX in conjunction with a

My apologies in advance if my English is not perfect. I am currently facing issues with sending data to my ExportServlet using ajax. ExportServlet.java public class ExportServlet extends HttpServlet { private static final long serialVersionUID = 67156058 ...

javajqueryajaxservletspost

Retrieving JSON data from outside the React root directory

My current project includes an older javascript/php application with numerous JSON files used to retrieve data from the database. As I plan to migrate some modules to React, I am wondering if it's possible to still fetch data from these JSON files wi ...

javascriptjsonreactjs

Creating types for React.ComponentType<P> in Material-UI using TypeScript

I am currently working with Typescript and incorporating Material-UI into my project. I am trying to define the component type for a variable as shown below: import MoreVert from '@material-ui/icons/MoreVert' import { SvgIconProps } from '@ ...

javascripttypescriptmaterial-ui

"Encountering a form submission error - requested resource not located

I am currently trying to submit a form to an MVC controller using AJAX, where the controller is expected to take a form collection. I came across this helpful resource on Stack Overflow regarding passing formcollection using ajax call to an action. However ...

javascriptjqueryhtmlajaxasp.net-mvc-5

Issue with external variable not being updated properly in success callback

Working through an array of data, I make updates to a variable called commentBody during each iteration. However, even though the variable is modified within the loop itself, whenever I try to access it from inside a success callback, it consistently show ...

javascriptjqueryajax

The process of accessing a file object by using the file path given

Is there a way to retrieve the file object of an image that is stored in my website's folder without using "input type = "file"? The image is already saved on the website. Here is what I have tried so far: var file = new File([""], "../writeto/image. ...

javascript

Issue with Name Resolution in .NET Web Service

Duplicate: This question is identical to another post by the same user on Stack Overflow regarding an issue with incorrect URLs in the WSDL of a .NET Web Service. It is recommended that this post be closed and merged with the original thread. We recently ...

c#.netasp.netweb-servicesasmx

Has the Soundcloud web widget API become obsolete?

I am currently working with the SoundCloud widget API (). My main goal is to retrieve information about the tracks within a set. Unfortunately, it seems like I am only able to utilize the methods widget.getSounds() and widget.getCurrentSound successfully ...

javascriptsoundcloud

Learn how to insert JavaScript code into the head of an iframe using jQuery

My goal is to inject javascript code into the head of an iframe using jquery with the code provided below. var snippets_js='<?php echo $snippets_javascript;?>'; var scriptjs = document.createElement("script"); scriptjs.type = "text/j ...

javascriptphpjquery

Ways to engage with a fixed html page generated by an Express router?

Let me start by mentioning that I am relatively new to working with NodeJs. Currently, I am dealing with a situation where I need to render a static HTML web page (which includes JavaScript code) as a response to a post request. Below is the relevant snipp ...

javascriptnode.jsexpressnodes

Is there a way to verify if a time interval has already been established using Javascript?

I've encountered an issue with a bouncing div that activates every 5 seconds through an interval. As I scroll to the bottom of the page, the div fades out and the interval is supposed to be cleared. However, it seems like there's a problem with ...

javascriptjquerysetintervalclearinterval

What is the significance of utilizing response.json() for accessing JSON objects on both the server and client sides?

Just starting out with the MEAN stack, I've included my API code below where I'm using res.json(random) to send a random password. module.exports.changePass = function (req, res) { console.log(req.body.email) db.user.find({ where: { name: ...

javascriptangularjsjsonexpressmean-stack

Hosting provider overhauls entire site, rather than just updating the UpdatePanel

Some assistance would be greatly appreciated as I'm struggling to identify the root cause of my current issue. Perhaps you possess the solution. The situation is this: I have an asp.net website with an AJAX updatePanel that functions perfectly on my ...

asp.netjqueryupdatepanel