Making ajax call and showing contents in qtip

Question

I am writing code for a dropdown list. The dropdown list is being populated from the data from the database. So I am making 2 ajax calls one is on event onmouseover to populate the contents of dropdown list and the other on selection of specific option making ajax call to bring related contents on the screen.

Now I want to make another ajax call to get the contents which can be populated on hovering over the specific option. The contents got from ajax call can be displayed in the small dialog box. For achieving this I have installed the qtip libraries.

Problem

I am not getting how the ajax call be made. Which even will be appropriate for achieving this? I know the qtip is loaded onload of the page. But since I want to make ajax call to get the contents of the message to be shown on hovering over the option. Any suggestions?

I have also read somewhere that you can't make more than 2 ajax calls at a time.

** The contents for the 3 ajax calls are different. And I have separate JSP files for each of them.

Answer 1

You could do this

$('.link').mouseover(function(){
    $.ajax(
        /* Retrieve de options for the select and fill each 
        title attribute with the information*/);
        url: "retrieveinfo.jsp",
        type: "GET",
        data: ({id : 'itemsId'}), //pass the data in JSON form
        dataType: "html",
        success: function(msg){   //msg contains the html output or you could request XML (or JSON)
            $('#info').html(msg);
            NFinit();
            tooltip.init();
        }
});

That would make one AJAX call, populate the select and init niceforms and qtip.

Answer 2

When you make your AJAX call to get the dropdown list content, you can also return the descriptions you want to display for each list item and affect them to the corresponding qtip.

The qtip will show onmouseover, and with the description you have set when populating your dropdown list.