Tutorial: Dynamic content on first load using ajax

[Abrasive]

This will show you a relatively easy way to do dynamic content via ajax, in which the ajax call only happens the first time the tooltip is rendered.

I struggled with finding a solution I was happy with for a while. Most of the dynamic content examples for the qTip 1.0 versions seem to show the content being loaded from urls only, with no data being passed with the request. I was glad to arrive at a simple and fairly straightforward solution.

This also shows how you can use metadata, such as an object id or object type, to dynamically pass that metadata with the ajax request. In this example I use a Ford Explorer and Trek Bike because their associated data could potentially live in separate database tables (such as a `bike` table and a `vehicle` table). When requesting data for them, it passes along their associated id and type, which I placed in the id attribute of their respective div elements. I find this extremely handy when working with ajax that retrieves data from a database.

I use jQuery.post() for the ajax request which just a shorthand version of jQuery.ajax() that sets the method to post.

I used qTip Revision 54 for this example.

HTML Code

<div style="float:left;">
	<div class="tooltip" id="bike_1">Trek 4500 Mountain Bike</div>
	<div class="tooltip" id="vehicle_2">Ford Explorer</div>
</div>

JS Code

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('.tooltip').qtip({
 
		content:{
			text:'placeholder content',		// This will be dynamically over written in the api: section
			title:{
				text:'placeholder title',	// This will be dynamically over written in the api: section
			}
		},
		api:{
			onRender: function(){
				var self = this;
				var url = 'ajax.php';
				var entity_id = jQuery(this.elements['target']).attr('id').split('_')[1];
				var entity_type = jQuery(this.elements['target']).attr('id').split('_')[0];
				jQuery.post(
					url,
					{'entity_id':entity_id,'entity_type':entity_type,'ajax_action':'test1'},
					function(theResponse){	// Callback after the ajax request is complete
						self.updateContent(theResponse,false);	// Replace current content
						self.updateTitle(theResponse,false);	// Replace current title
						return true;
					}
				);
			}
		}
	}).show();
});
</script>

You may need to switch all instances of jQuery to a dollar sign for this to work. I always use jQuery in noConflict() mode because so many javascript libraries want to take control of the dollar sign.