qtip plugin doesn't work with jquery jtemplates plugin

Question

I'm using Ajax to load data.

With help of jQuery jTemplates I load data within Container. I need to apply jqtip plugin to images withing Container, but for some reason it's not working. if it outside works fine.

Any idea why it's not working? maybe give me an idea how I can debug it?

Here is my code

$.ajax({
        type: "POST",
        url: "/json/default.aspx/loaditems",
        data: "{'parameter':'" + parameter + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {                
            ApplyTemplate(msg);    
        }
    });

function ApplyTemplate(msg) {

    $('#Container').setTemplateURL('/scripts/template.htm', null, { filter_data: true });
    $('#Container').processTemplate(msg);

}

<div id="Container">
</div>

here is content of my template.htm page

{#foreach $T.d as post}
        <div class="image_wrap" style="float: left;">
            <a href="{$T.post.url}">
                <img width="175" src="{$T.post.profimage}" title="test" /></a>
        </div>
        {#/for}

here is qtip code

<script type="text/javascript">
        $(function () {


            $('.image_wrap img[title]').qtip({
                position: {
                    corner: {
                        target: 'topMiddle',
                        tooltip: 'bottomMiddle'
                    }
                },
                style: {
                    name: 'cream',
                    padding: '7px 13px',
                    color: '#350608',
                    width: {
                        max: 250,
                        min: 0
                    },
                    tip: true
                }
            });
        });
    </script>

Answer 1

You're running your qtip logic on $(document).ready(). The problem is that because you're loading new markup after the page has loaded, the qtip logic doesn't apply to it.

Try wrapping your qtip logic inside a function, then call the function after you run your AJAX call.

Something like this:

function InitQtip() {
     $('.image_wrap img[title]').qtip({
        position: {
            corner: {
                target: 'topMiddle',
                tooltip: 'bottomMiddle'
            }
        },
        style: {
            name: 'cream',
            padding: '7px 13px',
            color: '#350608',
            width: {
                max: 250,
                min: 0
            },
            tip: true
        }
    });
}

// This will take care of items loaded with the page.
$(function () {
    InitQtip();
}

// This will take care of new items.
$.ajax({
    type: "POST",
    url: "/json/default.aspx/loaditems",
    data: "{'parameter':'" + parameter + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {                
        ApplyTemplate(msg);
        InitQtip();
    }
});