jQuery character counter inside newly created tooltip

Question

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:

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!

EDIT: You can see a working example here as well: http://jsbin.com/ineja3/3

The character counter works on the original DOM element (which is hidden). But its not being applied to the tooltip.

Answer 1

It 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'm guessing this is because you need to let qTip create the dynamic text-area before you apply maxlength. This is because the $('.text_area') selector will not find your text-area until it exists so it can't attach the feedback code to it. I'm not sure what the implications are for running 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.

Answer 2

The other alternative (& arguably a cleaner way to do it than adding an extra click event to the .tooltip), would be to use the callback functions built into the qTip API (specifically onShow). So change your initialisation 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'});
            }
        }
    });
});