-
Nov 13th, 2011, 07:54 PM
#1
[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:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Test</title> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <script type="text/javascript"> function selectElementText(el, win) { win = win || window; var doc = win.document, sel, range; if (win.getSelection && doc.createRange) { sel = win.getSelection(); range = doc.createRange(); range.selectNodeContents(el); sel.removeAllRanges(); sel.addRange(range); } else if (doc.body.createTextRange) { range = doc.body.createTextRange(); range.moveToElementText(el); range.select(); } } function showDialog() { "use strict"; var t = $('<table class="data-table"><tr><th>Test1</th></tr><tr><td>Test 1 1 1</td></tr></table>'); $('<div id="table-dialog" title="Table Data"></div>').append(t).dialog({ buttons: { "Ok": function () { $(this).dialog("close"); }, "Select All": function () { selectElementText($('#table-dialog table')[0]); } }, position: "center", modal: true, height: 400, width: "auto" }); } $(function () { $('#button1').click(function () { showDialog(); }); }); </script> <style> .data-table td, .data-table th { border: 1px solid black; font-size: x-small; } </style> </head> <body> <button type="button" id="button1"> Show Dialog();</button> </body> </html>
Last edited by tr333; Nov 13th, 2011 at 08:30 PM.
-
Nov 13th, 2011, 09:11 PM
#2
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).
-
Nov 13th, 2011, 09:31 PM
#3
Re: Selecting text in a <table>
Thanks! I was using firebug/dragonfly to check it, but I must have missed this.
-
Nov 13th, 2011, 09:37 PM
#4
Re: Selecting text in a <table>
Added one line to the Dialog init to clear out the <div> when closing the Dialog:
JavaScript Code:
$('<div id="table-dialog" title="Table Data"></div>').append(t).dialog({
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Select All": function () { selectElementText($('#table-dialog table')[0]); }
},
close: function (event, ui) { $(this).empty(); },
position: "center",
modal: true,
height: 400,
width: "auto"
});
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|