JQuery character counter inside newly created tooltip
It's hard for me to figure this out. I am trying to open a tooltip to the user (using jQuery qTip). This means that a "new" tooltip element is created on the page; it takes it from the existing hidden HTML div in the webpage.
Once this new tooltip is created, it has a character counter that should dynamically update as the user enters text into the text box (which is inside the tooltip).
The "Max. Character length counter" script can be found here .
However, the "counter" part does not work inside the newly created prompt. Any ideas how I can bind this max length character to a tooltip?
This is what I have been working on so far:
load_qtip(apply_qtip_to) {
$(apply_qtip_to).each(function() {
$(this).qtip({
content: $(".tooltip-contents"), //this is a DIV in the HTML
show: 'click',
hide: 'unfocus'
});
});
}
$(document).ready(function() {
load_qtip(".tooltip");
$('.my_textbox').maxlength({
'feedback': '.my_counter'
});
});
And this is what the main HTML looks like (remember, however, that this entire div is "replicated" into the new tooltip):
<div class="tooltip_contents">
<form>
<div class="my_counter" id="counter">55</div>
<textarea class="my_textbox" maxlength="55" id="textbox"></textarea>
<input type="button" value="Submit">
</form>
</div>
Any direction / suggestions on this would be great as I am completely lost. Many thanks!
EDIT: You can see a working example here too: http://jsbin.com/ineja3/3
The character counter runs on the original DOM element (which is hidden). But it doesn't apply to a prompt.
a source to share
This worked for me when I changed the qTip live handler to look something like this:
$(".tooltip").live('click', function(e) {
e.preventDefault();
$('.text_area').maxlength({
'feedback' : '.counter'
});
});
I guess this is because you have to let qTip create a dynamic text area before applying maxlength. This is because the $ ('. Text_area') selector won't find your text area until it exists, so it won't be able to attach any feedback code to it. I'm not sure what is meant to run the maxlength function every time someone clicks on the tooltip link, but you should be able to set it to only run once using a boolean flag or something.
a source to share
Another alternative (perhaps a cleaner way of doing this than adding an extra click event for .tooltip
) would be to use the callback functions built into the qTip API ( in particularonShow
). So change your initialization code to:
$(apply_qtip_to).each(function() {
$(this).qtip({
content: $(".tooltip-contents"), //this is a DIV in the HTML
show: 'click',
hide: 'unfocus',
api: {
onShow: function() {
$('.text_area').maxlength({ 'feedback' : '.counter'});
}
}
});
});
a source to share