Setting focus to search box while inside a JqueryUI dialog

Primalpat

Hi all,

First of all, THANK YOU for this amazing plugin! It looks great, performs great, and meets our client's needs. That said, I have a request to focus the search box whenever the user opens a dialog box that contains the datatable. I have been doing some searching and came across a snippet of code that Allan posted:

[code]$('div.dataTables_filter input').focus()[/code]

I have tried this in several places, and I cannot seem to get it to work (It will always focus the "Show x entries"). Here is the code that I've tried (commented out currently):

[code]
$(document).ready(function () {
var oTable;
var $btn = $('#<%=btnStoreSearchJQ.ClientID%>');
var $dlg = $('#StoreSearchDialog');
$dlg.dialog({ autoOpen: false,
height: 340, width: 800,
show: "fold", //show: { effect: 'fold', complete: function(){ $('div.dataTables_filter input').focus(); } },
hide: "fade",
position: { my: "left top", at: "left bottom", of: $btn },
// open: function(){ $('div.dataTables_filter input').focus(); }
});
$btn.click(function () {
var isOpen = $dlg.dialog('isOpen');
if (isOpen) {
$dlg.dialog('close');
} else {
$dlg.dialog('open');
// $('div.dataTables_filter input').focus();
}
return false;
});
oTable = $('#tblCustomerLocations').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../../jQuery/DataTables/JSON/DTServer.aspx",
"aoColumns": [
{ "bVisible": false }, //1st col CustomerLocationID
{ "bVisible": false }, //2nd col CustomerID
{ "sName": "CustomerName", //3rd col CustomerName
"fnRender": function (oObj) {
return "" + oObj.aData[2] + "";
}
},
{ "sName": "CustomerLocationName", //4th col CustomerLocationName
"fnRender": function (oObj) {
return "" + oObj.aData[3] + "";
}
},
{ "bVisible": false }, //5th col CustomerMarketID
{ "sName": "CustomerMarketName", //6th col CustomerMarketName
"fnRender": function (oObj) {
return "" + oObj.aData[5] + "";
}
},
{ "bVisible": false }, //7th col CustomerDistrictID
{ "sName": "CustomerDistrictName", //8th col CustomerDistrictName
"fnRender": function (oObj) {
return "" + oObj.aData[7] + "";
}
},
null, //9th col CustomerLocationShippingCity
null, //10th col CustomerLocationShippingstate
{ "bVisible": false }, //11th col DefaultNurseryLocationID
{ "sName": "NurseryLocationName", //12th col NurseryLocationName
"fnRender": function (oObj) {
return "" + oObj.aData[11] + "";
}
}
]
//,
// "fnInitComplete": function () {
// $('div.dataTables_filter input').focus();
// }
});
});
[/code]

Any help would be greatly appreciated!!

Thanks,

Patrick

Primalpat

Alright, so it seems I have figured this out. Apparently, because of the effect that I am running when my dialog box opens, it caused the .focus() to bug out (would make the effect look glitchy and remove the "Show X Entries" dropdown). The solution is to set a timeout delay on the focus until after the animation has played:

[code]
setTimeout(function () { $('div.dataTables_filter input').focus(); }, 500);
[/code]

So my click event to open the dialog would look like this:

[code]
$btn.click(function () {
var isOpen = $dlg.dialog('isOpen');
if (isOpen) {
$dlg.dialog('close');
} else {
$dlg.dialog('open');
setTimeout(function () { $('div.dataTables_filter input').focus(); }, 500);
}
return false;
});
[/code]