CODEWITHSUNDEEP
javascriptjqueryajaxqtip2
user544079
user544079

Reputation: 16629

Updating qtip contents from ajax call results

I am using a qtip to show on a button click event as

$.ajax({
    url: url,
    data: data,
    method: 'POST',
    success: function(data){
         var Table1 = data.tableName;
         var menu_content = '<div id="menu"><img src="download.png" />'+ Table1 +'</div>';
         $('#button1').qtip({
              content: 'menu_content',
              show: 'click',
              hide: 'click',
         });
    },
    error: function(er){}
});

This is not working .

Upvotes: 0

Views: 274

Answers (1)

klenwell
klenwell

Reputation: 7148

I'm not familiar with qtip but I once encountered a similar challenge with tooltip.

You'd basically want to turn your code inside out and put the AJAX call in a qtip callback. If I'm correct in assuming the content parameter supports callbacks, this might do it:

$('#button1').qtip({
    content: function() {
        // If this is already part of your DOM, select it. Otherwise, you
        // could create a new jQuery element and append it where you want
        // it in your document.            
        var $menu = $('div#menu');
        var $img= $('<img />').attr('src', 'download.png')
        $menu.append($img);

        $.ajax({
            url: url,
            data: data,
            method: 'POST',
            success: function(data){
                var $textSpan = $('<span />').text('data.tableName');
                $menu.append($textSpan);
            }
        });
    },
    show: 'click',
    hide: 'click',
});

Upvotes: 1

Related Questions