Log in

View Full Version : Applying jQuery Resizable on a dynamically generated html data table


jason_kelly
06-26-2013, 02:01 PM
Hello,

I need your help.

I can't seem to able get the jQuery Resizable API to work on my dynamically generated table once it has been generated. It seems the function calls it after it has completed but I get an error "object expected" It supposed to attach itself onto the tr th portions of my table, thereby enabling the user to resize the columns.



<!DOCTYPE html>

<html>

<head>

<!-- LOAD JQUERY LIBRARY: -->
<link href="/jq/images/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="/jq/jquery.min.js" type="text/javascript"> </script>
<script src="/jq/jquery-ui.min.js" type="text/javascript"> </script>

<style type="text/css">
#mstrWrapper {
position: relative;
height: 200px;
width: 800px;
border: 1px solid #808080;

overflow-y: scroll;
overflow-x: scroll;
scrollbar-base-color: #DFDFDF;
scrollbar-arrow-color: #235A81;

}

#mstrTable {
width: 800px;
color: #235A81;
font-family: Arial;
font-size: 9pt;
border: 0px;
}

#mstrTable th, #mstrTable td {
border-bottom: 1px solid #808080;
border-right: 1px solid #808080;
padding: 3px;
}

#mstrTable th {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
width: 110px;
height: 18px;
border-bottom: 1px solid #808080;
border-top: 0px;
}


#mstrTable tbody tr:first-child td {
padding: 3px 3px 3px 3px;
}
#mstrTable tr.normal td {
color: #235A81;
background-color: white;
}
#mstrTable tr.highlighted td {
color: #FFFFFF;
background-color: #235A81;
}

</style>


<script type="text/javascript">
var table
var tbody
var ishigh

function writeit() {

var html = '<table id="mstrTable" cellspacing="0" cellpadding="0" class="ui-widget-content">\n'
html +='<thead>\n'
html +='<tr> \n'
html +='<th>File Number<\/th>\n'
html +='<th>Date1<\/th>\n'
html +='<th>Date2<\/th>\n'
html +='<th>Status<\/th>\n'
html +='<th>Num.<\/th>\n'
html +='<\/tr>\n'
html +='<\/thead>\n'
html +='<tbody>\n'
html +='<tr> \n'
html +='<td>KABC<\/td>\n'
html +='<td>09\/12\/2002<\/td>\n'
html +='<td>09\/12\/2002<\/td>\n'
html +='<td>Submitted<\/td>\n'
html +='<td>0<\/td>\n'
html +='<\/tr>\n'
html +='<tr> \n'
html +='<td>KCBS<\/td>\n'
html +='<td>09\/11\/2002<\/td>\n'
html +='<td>09\/11\/2002<\/td>\n'
html +='<td>Lockdown<\/td>\n'
html +='<td>2<\/td>\n'
html +='<\/tr>\n'
html +='<tr>\n'
html +='<td>WFLA<\/td>\n'
html +='<td>09\/11\/2002<\/td>\n'
html +='<td>09\/11\/2002<\/td>\n'
html +='<td>Submitted<\/td>\n'
html +='<td>1<\/td>\n'
html +='<\/tr>\n'
html +='<tr> \n'
html +='<td>WPPP<\/td>\n'
html +='<td>03\/19\/2003<\/td>\n'
html +='<td>03\/19\/2003<\/td>\n'
html +='<td>In-Progress<\/td>\n'
html +='<td>0<\/td>\n'
html +='<\/tr>\n'
html +='<tr> \n'
html +='<td>WRRR<\/td>\n'
html +='<td>02\/19\/2002<\/td>\n'
html +='<td>02\/19\/2002<\/td>\n'
html +='<td>Submitted<\/td>\n'
html +='<td>5<\/td>\n'
html +='<\/tr>\n'
html +='<tr>\n'
html +='<td>WTTT<\/td>\n'
html +='<td>02\/19\/2002<\/td>\n'
html +='<td>02\/19\/2002<\/td>\n'
html +='<td>In-Progress<\/td>\n'
html +='<td>0<\/td>\n'
html +='<\/tr>\n'
html +='<tr> \n'
html +='<td>WYYD<\/td>\n'
html +='<td>02\/11\/2002<\/td>\n'
html +='<td>02\/11\/2002<\/td>\n'
html +='<td>Submitted<\/td>\n'
html +='<td>7<\/td>\n'
html +='<\/tr>\n'
html +='<tr> \n'
html +='<td>WRRR<\/td>\n'
html +='<td>02\/19\/2002<\/td>\n'
html +='<td>02\/19\/2002<\/td>\n'
html +='<td>Submitted<\/td>\n'
html +='<td>5<\/td>\n'
html +='<\/tr>\n'
html +='<\/tbody>\n'
html +='<\/table>'

document.getElementById('mstrWrapper').innerHTML = html


$( "#mstrTable tr th" ).resizable({ handles: 'e' });

}
</script>


</head>

<body>
<div id="mstrWrapper"></div>

<input type="button" value="LOAD" onclick="writeit()">

</body>

</html>
jscheuer1
06-28-2013, 04:08 AM
Works here in Chrome, what browser are you using?

Also, as I have no idea which versions you are using, I just went to the official jQuery UI page and grabbed the quick access links:


<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

If you're not using those versions, that might make a difference.

Update:

I played around with this a bit more. Seems fine in all browsers except Firefox, which apparently just doesn't allow resizing of table cells (th or td). No error though, just doesn't work.

Oh and older versions of the code do not work in IE, and do give an error, the very one you were mentioning.