Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    178
    Thanks
    138
    Thanked 0 Times in 0 Posts

    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
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    I don't know which version of jQuery or the UI you are using, but when I take out { handles: 'e' } and leave that line as:
    Code:
    $( "#mstrTable tr th" ).resizable();
    it works ok in Chrome and IE

    Firefox has some weirdness about resizable table heads and refuses to play ball, but the workaround I think was to put divs inside the th's
    Code:
        html +='<th><div>File Number</div><\/th>\n'
        html +='<div><th><div>Date1</div><\/th>\n'
        html +='<div><th><div>Date2</div><\/th>\n'
        html +='<div><th><div>Status</div><\/th>\n'
        html +='<th><div>Num.</div><\/th>\n'
    and apply the resizable to them:
    Code:
    $( "#mstrTable tr th div" ).resizable();

  • Users who have thanked xelawho for this post:

    jason_kelly (07-25-2013)


  •  

    Posting Permissions

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