When I hover the 'homepage_game'-div I want to pass an id ('data-gameid') to a file called game_get_info.php
.
Please how can I accomplish this via Javascript or jQuery? TIA
This is the php-code:
<?php echo '
<div class="homepage_game home_tooltip" data-gameid="'.$game_cat_content['id'].'">
<div class="home_game_image">
<a href="'.$game_cat_content['url'].'">
<img class="home_thumb" src="'.$game_cat_content['image_url'].'" height="85" width="125" alt="'.$game_cat_content['name'].'"/>
</a>
</div>
</div>';
?>
This is the JS/jQuery-code:
<script type="text/javascript">
$(document).ready(function() {
$('.tooltipstered').tooltipster('destroy');
$('.home_tooltip').tooltipster({
trigger: 'hover',
animation: 'fade',
animationDuration: 250,
delay: 1000,
onlyOne: true,
position: 'top',
contentAsHTML: true,
interactive: true,
theme: ['tooltipster-noir', 'tooltipster-noir-customized'],
content: 'Loading...',
functionBefore: function(instance, helper) {
var $origin = $(helper.origin);
if ($origin.data('loaded') !== true) {
$.post('<?php echo $setting['template_url']; ?>/sections/ajax/game_get_info.php, function(data) {
instance.content(data);
});
}
}
});
});
</script>
Try this:
<script type="text/javascript">
$(document).ready(function() {
$('.tooltipstered').tooltipster('destroy');
$('.home_tooltip').tooltipster({
trigger: 'hover',
animation: 'fade',
animationDuration: 250,
delay: 1000,
onlyOne: true,
position: 'top',
contentAsHTML: true,
interactive: true,
theme: ['tooltipster-noir', 'tooltipster-noir-customized'],
content: 'Loading...',
functionBefore: function(instance, helper) {
var $origin = $(helper.origin);
if ($origin.data('loaded') !== true) {
var itemId = $origin.attr('data-gameid');
jQuery.ajax({
type: "POST",
url: "<?php echo $setting['template_url']; ?>/sections/ajax/game_get_info.php",
data: {
itemId: itemId
},
beforeSend: function(){
},
success: function(data){
instance.content(data);
}
});
}
}
});
});
</script>