locked
Copy selected text from Popup page RRS feed

  • Question

  • User157772347 posted

    hello,

    <g class="gr_ gr_7 gr-alert gr_tiny gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" id="7" data-gr-id="7">i</g> have a FormView in this FormView insert, <g class="gr_ gr_8 gr-alert gr_tiny gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" id="8" data-gr-id="8">i</g> want to click on a TextBox and a popup page to open with GridView and select an item in this GridView then close that popup and copy the selected text to the TextBox in the FormView.

    How ??

    Tuesday, February 5, 2019 9:44 AM

Answers

  • User-893317190 posted

    Hi ahmedsalahaddin,

    You could use js to get your child window and call its function.

    Below is my code.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:FormView ID="FormView1" runat="server" DefaultMode="Insert">
                <InsertItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text="name"></asp:Label>  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </InsertItemTemplate>
            </asp:FormView>
        </form>
    
        <div class="modal" tabindex="-1" role="dialog" data-backdrop="false">
      <div class="modal-dialog" role="document" >
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
           <iframe src="openedGridview.aspx">
    
           </iframe>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    
    
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    </body>
        <script>
            
            $(function () {
    // show the pop up window var textBox = $("[id*=TextBox1]"); textBox.click(function () { $(".modal").modal(); }) })
    // here please use window.onload , don't use $(function()) window.onload = function () {
    // get the textBox var textBox = $("[id*=TextBox1]");
    // and pass it to the child window
    //document.getElementsByTagName("iframe")[0].contentWindow is the child window document.getElementsByTagName("iframe")[0].contentWindow.bindText(textBox); } </script>

    My child window.

      <script src="../Scripts/jquery-3.3.1.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:GridView ID="GridView1" runat="server"></asp:GridView>
        </form>
    
        <script>
          // define a function for parent to call 
           var bindText = function (element) {
                $("#GridView1 tr:gt(0)").each(function (index, ele) {
                    $(ele).find("td:eq(1)").click(function () {
    // fill the textbox of parent window with the html of current td element.val($(this).html()); }) }) } $(function () {
    // change the gridviwe's second row's css style to pointer $("#GridView1 tr:gt(0)").each(function (index, ele) { $(ele).find("td:eq(1)").css("cursor", "pointer"); }) }) </script>

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 6, 2019 5:15 AM
  • User-893317190 posted

    Hi ahmedsalahaddin,

    You could get the textbox through child page and rebind click event on page load.

    Below is my code.

    Parent page with formview.

        <script>
            
            $(function () {
                var textBox = $("[id*=TextBox1]");
                console.log(textBox);
                textBox.click(function () {
                    $(".modal").modal();
                })
              
               
                
            })
    //provide a function for child page to call, in the function , return the textbox function getTextbox() { return $("[id*=TextBox1]"); } </script>

    Child page with gridview.

     <script>
    
            window.onload = function () {
    // get the textbox through parent page var element = window.parent.getTextbox(); //select trs which are not the first or the last $("#GridView1 tr:gt(0):not(:last)").each(function (index, ele) { $(ele).find("td:eq(1)").css("cursor", "pointer"); }) $("#GridView1 tr:gt(0):not(:last)").each(function (index, ele) { $(ele).find("td:eq(1)").click(function () { element.val($(this).html()); }) }) } </script>

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 12, 2019 5:21 AM

All replies

  • User-893317190 posted

    Hi ahmedsalahaddin,

    You could use js to get your child window and call its function.

    Below is my code.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:FormView ID="FormView1" runat="server" DefaultMode="Insert">
                <InsertItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text="name"></asp:Label>  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </InsertItemTemplate>
            </asp:FormView>
        </form>
    
        <div class="modal" tabindex="-1" role="dialog" data-backdrop="false">
      <div class="modal-dialog" role="document" >
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
           <iframe src="openedGridview.aspx">
    
           </iframe>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    
    
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    </body>
        <script>
            
            $(function () {
    // show the pop up window var textBox = $("[id*=TextBox1]"); textBox.click(function () { $(".modal").modal(); }) })
    // here please use window.onload , don't use $(function()) window.onload = function () {
    // get the textBox var textBox = $("[id*=TextBox1]");
    // and pass it to the child window
    //document.getElementsByTagName("iframe")[0].contentWindow is the child window document.getElementsByTagName("iframe")[0].contentWindow.bindText(textBox); } </script>

    My child window.

      <script src="../Scripts/jquery-3.3.1.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:GridView ID="GridView1" runat="server"></asp:GridView>
        </form>
    
        <script>
          // define a function for parent to call 
           var bindText = function (element) {
                $("#GridView1 tr:gt(0)").each(function (index, ele) {
                    $(ele).find("td:eq(1)").click(function () {
    // fill the textbox of parent window with the html of current td element.val($(this).html()); }) }) } $(function () {
    // change the gridviwe's second row's css style to pointer $("#GridView1 tr:gt(0)").each(function (index, ele) { $(ele).find("td:eq(1)").css("cursor", "pointer"); }) }) </script>

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 6, 2019 5:15 AM
  • User157772347 posted

    Great Coding... exactly what <g class="gr_ gr_31 gr-alert gr_tiny gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" id="31" data-gr-id="31">i</g> needed.

    thanks a lot dear

    Wednesday, February 6, 2019 10:18 AM
  • User157772347 posted

    there is a small problem in which <g class="gr_ gr_32 gr-alert gr_tiny gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" id="32" data-gr-id="32">i</g> couldn't solve in your code.

    if my GridView has paging, it will not select records after <g class="gr_ gr_98 gr-alert gr_tiny gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" id="98" data-gr-id="98">i</g> go to another GridView page.

    also if <g class="gr_ gr_142 gr-alert gr_tiny gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" id="142" data-gr-id="142">i</g> clicked on the sorting of the column it will not <g class="gr_ gr_184 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="184" data-gr-id="184">working</g> for selecting records.

    Monday, February 11, 2019 9:51 AM
  • User-893317190 posted

    Hi ahmedsalahaddin,

    You could get the textbox through child page and rebind click event on page load.

    Below is my code.

    Parent page with formview.

        <script>
            
            $(function () {
                var textBox = $("[id*=TextBox1]");
                console.log(textBox);
                textBox.click(function () {
                    $(".modal").modal();
                })
              
               
                
            })
    //provide a function for child page to call, in the function , return the textbox function getTextbox() { return $("[id*=TextBox1]"); } </script>

    Child page with gridview.

     <script>
    
            window.onload = function () {
    // get the textbox through parent page var element = window.parent.getTextbox(); //select trs which are not the first or the last $("#GridView1 tr:gt(0):not(:last)").each(function (index, ele) { $(ele).find("td:eq(1)").css("cursor", "pointer"); }) $("#GridView1 tr:gt(0):not(:last)").each(function (index, ele) { $(ele).find("td:eq(1)").click(function () { element.val($(this).html()); }) }) } </script>

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 12, 2019 5:21 AM
  • User157772347 posted

    All Solved.... thanks <g class="gr_ gr_20 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="20" data-gr-id="20">alot</g> dear that is all what i wanted

    Tuesday, February 12, 2019 7:33 AM