I have two web pages, parent and child. On click of add in parent I open popup and where i will enter the details and save. Upon save I would like refresh the data in parent Grid. Following are the approcahes i was thinking
Use Session varible on save and use it on parent.
Store the values in DB on child and retrive it.
Serilize the object in Child and assign that to partent hidden varible on refresh de-serilze on server and bind it to the grid.
I would like to know from the group what is the best way to do this. I was thinking of doing the third approcah?
I am using ASP.NET 4.0 and Jquery for popup window.
I would like to do it this way:
OnSave in child page wait for
server response and
if save is successful do
parent.grid.reload (this is very
generic but i hope you get the point)
if save is not successful you can
do some nice exception/error
handling on child page and ask again
for input etc
Best not to refresh the master. User will not expect that and may loose
some state on the master, for example filter/sorting.
Best use window to window communication with window.opener to directly tell master what detail was edited or inserted.
If you want a quick update to the parent window without reloading it, you can access/modify variables/functions in parent window's scope (provided they are on the same domain) with window.parent.somevar = 'x' or window.parent.someFoo(). But you would still need to make a server request from one of the windows in order to store it in DB.
In general (not specifically in asp.net) I would just have the popup send a "refresh from DB" signal in one way or another to its parent (with window.parent).
The advantage of this is that you make sure that the parent gets the actual data that was saved. Otherwise you would need the pop-up to check itself if the save succeeded, and if the object that it wants to send to its parent is actually correct.
Edit: Actually the pop-up should probably check for saving success as another answer says. Still I wouldn't have it do more than call a refresh method on the caller window, unless maybe that refresh is extremely costly.
Related
I've been working on some sort of 'remote controller' window where the child window loads the selling configuration from the parent and after changing the selling configuration and pressing the 'apply' button, the selling configuration is sent back to the parent window.
After googling, I found out that data exchange between the parent and child is available only if both windows are opened under the same http:// domain.(I believe this is because of the unique SSL that every server has.)
then, here's my question: is there anyway that I can exchange data between parent and child window when two windows have different domain?
more details on the situation that I'm stuck on:
I'm trying to make a child window that will allow me to select which metal ores to sell in a petty web game called 'Mr.mine'(mrmine.com)
with the chrome javascript console, I've managed to have some control over the game where I can create such loops that will to the selling instead for me
Originally, if I were to select which ores were to sold, I would have had to manually change an array called 'sellorder' from the java console. This turned out to be quite confusing and frustrating so I wanted to create a child window where I could configure my selling decisions with a much simpler and easy to understand layout.
I succeeded in making such a child window in my github repository and I have confirmed successful data exchange between the parent and child window which are both located in the same github repository.
parent code:
var sellorder=[....] // has some value..
// some codes in between...
function sell(){
var url="https://rawgithub.com/kwagjj/mrmine-macro/master/initializing/sell_window_ver1.0.html"
var w=window.open(url,"sell_window","width=300,height=450");
}
child code:
var loadarray;
window.onload=function(){
loadarray=window.opener.sellorder;}
// ... after some operations..
window.opener.sellorder=loadarray;
Then I tried to implement this child window popup code into mr.mine.
It turned out to be a failure. And I think this is because in this case, the parent and child window doesn't share the same http:// domain.
So this is my situation. If there isn't a direct way of exchanging data between the two windows, I would like to hear any other way to even bypass this problem.
"with the chrome javascript console" (sic) you can also add some javascript to your page (or use an extension like greasemonkey for custom scripting).
On your game add a script with a setInterval function that will call with your server every x seconds. And get the json encoded data of the configuration
On the other side, when validating your configuration, it will use Ajax to store information on your server (i.e. in a file)
To sum up :
In your parent windows, when you modify your configuration, an Ajax call is made to save the new config json encoded in a file on your server
In your child windows with the console (if no reload) or with a userscript extension (like GreaseMonkey) you add a setInterval javascript to load the array from the file on your server.
PS: This is theorical and not an invitation to cheat on a game you like.
I want to be able to send some element that I selected with JQuery to another browser which opened the same page. Like if focus a textfield, the selection to happen on the second browser too. With a server, that's possible, but is there a way to serialize or somehow transfer the element reference (not id, cause not every element has an id)
Not so much transfering, but you can "reveal" your values to a specific browser. Try setting up a conditional statement for browser feature detection, within a ajax request on success() or on done(), to then display your DOM reference for a specific browser. Hope this helps.
I have done some research on this and what i found was in same domain's case you can use
document.getElementById('iframe_id').contentWindow.function_name()
I tried this on cross-domain (just experimenting)
It gave a cross domain error &
Exception: TypeError: Property 'function_name' of object [object Window] is not a function
So I have a three part question
a) It is understandable if I have trouble accessing parent from child (and I am already handling this, using another iframe(from parent's domain) within child iframe).
But why do we have issue accessing child from parent, isn't that the same thing as having a
b) When I debug, using the chrome inspector tool & try to see the value of document.getElementById('iframe_id').contentWindow, I see my function_name under it, but cannot access it by document.getElementById('iframe_id').contentWindow.function_name(). Why is that?
c) How do I successfully call a javascript function in my iframe from the parent(without easyXDM or any other plugin)?
More details:
I am more of looking for two way communication as in, my parent will call a function in iframe that returns a result & based on that result the parent will decide if it wants to redirect or not
I used postMessage. Seemed like a simpler solution.
What I wanted to do:
'beforeunload', send a message to child iframe, receive a response as callback. based on response show message or navigate.
But this was not possible.
This is how I solved it:
Every time a change was made in my child frame, I sent a message to the parent.
I collected these messages & used them on 'beforeunload' to decide if i should navigate or show the message
You can use location.hash polling. Where your parent changes the URL #hash and the child checks for changes in a setInterval loop. http://ajaxian.com/archives/cross-domain-iframe-communication-without-location-polling
You'd be essentially reinventing the wheel with regards to "easyXDM".
Is there a way when Page change location to keep some HTML Element's.
Like a div that will not be re-rendered but keep it's state.
You can find and example like that at Facebook Chat ,you can see that the Chat window does not change it's location or InnerHtml when you navigate to another page.
PS : I have no clue where to start so any documentation would be appreciated.And it would be nice if solution would be XHTML not HTML5
I don't know exactly how facebook chat works, but I do know all chat messages are stored in a database, so you can access them later via messages.
My assumption would be that a Session variable is set letting facebook's UI know what chats you have open, or perhaps its stored in the database as well. In either case, you'd have to use some outside script in order to do this. For sake of ease lets say you'll use PHP, and you'll store the data in a SESSION variable.
/* Storing the variable */
$users = array('user123', 'user456', 'user789');
$_SESSION['chat_windows_open'] = $users;
/* Retrieving the values */
foreach($_SESSION['chat_windows_open'] as $chat) {
/* Use $chat to get the username, query the DB for
the message content, and echo it in whatever form you
wish. */
}
When window.location changes, the page is automaticaly, entirely re-rendered. So, from this point of view, the answer is no. However, this effect can be obtained by using AJAX. Use ajax to make requests to the server while the page does not reload or changes location(window.location is always the same). Here's a good link to start with AJAX:
http://www.w3schools.com/ajax/default.asp
If you still want the page to change it's location, after you've made your ajax request and updated the content on the page, you can use javascript's history.pushState function. However you will have to find a way to make it cross browser(aka. make it work in IE).
I am opening a window and passing set of parameters to it. In this case, I am sending json string. At time, the info is toolarge, and Request-URI Too Large occurs.
window.open('../pssops21/php/createPhonePdf.php?strSelectedItems='
+ strSelectedItems + '&strQBNumbers=' + arrQBNumbers, 'mywindow',
'resizable=1, scrollbars=1, left=80,top=60, width=650, min-height=400')
Window.open does not have option to post. Jquery ajax only posts info retrieves, results and does not open a new window.
Are there any methods to do this?
Thanks.
Unfortunately this is tricky situation in web applications. The limit on the size of a URI is typically dictated by the browser you are using and the option to POST data is not a standard available. As for doing an Ajax post and then "loading" the results, is typically not supported for security reasons.
A workaround I have used in the past is to make it a two-step process. Basically use Ajax to post your json data to the server. As a response, have the server send back some kind of token to retrieve the stored data. Then, use that token as a parameter to the new window you are opening, who can then retrieve the data.
I know it is a little bit more work to get the data over to your new page, but it does eliminate these size/security restrictions, and is a cross-browser safe.
You could open a new window to a temporary page, then POST from that page in the new window using a form filled out by JavaScript in the original page.
You could use a hidden form that has your destination page as its target. Use hidden fields for your post values, and submit the form using the Javascript submit() method.
I believe this will only work if you're trying to redirect the current window, not open a popup, although there may be a way around that restriction as well.
Rather than embedding information to pass to the window in the querystring, you can use javascript directly. Using window.opener on the newly opened window, you can access info from the child page:
var selItems = window.opener.strSelectedItems;
Keep in mind that strSelectedItems in this case would need to be globally scoped in the parent page. To keep things clean, I would consider functions on the main page that will return the information the child page needs.