Using ui autocomplete as a dropdown, with type in
April 1st, 2010
1 comment
I had been using an autocomplete plugin by bassistance. 2 months later jQuery UI added autocomplete to their list of widgets. Like many plugins out there I was unable to find an autocomplete that was easy to use for my purposes. The closest I recently came to was the sexy combo plugin. I cant remember why but it was just a tad short of what I wanted to do, and I’m still quite a javascript novice.
I came up with a way to use the jQuery UI autocomplete widget as a <select> that you could also type in something if the choices in the dropdown didn’t fit your needs.
This example uses a local data source, but you can come up with creative ways to use remote JSON sources if you like.
<script type="text/javascript">
$(document).ready(function() {
// dropdown/ auto suggest
$(".ui_dropdown").autocomplete({
minLength: 0,
delay: 0
});
$(".ui_dropdown").click(function(){
var input = $(this);
var inputID = input.attr('id');
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return false;
}
// set source(s)
var myData = '';
if(inputID == 'input1'){
myData = ["foo","bar","hello","world"];
} else {
myData = ["1","2","3","4"];
}
// load source
input.autocomplete({
source: myData
});
// fire search event
input.autocomplete("search", "");
input.focus();
return false;
});
});
</script>
In this script I am using the input id’s to define the data source.
Categories: Programming, jQuery
Cloning table rows and jQuery UI Datepicker()
December 17th, 2009
3 comments
I’m rather new to both javascript and jQuery. I ran into an issue while cloning table rows that had inputs, and jQuery UI datepicker.
The cloned datepicker input would insert the picked date into the original inputs rather than the cloned row.
The inputs in my table rows had no ID’s. So what I found was either jQuery or UI was dynamically creating it’s own DOM id’s for the inputs in the table rows that had the datepicker call. Datepicker also was dynamically inserting a class “hasDatepicker” into the inputs that had the datepicker call.
I resolved this by:
1. Looping through the cloned rows inputs looking for any inputs with the class “hasDatepicker”.
2. Removing the hasDatepicker class from any inputs with that class.
3. Getting that inputs current id, incrementing it by 1, and reassigning it.
4. Re-initializing the datepicker call.
<script type="text/javascript">
$(document).ready(function(){
// -- Clone table rows
$(".cloneTableRows").live('click', function(){
// do the cloning...
// new rows datepicker need to be re-initialized
$(newRow).find("input").each(function(){
// if the current input has the hasDatpicker class
if($(this).hasClass("hasDatepicker")){
var this_id = $(this).attr("id"); // current inputs id
var new_id = this_id +1; // a new id
$(this).attr("id", new_id); // change to new id
$(this).removeClass('hasDatepicker'); // remove hasDatepicker class
$(this).datepicker(); // re-init datepicker
}
});
});
});
</script>
Whats really neat about this particular js, is that you can call it from any table that has an id.
The only thing I have yet to figure out is how to reset the cloned datepicker to use the default class called date format.
Categories: Programming
Free DVD Software through October 31
October 20th, 2009
1 comment
winxdvd.com is giving away DVD Authoring, and DVD ripping software between now and October 31, 2009.
I downloaded and installed as soon as darkmoon told me about it. Thanks for the tip. They installed smoothly on my system, and at the price of FREE you can’t go wrong. Go grab your copies!
Categories: Computing
Javascript: Focus() on a textbox
August 12th, 2009
1 comment
A dirty way to run js script inline and bring focus to an element:
<html>
<body>
<form method="post" action="index.php" id="myForm">
<p> Login: <input type="text" name="pwd" id="pwd" /> </p>
</form>
<script type="text/javascript">document.myForm.pwd.focus();</script>
</body>
</html>
Notice that both the form and form element have an ID
Categories: General Site Maint
Backup your Notepad++ FTP items
August 4th, 2009
No comments
So in addition to reformatting friends and relatives computers, about every 2 years I clean out my own. Each time I have, I’ve lost my Notepad++ FTP synchronize settings.
In Vista they can be found in:
C:\Users\AppData\Roaming\Notepad++\plugins\config\FTP_synchronize.ini
Copy them to backup and replace. In case an update gets hosed, or you are re-installing.
Categories: Computing, Programming