Trying to filter from value in UI tabs

mrbranden

Hi. I am trying to filter a DataTable with a value stored on a page pulled in by UI tabs. It's not working, but I think I know why. Here's my code:
[code]
$(document).ready(function() {
var oTable = $("#results_table").dataTable({
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource":"get_listings.php",
"fnServerData":function (sSource, aoData, fnCallback) {
aoData.push({"name":"city", "value":$('input.city').val() });
$.getJSON( sSource, aoData, function(json) {
fnCallback(json)
});
}
});

$("#city").keyup(function() {
oTable.fnFilter(this.value,2);
});
});
[/code]

And below are my tabs:

[code]



Basic Search
Advanced Search

<!-- tabs -->
<!-- search -->
[/code]

The "#city" input is pulled in via the basic.php file, which UI Tabs loads in for me. But the jQuery script can't seem to find the #city tag (because it's not actually there I think!).

Is there a way to do a search from a form pulled in via ajax (in UI Tabs)? I hope my question makes sense.

Thanks!

allan

Hi mrbranden,

I'm not quiet sure I 100% understand I'm afraid. Where is the input.city element, in a tab? Is it also #city? The tab is being loaded via Ajax when the user clicked between tabs right? And city is in the tab which is not yet loaded? If so there are a couple of options. Firstly consider putting the JavaScript for the tab into the tab (so it is loaded and executed when the tab is loaded - not before!). Another option is to use live events so the event is applied to the element whenit is loaded.

Hope that helps a bit!

Regards,
Allan