CODEWITHSUNDEEP
javascriptjqueryevents
flamey
flamey

Reputation: 2379

Keeping textboxes hidden and shown in synch

I've used StickyTableHeaders jQuery plugin to have header of my page-wide table stick to the top. I want to add filter box (regular INPUT text tag) into table's TH. The problem is if I enter the text into the inputbox before the header is cloned (to be "sticky"), the clone doesn't have text I enterd. An vice versa. As far as I can tell there's no event triggered when a html element is hidden/un-hidden. How can I keep the text between original header and cloned "sticky" header synchronized? Either by modifying plugin (I don't know jQuery that well), or non-jQuery way.

<table id="xxx">
    <colgroup>
       <col span="1" style="width: 100px" />
       <col span="1" style="width: 200px" />
       <col span="1" />
    </colgroup>
    <thead>
        <tr>
            <th class="bID">ID</th>
            <th class="bStatus"><span class="statusCol">Status</span></th>
            <th class="bSummary">Summary <input type="text" name="firstname"/></th>
        </tr>
    </thead>
    <tbody>
        <tr class="can">
            <td class="bID">...</td>
            <td class="bStatus">...</td>
            <td class="bSummary">...</td>
        </tr>

EDIT:

jsfiddle.net/tsLxz thanks! after it loads, enter any text in the text box, then scroll down -- text disappears from the box; scroll back up - appears again. i understand why, but don't know how to synch.

Upvotes: 1

Views: 126

Answers (3)

flamey
flamey

Reputation: 2379

Actually, the author of the plugin suggested more elegant solution:

$(document).on('blur', 'th input', function(e){
    $('th input[name="' + e.target.name +'"]').val(e.target.value);
});

Upvotes: 0

rahul maindargi
rahul maindargi

Reputation: 5635

Use this Script... DEMO 

$(function() {
    $('#defectsList').stickyTableHeaders();
});


$(document).on('change','[name=filterBox]',function(){

    $(document).data('Textval',$(this).val());
}); 
$(window).scroll(function(){
          $('[name=filterBox]').val($(document).data('Textval'));
});

NOTE: I am using change event which is fired after the text box is tabbed off. so remember to tab off or focus on some other element before starting scrolling.

Upvotes: 1

Jose
Jose

Reputation: 1140

The problem appears to be the fact you're nesting the <input> element inside the th tag. If you scroll really slowly you'll see it appended to the top of the document. Maybe try using appendTo() from javascript to see if you can dynamically append the content to that particular header (give it an id or a different class name). Just an idea I got from fiddling around with it. Hope it helps.

Upvotes: 0

Related Questions