Column Filters in thead

RRStoyanov

Hello, I put my filters in the the thead part:

This is the table => http://dl.getdropbox.com/u/1742153/table.jpg

and the thead code...

[code]











[/code]

And now I can sort or search, which is pretty cool, but when I click on the input fields, the column below is sorted, so it's look like my inputs also work as a sort. My question is how to make my input to work and not sort, but it same time clicking on the images on the holder outside the input to sort my columns?

Thanks in advance!

allan

Hi RRStoyanov,

The reason for this is that the 'click' event is bound to the 'TH' element, and when you click on the input element, it will propagate the click to the TH. So if you just call stopPropagation() ( e.stopPropagation() ) in your input function event handler, that should do the trick for you.

Regards,
Allan

RRStoyanov

Sorry, can you write me an example, because it's look like I didn't manage to make it, sorry ;(

edit: I don't even find this function stopPropagation

allan

Hi RRStoyanov,

My post did include the example: e.stopPropagation() :-)

Have a look on Google for this ( http://www.google.com/search?q=javascript+stoppropagation ) since it's part of the standard event model.

Regards,
Allan

RRStoyanov

Sorry allan, it was my fault. Even first time it work, but I put it in different place :) Since I have several tables and I use different js files for them (of course everytime I call only the needed one :)), I put your example in one file, and load another :)

Anyway, I do the following thing. I add this function in my global js file:

[code]
function stopTableSorting(e) {
if (!e) var e = window.event
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
[/code]

and on my tables I add this

[code]
$("thead input").click( function (e) {
stopTableSorting(e);
});
[/code]

Everything works fine of course. By the way I found other interesting thing :) If you click over the text in the input field, it doesn't fire the sort function, but if you click in the input where don't have a text, than it sorts.

Anyway, thanks a lot for your work and help, it's amazing!

allan

Hi RRStoyanov,

Nice one! Good to hear that works well for you.

Very interesting about the click on the text being different from the click on the free space. I would actually be tempted to say that was a browser bug... :-)

Regards,
Allan

RRStoyanov

Well, for the input hints I don't use your example (I think there was such here). I use one another, which is again added in my global js file.

[code]
jQuery.fn.hint = function (blurClass) {
if (!blurClass) {
blurClass = 'blur';
}

return this.each(function () {
// get jQuery version of 'this'
var $input = jQuery(this),

// capture the rest of the variable to allow for reuse
title = $input.attr('title'),
$form = jQuery(this.form),
$win = jQuery(window);

function remove() {
if ($input.val() === title && $input.hasClass(blurClass)) {
$input.val('').removeClass(blurClass);
}
}

// only apply logic if the element has the attribute
if (title) {
// on blur, set value to title attr if text is blank
$input.blur(function () {
if (this.value === '') {
$input.val(title).addClass(blurClass);
}
}).focus(remove).blur(); // now change all inputs to title

// clear the pre-defined text when form is submitted
$form.submit(remove);
$win.unload(remove); // handles Firefox's autocomplete
}
});
};

jQuery(document).ready(function($){
$("input:text").hint();
});
[/code]

First I think to add the stopTableSorting function there, but than I decide it's better to have them separated :)