Results 1 to 2 of 2

Thread: Applying jQuery Resizable on a dynamically generated html data table

  1. #1
    Join Date
    Oct 2011
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Applying jQuery Resizable on a dynamically generated html data table

    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.

    Code:
    <!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>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,952
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    Last edited by jscheuer1; 06-28-2013 at 05:28 AM. Reason: Update
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. applying jquery accordion to table and form
    By mickkmg in forum JavaScript
    Replies: 0
    Last Post: 07-12-2012, 11:59 AM
  2. Dynamically created iframes that are draggable and resizable
    By molendijk in forum Submit a DHTML or CSS code
    Replies: 1
    Last Post: 09-15-2011, 05:21 PM
  3. Dynamically applying flex menu to a link
    By bluedog in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-19-2011, 01:40 AM
  4. Replies: 4
    Last Post: 07-10-2008, 06:53 AM
  5. Replies: 5
    Last Post: 07-17-2006, 06:55 PM

Bookmarks

Posting Permissions

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