CODEWITHSUNDEEP
javascriptphpjqueryajax
zonelsk
zonelsk

Reputation: 245

Tooltip in ajax loaded content

I have this little progress bar with tooltip.

<div class="progress progress-mini tip" title="" data-original-title="70%">
    <div class="progress-bar" style="width:70%;"></div>
</div>

If I put it directly in page it works.

But when i get it with ajax:

$.ajax({
    type: "GET",
    url: "/ajax/getLists.php",
    datatype: "html",
    beforeSend: function() {
        $('#ajaxspinner').show();
    },
    success: function(data) {
        $('#ajaxspinner').hide();
        $('.container-fluid #heading').after(data);
    }
});

PHP file (getLists.php):

<?php
echo '<div class="progress progress-mini tip" title="" data-original-title="70%"><div class="progress-bar" style="width:70%;"></div></div>';
?>

Tooltip doesn't show.

(I'm new to jquery and I can't find solution)

Upvotes: 2

Views: 4038

Answers (3)

Fernando Rybka
Fernando Rybka

Reputation: 258

I assume you are using a tooltip plugin for jquery. And that you followed the demo and initialized it on document ready, is that it? If so, you should initialize your plugin after loading the content. Something like:

$.ajax({
type: "GET",
url: "/ajax/getLists.php",
datatype: "html",
beforeSend: function() {
    $('#ajaxspinner').show();
},
success: function(data) {
    $('#ajaxspinner').hide();
    $('.container-fluid #heading').after(data);
    $.tooltipPluginInit('.tip'); // whatever
}
});

Upvotes: 2

Martin Janeček
Martin Janeček

Reputation: 585

You need to redefine tooltips.

If you have something like $(".tip").tooltip() somewhere, it runs when page loads and registers already-on-page class=tip tooltips. So when you append some using Ajax, they are not registered by .tooltip().

Possible solution: use Livequery - it monitors DOM changes and registers calls on appended elements.

Then you would define tooltips like that:

$(".tip").livequery(function(){
     $(this).tooltip();
});

Upvotes: 2

ajit.prazanna
ajit.prazanna

Reputation: 134

try putting getLists.php file in the same directory with the file that's called ajax.

Upvotes: -1

Related Questions