How to get dynamic content for clueTip popup

The documentation for clueTip is thorough and should be the primary source of information when using clueTip. However there are some topics that are not fully revealed. One such topic is passing dynamic data to an Ajax call, and then modifying the the results when they are retrieved and displayed.

NOTE: All clueTip options are defined at http://plugins.learningjquery.com/cluetip/#options. Please refer to this to learn more about the options used below.

For this sample, imagine you have a number of employee names listed as anchors, and when you click each one you want to see the details for that employee in a popup. We can do this by assigning a common class to these links (we'll use "employeeDetails"), and putting the employee ID into the ID of the anchor tag. To help keep the anchor IDs unique, we'll prefix the employee ID with "employee_". We'll assume the server side code is returning HTML, and that this HTML does not need any further processing before being displayed. And finally, if the user clicks the employee name in the popup, then we'll navigate to an edit page for that employee (interaction with the popup).

1. First, follow the instructions for getting clueTip setup on your page.
2. Set up the link with the name of the Ajax file to be called.
   
<a href="#" id="employee-123" rel="employeeData.php">Employee</a>
OR, from in code:
$(".employeeDetails").attr("rel", "employeeData.php");


   clueTip uses the "rel" attribute to store the file it should call. The attribute used can be changed as an option to the clueTip method, but the default is fine in most cases. Think of the value we specify for the rel attribute to be the same as the "url" property of a $.ajax() call.

3. Next, call the clueTip method
   
$(".employeeDetails").cluetip({
closePosition : "title",
sticky : true,
mouseOutClose : true
});


   The values we have passed indicates we want a "close" link in the title area of the popup, the popup should not close when we move off the triggering element (make it sticky), but it should close if the mouse moves inside the popup then moves outside.

4. Next we need to make sure our extra data is passed to the Ajax call. This is done via the ajaxSettings property.
   
ajaxSettings : {
type : "POST",
data : "id=" + this.id
}


   The ajaxSettings are identical to the $.ajax() method - except the "error", "success", "complete", and "url" properties.

5. Finally, we need to assign the event handler so that when the employee name on the popup DIV is clicked, we show an edit page for that employee. This can be done via the onShow property.
   
onShow : function () {
$("#popupEmployeeName").click( function () {
window.location.href = "editEmployee.php?id=" + this.id;
$("#cluetip-close").click();
return false;
});
}


   This is saying that when the popup is shown, we want to assign a click event handler to our #popupEmployeeName element. This handler will set the location of the web page, close the clueTip popup (by triggering a click event on the Close link), and prevent any further processing of the click. Our browser should navigate to the desired page at that point.

   The onShow property is the right place to assign event handlers, or do any last minute tweaks to presentation of the data - like setting classes or styles.

Putting it all together, our sample call would look like this:

$(".employeeDetails").attr("rel", "employeeData.php").cluetip({
closePosition : "title",
sticky : true,
mouseOutClose : true,
ajaxSettings : {
type : "POST",
data : "id=" + this.id
},
onShow : function () {
$("#popupEmployeeName").click( function () {
window.location.href = "editEmployee.php?id=" + this.id;
$("#cluetip-close").click();
return false;
});
}
});


‹ clueTipupjQuery.UI ›