[Solved] Passing variables into content: api: data

[nate]

Using v2. Assuming this question is due to only having a surface level knowledge of Javascript.

I have qtip working, and loading content via api, but I'd like to pass along a variable from out of each particular instance, in this case the value of the rel attribute would work just fine.

But when I use

JS Code

$(this).attr("rel")

, nothing comes through. I suppose the $(this) is not in the right context to work?

JS Code

$(".pl-name a").qtip({
		style: {
		      classes: 'ui-tooltip-player-intro-style'
		},		
		content: {
			text: 'Loading...',
			ajax:{
				url:"ajax_player_intros.php",
				data: {
					player: $(this).attr("rel")
					},
				type : "POST",
 
			success: function(api, data){                  
			        console.log(data);
					console.log(this.elements.target.attr('rel'))
				}	
			},		
		},
		position: { 
		   my: 'top left', 
		   at: 'top right'
		}
	});

Thanks in advance for tips/help.

[Craig]

Try wrapping your call in an each() method first, this sets "this" to reffer to the current element within the loop:

JS Code

$(".pl-name a").each(function(){
	var attr = $(this).attr('rel');
 
	$(this).qtip({
		style: {
			classes: 'ui-tooltip-player-intro-style'
		},
		content: {
			text: 'Loading...',
			ajax:{
				url:"ajax_player_intros.php",
				data: {
					player: attr
				},
				type : "POST",
				success: function(api, data){
					console.log(data);
					console.log(attr);
				}
			},
		},
		position: {
			my: 'top left',
			at: 'top right'
		}
	});
});

[nate]

Woohoo! It worked. Thanks so much.

Note: Line two was missing parenthesis after "this", should be:

JS Code

var attr = $(this).attr('rel');

[MyJqueryLife]

This should be a tutorial, This is very useful for creating drop menu's or pop up content (more than what could be put in a title attr)[/code].

JS Code

<style type="text/css">
.TipContent{
	display: none;
}
</style>
<script type="text/javascript">
$(function() {
	$(".toolTip").each(function(){
		var attr = $(this).attr('id');
		$(this).qtip({
			content: $("#show" + attr),
			position: {
				my: 'bottom center', 
				at: 'top center',
				adjust: {
					screen: true,
					resize: true
 
				}
			},
			style: {
				tip:true,
 
				classes: 'ui-tooltip-blue ui-tooltip-shadow'
			},
			hide: {
				fixed: true
			}
		});
	});
});
 
</script>

JS Code

<div class="toolTip" id="Tip1">
<strong>What Ever</strong>
</div>
<div class="TipContent" id="showTip1">Pimping</div>

It took me forever to figure out the each, and only because I found it in the forums.

[Craig]

Also just a quick FYI, as of the latest commits you can also use a custom function for your content so you don't need to use an .each() loop!

JS Code

$(function() {
   $(".toolTip").qtip({
         content: function() { return $("#show" + $(this).attr('id')); },
         position: {
            my: 'bottom center', 
            at: 'top center',
            adjust: {
               screen: true,
               resize: true
 
            }
         },
         style: {
            tip:true,
 
            classes: 'ui-tooltip-blue ui-tooltip-shadow'
         },
         hide: {
            fixed: true
         }
   });
});

Enjoy!

[MyJqueryLife]

Maybee you can help me, but in the show/hide event how do i access the id $(this).attr('id')

JS Code

$(function() {
   $(".toolTip").qtip({
         content: function() { return $("#show" + $(this).attr('id')); },
         position: {
            my: 'bottom center', 
            at: 'top center',
            adjust: {
               screen: true,
               resize: true
 
            }
         },
         style: {
            tip:true,
 
            classes: 'ui-tooltip-blue ui-tooltip-shadow'
         },
         hide: {
            fixed: true
         },
		 events: {
			  show: function(event, api) {
				 alert ($(this).attr('id'));
			  },
			  hide: function(event) {
				 alert ($(this).attr('id'));
			  }
		 }
   });
});