I need to get information from parent window on a new window. For that I use--
$("#mains").html($(window.opener.document).find(".dqe").html());
Or
$("#mains").html($(".dqe", window.opener.document).html());
It works good. But if I have some elements that are dynamically added on the parent window, the new window doesn't get that part.
Can anyone please help??
Your function only loads the data from the parent window when it is called.
To keep the document in sync you would either need to poll for new data on the other window (run your code again at an interval). You could also send a message to the new window when changes occur using postMessage() (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).
Off course these are just some options, bottom line is the second window won't know when it should update unless you tell it when to.
Good luck!
Related
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.
I'm playing around with a few ideas for a project, and one of them needs to somehow have communication between 2 different browser pages/windows/tabs. My goal is this:
I have a main page that has a link that opens a new tab/window. In that window, there is the choice to 'navigate' a part of the main page. The issue is, to my knowledge, there are no physical ties between open windows (and no handle on the 'parent' window accessible by the child).
I've been trying to use opener to reference the parent window, but functions and elements are not responding to my calls from the child.
Is there any way for a child/other window to access elements/functions on a parent window?
I'm attempting to avoid using simulated tabs/frames (which would be easy enough to just reference the parent, or window element to accomplish the goal).
Yes, actually that is possible. If you use window.open() in JavaScript, you can use window.opener. and submit whatever requests you would normally make. Like:
window.opener.document.getElementById('id').innerHTML = "hello";
or using jQuery,
$(window.opener.document).find('#tableInParent').html("hello");
Read more here: http://wisercoder.com/javascript-jquery-parent-windows/
JSFIDDLE HERE
I hope this helps!
I have one main window and some child windows. My child window is creating by code behind.
var newWindow = window.open(url, windowName, windowFeatures);
Also I need to add
newWindow.document.onfocusout = this.windowOnUnload;
event to the child. My problem is that, when I need a POST action to this page I again recreate this child window with the same code stated above. But the onfocusout event is not firing. But first time it will fire. Also I am creating the child window is always with the same window name. Please help me finding a solution. Thank you
When you recareate the window, did you mean update its contents with an ajax call? or do you literally close it and then again call window. open, and finally wire the onfocusout event?
If the former is the case, then you will need to rewire the event to the new document that has been obtained using the AJAX call, as the whole document is changed and the previous event handlers for the previous document object are no longer relevant.
Update: could you post all the relevant code that you are using? This is how I can best help.
newWindow.document.onfocusout = this.windowOnUnload; doesn't seem to be the correct way to do what you need. I'm surprised it's working with you. Check this question: Is there a way to detect if a browser window is not currently active?
Is it possible to add a method to a dynamically created iframe's Window object before the requested page starts loading? I would expect to do this though iframe.contentWindow.myMethod = function() { }, however iframe.contentWindow is NULL before the page loads.
I can add the method when the onload event fires, however some pages make an inline call to the method I'm adding. As the browser executes code when received 'method doesn't exist' errors are being raised.
I'm hoping there is a point I can get access to the window object as soon as it is created, before the content is downloaded and processed?
I'm hoping there is a point I can get access to the window object as soon as it is created, before the content is downloaded and processed?
I very much doubt there is. Perhaps you could modify the pages being loaded so that they call the method in the parent window instead, where you know you'll already have the method defined. E.g., instead of them doing:
someMethod("some arg");
they'd do
parent.someMethod("some arg");
...where someMethod is a global function within the opening window.
Live Example | Source | Source of iframe
You can't modify a page before it starts loading - there's nothing there to modify. You can modify it while it's loading - using a <script> tag at the top of <head> that executes directly, rather than waiting until onload. That's about the soonest you can do it, though.
I met one critical problem in java script .....help me to fix this.......
i have written the onload function in one jsp page say login.jsp...
in tat function i used window.open method to open a new window again with the same jsp page login.jsp with disabling the toolbars......
now wat happening is when iam opening same page again in new window obviously tat body onload function will again get called and opens a new window in indefinite........
but what i want is, i have to remove that onload function in tat jsp page once a new window is opened..
Is it possible to remove tat onload function while getting opened in the new window??
could anyone please come up with an idea or little bit of code to do this using java script??
Since it's the same page a quick workaround could be to check if the current window has been opened programmatically, before executing window.open, something like this:
window.onload = function () {
if (!window.opener) {
window.open(/*...*/);
}
};
The above code checks if the window.opener property has a value.
This property contains a reference to the window that opened this current window, and of course if the current window hasn't been opened programmatically, it will contain null.
In conclusion, the window.open method will be invoked only once.
It seems you're going about this the wrong way.
Although there may be a way to intercept the onload function before it actually runs (some javascript libraries can help you to add a handler to the OnDocumentReady event), but maybe you should be doing something serverside. For example - If you want NOT to popup the window in the second window, then one way is to set a querystring parameter telling the server not to add that attribute to the body tag.
You could also check the referrer. If the user is coming from that page, then don't add the attribute to the body tag.
Try having the popup JSP look to see whether you're coming from the problematic page. If so, set window.onload = null -- better yet, don't set anything at all in that JSP.