Question

I am building a bubble tooltip that is supposed to show user profile info when cursor is hovered over user’s name. I have got it to work with hard coded text , however when I try to populate the tooltip with dynamic data using AJAX request, it just does not return anything.

The data to retrieve is in file process.cfm. The file looks like this:

<div class="personPopupResult">Test text</div>

The code that calls the file is as follows:

$.ajax({  
    type: 'GET',  
    url: 'process.cfm',  
    data: '?id=' + currentID,  
    success: function(data) {  
        var text = $(data).find('.personPopupResult').html();  
        $('#personPopupContent').html(text);  
    }  
});

Any ideas why this does not work would be greatly appreciated.

Thanks.

EDIT:

 $.ajax({
            type: 'GET',
            url: 'process.cfm?=id' + currentID,

            success: function(data){

                $('#personPopupContent').html(data);

                if ($(data).find('.personPopupResult').length) {
                    var text = $(data).find('.personPopupResult').html();
                    $('#personPopupContent').html(text);
                }

            }
        });

Code works, but displays everything in process.cfm page, not only .personPopupResult div.

Answer 1

Try this:

$.ajax({  
    type: 'GET',  
    url: 'process.cfm?=id' + currentID,   

    success: function(data) {  
        //actually here you should better write following
        //$('#personPopupContent').html(data); 
        // but if not works try this
        if ($('#personPopupContent').length)
        {
          alert(' $(#personPopupContent) not found!');
        }
        if ($(data).find('.personPopupResult').length)
        {
        var text = $(data).find('.personPopupResult').html();  
        $('#personPopupContent').html(data);  
         }
       else
        {
        $('#personPopupContent').html('Ups error here!');  
       }
    }  
});