How to make AJAX request only when it needs to?

[catherinek]

Hi, I'm using qTip to display member profile cards on our site.
The same card could appear on the same page multiple times so I have decided to store the member info in JS so it won't make the same request multiple times.

In my code, I check if the member info already exists in JS in the context.text function.
But the content.ajax would still be triggered and make a new ajax request.
Is there any way to disable the ajax part in such scenario?

JS Code

$(this).qtip({
		overwrite: false,
		content: {
			text: function() {
				if (typeof memberids_by_uname[member.username] != 'undefined') {
					var api = this.qtip();
					api.set('content.ajax', {});
 
					var mid = memberids_by_uname[member.username];
					var content = generate_profile_card(profilecard_data_by_mid[mid].member, profilecard_data_by_mid[mid].mutual_friends);
 
					return content;
				}
				return '<div class="top"><table><tr><td class="avatar">' +
						(member.avatar_img ? '<img src="'+member.avatar_img+'" alt="" />' : '') +
						'</td><td><div class="heading"><a href="'+member.url+'">'+member.username+'</a></div></td>' +
						'</tr></table></div>';
			},
			ajax: {
				url: '/api_proxy/batch/',
				data: {
					calls: [
						{method: 'GET', url: 'members/'+encodeURI(member.username)+'/'},
						{method: 'GET', url: 'members/me/friends/', mutual_with: member.username}
					]
				},
			// ... rest of settings...

[Craig]

Well ajax.once is enabled by default (http://craigsworks.com/projects/qtip2/do...ax/#once). This means the AJAx request is only fired once for the lifetime of the tooltip unless you trigger it by setting an ajax option. So you don't actually have to clear the AJAX stuff with that .set() call, as it won't do anything after the initial grab anywho.

[catherinek]

That only applies to one single tooltip. I'm trying to prevent multiple loading of different tooltips which would load up the same content, ie. one member can leave multiple forum message in one thread and each member should require only one AJAX load.

[Craig]

Ok then move the content calculator and stick it in your each statement instead, then check if its actually present before you define your AJAX object:

JS Code

$('.selector').each(function() {
	var content = memids_by_uname[ username ];
 
	$(this).qtip({
		content: {
			text: content || 'fallback content',
			ajax: content ? undefined || { // Only define AJAX if content is NULL
				url: 'foo.php',
				data: { bar: username }
			}
		}
	});
});