Results 1 to 4 of 4

Thread: [RESOLVED] Selecting text in a <table>

  1. #1

    Thread Starter
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Resolved [RESOLVED] Selecting text in a <table>

    I'm having trouble selecting text inside a <table>. The <table> is inside a jQuery UI Dialog that I show on a button click on the page. I'm using the following function to select the text inside the <table>, from a button on the Dialog. It works the first time the dialog is shown, but if I close the dialog and re-open it then the "Select All" button fails to select anything.

    EDIT: changed code to sample HTML page. Not sure why the HTML isn't formatting properly.

    HTML Code:
    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8" />
    5.     <title>Test</title>
    6.     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" />
    7.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    8.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    9.     <script type="text/javascript">
    10.         function selectElementText(el, win) {
    11.             win = win || window;
    12.             var doc = win.document, sel, range;
    13.             if (win.getSelection && doc.createRange) {
    14.                 sel = win.getSelection();
    15.                 range = doc.createRange();
    16.                 range.selectNodeContents(el);
    17.                 sel.removeAllRanges();
    18.                 sel.addRange(range);
    19.             } else if (doc.body.createTextRange) {
    20.                 range = doc.body.createTextRange();
    21.                 range.moveToElementText(el);
    22.                 range.select();
    23.             }
    24.         }
    25.  
    26.         function showDialog() {
    27.             "use strict";
    28.  
    29.             var t = $('<table class="data-table"><tr><th>Test1</th></tr><tr><td>Test 1 1 1</td></tr></table>');
    30.  
    31.             $('<div id="table-dialog" title="Table Data"></div>').append(t).dialog({
    32.                 buttons: {
    33.                     "Ok": function () { $(this).dialog("close"); },
    34.                     "Select All": function () { selectElementText($('#table-dialog table')[0]); }
    35.                 },
    36.                 position: "center",
    37.                 modal: true,
    38.                 height: 400,
    39.                 width: "auto"
    40.             });
    41.         }
    42.  
    43.         $(function () {
    44.             $('#button1').click(function () {
    45.                 showDialog();
    46.             });
    47.         });
    48.     </script>
    49.     <style>
    50.         .data-table td, .data-table th {
    51.             border: 1px solid black;
    52.             font-size: x-small;
    53.         }
    54.     </style>
    55. </head>
    56. <body>
    57.     <button type="button" id="button1">
    58.         Show Dialog();</button>
    59. </body>
    60. </html>
    Last edited by tr333; Nov 13th, 2011 at 08:30 PM.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Selecting text in a <table>

    This is failing you:
    Code:
    selectElementText($('#table-dialog table')[0]);
    Use a developer tool like Firebug and watch your markup as you pop up dialogs; when you close a dialog, it's not removed from the page, it just gets hidden. And when you pop the next one, it doesn't unhide the first one, it creates a new one. So on your second dialog you're looking at $('#table-dialog table')[1], not $('#table-dialog table')[0] (which is still present, but invisible).

  3. #3

    Thread Starter
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: Selecting text in a <table>

    Thanks! I was using firebug/dragonfly to check it, but I must have missed this.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  4. #4

    Thread Starter
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: Selecting text in a <table>

    Added one line to the Dialog init to clear out the <div> when closing the Dialog:

    JavaScript Code:
    1. $('<div id="table-dialog" title="Table Data"></div>').append(t).dialog({
    2.                 buttons: {
    3.                     "Ok": function () { $(this).dialog("close"); },
    4.                     "Select All": function () { selectElementText($('#table-dialog table')[0]); }
    5.                 },
    6.                 close: function (event, ui) { $(this).empty(); },
    7.                 position: "center",
    8.                 modal: true,
    9.                 height: 400,
    10.                 width: "auto"
    11.             });
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width