Recently I started to use the jQuery plugin popBox (
http://plugins.jquery.com/project/popBox). This plugin provides a simple to use popup textarea extension for textboxes. The nice thing is that it works on hidden textboxes as well.
For my hour registration form I have some hidden textboxes to keep the form a bit clean. The form supplies textboxes for each day (see figure).
So for each day you can add hours, comment en log-info. The last two fields are hidden. To edit the comment and/or log-info you just press on the corresponding image.
Because these fields are invisible, you want to have some kind of indication if some text has been entered already or not. So I want to change the 'button'image if some text has been entered.
Raising an event seems to be a hard job, because you don't really access the (hidden) textbox, so their events are not raised. After some search and trial and error I found a solution.
First of all, let me show you how I attached the jQuery popBox plugin to my hidden comment and log-textboxes (see instructions at
http://plugins.jquery.com/project/popBox). The hidden textboxes where called like txtNewMonComment, txtNewMonLog, txtNewTueComment etc.
1. I applied the popBox to all textboxes with class set to 'txtDailyComment':
$(document).ready(function () {
//attach popBox jQuery plugin to all textboxes with class=txtDailyComment.
$('.txtDailyComment').popBox();
});
2. The images that simulates a button are configured like this:
<img alt="Comment" src="/hrt/_layouts/images/DNM.WP.HourRegistrationGeneralForm/message_add.png" onclick='SetTextboxFocus($(this));' id="btnNewMonComment" />
3. I wrote the SetTextboxFocus function to show the content of the corresponding hidden textbox:
function SetTextboxFocus(button) {
var day = button.attr("id").substring(6, 9);
var type = button.attr("alt");
var control = "txtNew" + day + type;
$("input[name=" + control + "]").focus();
}
So far is just like the instructions on the popBox plugin page.
4. The customization starts here and is quit simple. I wrote a function that I want to fire after closing the popBox. You can do whatever you want in this function. For demo reason I just show an alert:
function AfterTextboxUpdate() {
alert('popBox is closed');
}
5. The popBox plugin supports option parameters. So I just add one of myself. I changed the popBox attach as written in step 1 as follows:
$(document).ready(function () {
//attach popBox jQuery plugin to all textboxes with class=txtDailyComment.
$('.txtDailyComment').popBox({ onclose: function () { AfterTextboxUpdate(); } });
});
6. The last step is to edit the popBox1.3.0.js file. Find the part where blur function is fired and add "options.onclose();" inside the if-section:
popBoxContainer.children().blur(function () {
if (change) {
$(this).parent().hide();
$(this).parent().prev().hide();
$(this).parent().prev().prev().val($(this).val().replace(/\n/g, options.newlineString));
options.onclose();
}
});
That's it. When you close the popBox, the AfterTextboxUpdate function will be fired.
Hope this helps you to get even more about this great jQuery plugin.
