We Keep Coding

Best practice for making a popup window in React

In my React app, I want to create a popup window that renders a table with some data. However, I want to make it render in a separate browser window instance as opposed to a modal that is attached to the app's DOM. Most of my research has led me to third party component libraries that just render an in-DOM modal just in different ways. What is the best way to create my desired effect, where clicking the "Open" button creates a new browser window instance that renders the table component?
Thanks

hmm.. maybe try the window.open() syntax
https://developer.mozilla.org/en-US/docs/Web/API/Window/open

How can one page access a popup window's form data?

Scenario
I have web page, let's call it Window #1, that contains a list of people including their name and email.
There will be a button on this page that user can click to open a new window (Window #2). The user will click the button, and a new window will open and the user will add additional people.
When they are finished adding users in Window #2, they would click "Save." Instead of using a POST to send this form back to the server, I want update the original page and model (Window #1) with the information entered in Window #2.
I'm looking for explanation of how you could solve this solution using combination of the MVC framework and/or JavaScript.
Current Knowledge
I'm fairly new to ASP.NET MVC and JavaScript, so I'm not sure whether this task is possible and what it would entail. I attempted to perform a window.open for Window #2, but then Window #1 doesn't have access to Window #2 and vice versa. I considered partial views as well, but I wasn't sure how that structuring would work.
I've attempted to research this situation, but I'm not entirely sure that my terminology is correct and thus I wasn't able to find much information regarding the topic.
Any help would be greatly appreciated!

You could do the initial load of Window#1 using a traditional MVC Get method. You could also use bootstrap modal for Window#2. You would then use JQuery's post method to send the new users to a Post method in your MVC controller. This method would ideally return something like a JSON objec with an updated list of users. You would then rebuild the list in your DOM when JQuery's Post method returns.
Alternatively, you could look into something like Knockout.js instead of using JQuery's Post method and manually rebuilding the user list. Knockout lends itself very well to scenarios like this.

The child window can reference the parent window. The child window can then reference the DOM of the parent by using window.opener. An example from w3schools:
// Open a new window
var myWindow = window.open("", "myWindow", "width=200, height=100");
// Write some text in the new window
myWindow.document.write("<p>This is 'myWindow'</p>");
// Write some text in the window that created the new window
myWindow.opener.document.write("<p>This is the source window!</p>");
Selectors can be used to modify the parent's DOM in the manner requested from the initial question.

FullCalendar print on iPad

I have been working on this task off and on for awhile trying to find an optimal solution (other than telling users to disable popup blocking) and am stumped.
Essentially how it works is this (I omit code because there is a lot of it and propriety info):
I have an angular app implemented in an angular and utilizes fullcalendar.js who's content I want to print. Inside my angular controller I have the jQuery that manages the calendar itself (don't hit my fingers with a ruler please :) )
I want a specific set of styles when I want to print the calendar, so I have a directive that prepares all the content to be ported, and then use a uniform angular factory that is used for all printing activities. This uniform factory opens a new window that contains all the new styles I want and, via a callback, "cleans up" the HTML, which in my case I use for porting the HTML content of the calendar over to the new window.
So the flow basically is this: User clicks print button -> click event in calendar print directive is invoked, the directive calls the factory. -> Factory opens a new window and ports the content via the callback from the directive and then calls JavaScript's print() to print the window.
The problem I am encountering is this:
The print works fine on PC and Mac, but on iOS safari, the window does not pop up. I found that the issue was because iOS Safari requires all new window popups to be inside a click event.
To get around this, I thought I would add some modification to the uniform factory to suit my case: I would open a new window in the directive's click event, then pass a reference of that window into the factory, which can then use the reference to add the html content to its body. This introduced another issue with iOS Safari in that it stalls javascript execution of parent windows if a child window is open, so once the new window is open, the generation of the HTML and the calling of the factory is stalled until the user switches back to the parent tab. This is the point where I got stumped. Any suggested way to get around these issues? Or would I be stuck telling the user to disable popup blocking?

once the new window is open, the generation of the HTML and the
calling of the factory is stalled...
Can you change so the generation of HTML and factory call is made before opening the new window? Otherwise it sounds like you need to avoid the popup.
If you want to display another view in the same window, use ngInclude.
You can choose to switch the path of the ngInclude to swap the HTML or combine with ngShow to show and hide the correct parts when the user clicks.
It sounds like you use a factory as a parent scope and if so it should be converted to a controller that acts as a global scope above the different views.
If this is on the right track I could make a plunkr out of it.
Also, check out fullcalendar-ui for a premade directive if you want to go towards best practice.
Good luck!

After ~3 times coming and going from this over the course of a month, I finally figured it out.
Inside my directive that prepares the content to be printed, I generate a new calendar, then call the rest of the code (including the factory that opens a new window) inside a document.ready. Having the code inside the ready check seems to cause iOS Safari to think it is no longer directly inside a click event, so it would sometimes block the new window popup. Removing the document.ready check seems to have made it work, and has no ill effect on the other browsers.
I decided to create a function inside the directive for the factory call and call inside a document.ready if not iOS, otherwise just call it, to preserve functionality for desktop browsers.

How can I bind a javascript dialog using Knockout?

I've got a list of data in an observableArray and I want to show it in a javascript dialog window (I'm using jQuery.blockUI if it matters). Unfortunately the dialog seems to come unbound after the page is loaded. The dialog initializes correctly (the data is displayed), but it isn't updating with changes.
There are no Javascript errors and I've moved the binding to after the dialog is generated and added to the document (no effect). I've also tried calling ko.applyBinding on the main div that makes up the dialog but that, for some reason, causes part of the main page to hide (the DOM is there, but they are hidden).
EDIT: I've created a project on jsfiddle that reproduces the problem. The main culprit seems to be wrapping the content of the dialog in a div. If I show the content directly it seems to work (of course I can't do that, the wrappers provide a common style for our dialogs).
I'm recovering from the flu and could easily be missing something obvious, but I've been trying all day and nothing is coming to me. Any ideas?

The problem is that the dialog does not exist in the DOM (despite your calling $(document).append(). You cannot append a div as a child of the document itself). Instead, append the dialog to the body and hide it.
$dlg = $('<div></div>').hide();
$('body').append($dlg);
Works here: http://jsfiddle.net/yL6ds/4/

Javascript: How to refresh the parent window from the child window

The problem is that window.opener does not work in this case. The reason is because it is null. It is null because the child window will go through a few urls before the javascript can run. So without the original child's DOM (ie: access to window.opener), how can I refresh the parent page?

Don't think that would be possible with JavaScript only. The only solution I can think of is using Ajax to poll to an server-side page that indicates if the page has to be refreshed.

You can (kinda):
Hold a ref to the child in the parent.
wait for a while so the child is on the final URL
use the window ref from (1) to call a
function like registerParent(parentWindow) that takes the window
ref.
Store that somewhere and use as window.opener.
This isn't reliable, but it might work well enough. Good luck.

Maybe you should consider different approach, e.g. instead of regular calls you could do ajax in child window. That would preserve reference to parent window. Or maybe you should drop separate window concept altogether and display everything in one window using ext or jquery ui UI elements. Ext example: http://www.danvega.org/examples/extwindow/basicwindow.cfm, jQuery UI example: http://jqueryui.com/demos/dialog/