Loading AJAX data for a jQuery tooltip

Question

I have some content which is loaded via AJAX; a UL element with li items. Each li item has a tooltip. I've managed to implement this.

I'm trying to load tooltip content via AJAX for each li item. How I can proceed with this?

This the call I make to load the li items via AJAX:

    //start AJAX request
    $.get(
        bs_url + '/ajax/' + ajax_action + '/', // server-side script
        ajax_params, // data for server-side script
        function(data, textStatus) {
            //alert("Response Data Loaded"); //

            $("li", list_elm).remove();
            $("div#related_questions_container").hide("slow");
//          console.log(data);
            if (data) {
                $("div#related_questions_container").show("slow");
                list_elm.append(data);

                // add the tooltip to AJAX loaded content
                $("ul#related_questions li a").tooltip();
            }
        },
        'html'
    );

How can I now call an AJAX function to load data for each tooltip? I've set a value in the id attribute of the <a> element within each li item which I want to pass on as parameter to the AJAX function that loads the tooltip content.

Here is the HTML partial that is loaded by AJAX for populating the ul element with li items:

<?php
    foreach($this->related_queries_data as $o){
?>
<li><a href="#" title="<?php echo htmlspecialchars($o['oQuery']->getTitle()) ?>" id="id_<?php echo htmlspecialchars($o['oQuery']->getId()) ?>" ><?php echo htmlspecialchars($o['oQuery']->getTitle()); ?></a></li>
<?php
    }
?>

Answer 1

I figured this out by using the this keyword as this refers to the current <a> element that the user is hovering over. Using this I was able to refer to the unique value that was in the id attribute of each <a> element. I then made a jQuery get request to retrieve the content for that particular tooltip.

Here is what my final javascript code looked like:

    //start AJAX request
    $.get(
        bs_url + '/ajax/' + ajax_action + '/', // server-side script
        ajax_params, // data for server-side script
        function(data, textStatus) {
            //alert("Response Data Loaded"); //

            $("li", list_elm).remove();
            $("div#related_questions_container").hide("slow");
//          console.log(data);
            if (data) {
                $("div#related_questions_container").show("slow");
                list_elm.append(data);

                // add the tooltip to AJAX loaded content
                $("ul#related_questions li a").tooltip({
                    content: function(callback){
                        //console.log(this.id);

                        var query_id = this.id.substring('id_'.length)
                        var tooltip_content_ajax_action = 'get-query-info';
                        var tooltip_content_ajax_params = { 'query_id' : query_id}

                        // get html partial for given query_id
                        $.get(
                            bs_url + '/ajax/' + tooltip_content_ajax_action + '/', // server side script
                            tooltip_content_ajax_params,
                            function(data, textStatus) {
                                if (data) {
                                    callback(data);
                                }
                            },
                            'html'
                        )

                    }
                });
            }
        },
        'html'
    );

Update Although this achieved what I wanted, I realised it wasn't the most efficient way of loading the data as everytime a tooltip was triggered it would make an AJAX request for the tooltip content which would result in a significant (2-3 secs) delay before the tooltip content loaded. Therefore, I load the tooltip content in the initial AJAX request that loads the <li> elements, the content is in a div which is hidden by default, I then specify this content in the callback content function of the tooltip plugin. Here is what it now looks like:

    //start AJAX request
    $.get(
        bs_url + '/ajax/' + ajax_action + '/', // server-side script
        ajax_params, // data for server-side script
        function(data, textStatus) {
            //alert("Response Data Loaded"); //

            $("li", list_elm).remove();
            $("div#related_questions_container").hide("slow");
//          console.log(data);
            if (data) {
                $("div#related_questions_container").show("slow");
                list_elm.append(data);

                // add the tooltip to AJAX loaded content
                $("ul#related_questions li a").tooltip({
                    content: function(callback){
                        //console.log(this.id);

                        var tooltip_content_div = $("div#query_" + this.id);
                        callback(tooltip_content_div.html());

                    }
                });
            }
        },
        'html'
    );

The html snippet loaded by the AJAX request:

<?php
    foreach($this->related_queries_data as $o){
?>
<li>
    <a href="#" title="<?php echo htmlspecialchars($o['oQuery']->getTitle()) ?>" id="id_<?php echo htmlspecialchars($o['oQuery']->getId()) ?>" ><?php echo htmlspecialchars($o['oQuery']->getTitle()); ?></a>
    <div id="query_id_<?php echo htmlspecialchars($o['oQuery']->getId()) ?>" class="query_tooltip_content"><!-- set to display:none by default -->
        <div id="query_info">
            <div style="width:50%; float:left;">
                <ul>
                    <li><b>Raised by: </b><?php echo htmlspecialchars($o['oQuery']->getRaisedUser()->getName())?></li>
                    <li><b>Raised on: </b><?php echo htmlspecialchars($o['oQuery']->getRaised()->format('d-m-Y H:i:s'))?></li>
                </ul>
            </div>

            <div style="width:50%; float:left;">
                <ul>
                    <li><b>Assigned to: </b><?php $oUser = $o['oQuery']->getAssignedUser(); echo htmlspecialchars(is_null($oUser)?'-':$oUser->getName());?></li>
                    <li><b>Status: </b><span class="<?php echo $o['oQuery']->getPriority()->getName() ?>"><?php echo htmlspecialchars($o['oQuery']->getStatus()->getDisplayName())?> <?php echo (!is_null($o['oQuery']->getDateQueryClosed()) ? ' on '.$o['oQuery']->getDateQueryClosed()->format('d-m-Y') : '') ?></span></li>
                </ul>
            </div>

            <div style="clear:both;"></div>
        </div></div></li>
<?php
    }
?>