jQuery Character Counter Inside Newly Created Tooltip
- by Dodinas
Hello all,
I'm having a difficult time figuring this one out. I'm attempting to have a user open a tooltip (using jQuery qTip). What this does is create a "new" tooltip element on the page; it takes it from an existing hidden HTML div on the webpage.
Once this new tooltip is created, it has a character counter that is supposed to dynamically update as the user types in the textbox (which is inside the tooltip).
The "Max Length Character Counter" script can be found here.
However, the "counter" portion is not working inside the newly created tooltip. Any ideas how I can bind this max length character counter to the tooltip?
Here's what I'm working with so far:
function 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 here's what the HTML basically looks like (remember, though, this entire div is "replicated" into a 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. Thanks very much!
