locked
Why does the child window update the wrong parent window RRS feed

  • Question

  • User1253338400 posted

    I have 1 application. I open one tab with the application URL and then click on a button which opens a child window.
    From the child window I can add data which when saved adds the data to a grid on the parent page. So I assume that this child window is assocaiated with this parent window.
    Now I open up a second tab and browse to a document in the application(the application stores rows in a grid).
    Now if i navigate back to the first tab's child window and input data and click save it adds the data to the second tabs data not the first even though
    this child was opened from the first tabs page.

    Should I be giving the popup windows names and associating with the parent ?

    I use the following to open a window

    var newwin = windowOpener("AddData_Frameset.htm", "AddNewData", "status=yes,scroll=auto,width=732,height=550,left=" + xpos + ",top=" + ypos)

    Is there a parmeter I need to add to assocaite it with the parent and only that parent, so when any action is performed on the child it will perform the actions on the correct parent window ?

    Thanks

    Friday, October 28, 2016 1:02 AM

Answers

All replies

  • User-1838255255 posted

    Hi robby,

    According to your description , As far as I know , window.opener method is old method and more prone to error , update information not need so complex . I suggest you use jquery dialog , this method also can realize your requirement . You could update value in dialog then add in element . I make a sample for your reference :

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQuery Dialog Form Example</title>
        <link href="css/dialog.css" rel="stylesheet"> <!-- Including CSS File Here-->
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
        <style>
            h2 {
                text-align: center;
                font-size: 24px;
            }
    
            hr {
                margin-bottom: 30px;
            }
    
            p {
                color: #000;
                font-size: 16px;
                font-weight: 700;
            }
    
            #button {
                border: 1px solid #0c799e;
                width: 250px;
                padding: 10px;
                font-size: 16px;
                font-weight: 700;
                color: #fff;
                border-radius: 3px;
                background: linear-gradient(to bottom,#59d0f8 5%,#49c0e8 100%);
                cursor: pointer;
            }
    
                #button:hover {
                    background: linear-gradient(to bottom,#49c0e8 5%,#59d0f8 100%);
                }
    
            input[type=text] {
                margin-top: 5px;
                margin-bottom: 20px;
                width: 96%;
                border-radius: 5px;
                border: 0;
                padding: 5px 0;
            }
    
            #name, #email {
                padding-left: 10px;
            }
    
            input[type=submit] {
                width: 30%;
                border: 1px solid #59b4d4;
                background: #0078a3;
                color: #eee;
                padding: 3px 0;
                border-radius: 5px;
                margin-left: 33%;
                cursor: pointer;
            }
    
                input[type=submit]:hover {
                    border: 1px solid #666;
                    background: #555;
                    color: #fff;
                }
    
            .ui-dialog .ui-dialog-content {
                padding: 2em;
            }
    
            div.container {
                width: 960px;
                height: 610px;
                margin: 50px auto;
                font-family: 'Droid Serif',serif;
                ;
            }
    
            div.main {
                width: 320px;
                margin-top: 35px;
                float: left;
                padding: 10px 55px 25px;
                background-color: rgba(204,204,191,0.51);
                border: 15px solid #fff;
                box-shadow: 0 0 10px;
                border-radius: 2px;
                font-size: 13px;
                text-align: center;
            }
        </style>
    
        <script>
            $(document).ready(function () {
                $(function () {
                    $("#dialog").dialog({
                        autoOpen: false
                    });
                    $("#button").on("click", function () {
                        $("#dialog").dialog("open");
                    });
                });
                // Validating Form Fields.....
                $("#submit").click(function (e) {
                    var email = $("#email").val();
                    var name = $("#name").val();
                    $("#TextArea1").text("Email:"+$("#email").val() +"Name:"+ $("#name").val());
                    $("#dialog").dialog("close");
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="main">
                <div id="dialog" title="Dialog Form">
                    <form action="">
                        <label>Name:</label>
                        <input id="name" name="name" value="1" type="text">
                        <label>Email:</label>
                        <input id="email" name="email" value="1" type="text">
                        <input id="submit" type="submit" value="Submit">
                    </form>
                </div>
                <h2>jQuery Dialog Form Example</h2>
                <p>Click below button to see jQuery dialog form.</p>
                <input id="button" type="button" value="Open Dialog Form">
                <textarea id="TextArea1" rows="2" cols="20"></textarea>
            </div>
        </div>
    </body>
    </html>
    

    Result :

    Best Regards,

    Eric Du

    Friday, October 28, 2016 6:20 AM
  • User753101303 posted

    Hi,

    And what are you using to get at the parent window? Not directly related but this kind of multiple window design is likely anyway confusing for users (what happens if they close the parent window, they have to switch back etc...). As pointed already you could show what appears to be a child window right into the same window and show/.hide this as needed so that the user stay focused on the same single browser window.

    Friday, October 28, 2016 6:54 AM
  • User1253338400 posted

    H
    I debugged it and what is actually happening is that th first parent windows calls page1.aspx.cs and in there I update a dataset in usercontext.so let's says that page is opened in tab 1 and the dataset is empty now when I open the link in tab 2 it calls page load of page1.aspx.cs and when I view a document in that tab it updates the usercontext with the rows in that document which is 1 row. Then when I go back to tab 1 the dataset of the usercontext has the row of tab 2 then when I add a new row for tab 1 it adds two rows, the new one as well as from tab 2 which is not right.
    It's as if may need to keep a track of the tab associated with the document.is there a way ?

    Also  I found that if I use cookieless="UseUri" in <sessionstate> each tab will be treated as a different session. I actually use cookies in the application so I need to use cookieless="UseCookies" and some how simulate that in the javascript when the page is loaded.

    So would it be possible to creata separate sessions once opening the same web page on 2 different tabs of the same browser ?

    <sessionState mode="InProc" cokkieless="UseUri"></sessionState> would achieve it , but I don't want to display the URL like

    http://localhost/SampleWeb/($(afge34nboi3456jtzl))/default.aspx.

    I would like to use 

    <sessionState mode="InProc" cokkieless="UseCookies"></sessionState>  as my app needs to use cookies and some how simulate the UseUri in javascript.

    Thanks

    Sunday, October 30, 2016 9:10 AM
  • User527778624 posted

    Hi,

    It's as if may need to keep a track of the tab associated with the document.is there a way ?

    Check this site: https://sites.google.com/site/sarittechworld/track-client-windows

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 31, 2016 12:58 PM