Cluetip "delete" my images after ajax update

Hi,

I have a problem with a dynamic forum where images are displayed in cluetips. If an images have been shown in a cluetip and the forum is updated by a ajax function is only the new images visible in cluetips.

See more here: http://goodbeer.dk/forumtest.php and try to expand a tread by clicking on the magnifier

or read my code here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
">
<html>
<head>
<?php
include("../includes/tinymce3.inc");
?>
<link rel="shortcut icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title><?php echo "$title";?></title>
<link rel="stylesheet" href="jquery/css/custom-theme/jquery-ui-1.9.1.custom.css" />
<link rel="stylesheet" type="text/css" href="c1.css">
<link rel="stylesheet" href="jquery/cluetip/jquery.cluetip.css" type="text/css" />
<?php
include("../includes/java.inc"); ?>
<script src="jquery/js/jquery-1.8.2.js"></script>
<script src="jquery/js/jquery-ui-1.9.1.custom.js"></script>
<script src="jquery/cluetip/jquery.cluetip.js" type="text/javascript"></script>

<script>
$(function() {
$( "#dialog" ).dialog();
});

function upDateCluetips()
{
$('a.title').cluetip({ajaxCache: false, splitTitle: '|'});
$('a.flag').cluetip({ajaxCache: false, splitTitle: '|'});
$('a.label').cluetip({ajaxCache: false, splitTitle: '|' });
$('a.label1').cluetip({ajaxCache: false, splitTitle: '|', width: 200});
$('a.label2').cluetip({ajaxCache: false, splitTitle: '|', width: 300});
$('a.label3').cluetip({ajaxCache: false, splitTitle: '|', width: 400});
$('a.label4').cluetip({ajaxCache: false, splitTitle: '|', width: 500});
$('img.flag').cluetip({ajaxCache: false, splitTitle: '|', width: 180 });
}
jQuery(document).ready(function($){
upDateCluetips();
$("#findit").autocomplete({
minLength: 2,
source: function( request, response){
$.ajax({
type: 'GET',
url: 'aj/search.php',
data: {
'term':request.term
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
response(data);
},
error: function(message){
response([]);
}
});
},
select: function( event, ui ) {
}
});
});

The images is added to the HTML code like this:

<a href="#" class="label4" title="02/05-2013 webmaster|Titel: <strong>Debat Logo</strong>|<img src='images/forum/debat1.jpg'"><img src="images/forum/thumb/debat1.jpg" border="0"></a>

But when the images have been displayed in a cluetip is the HTML code changed to this:

So it is clearly why the images is not displayed inside the cluetip after the ajax update.

This code is run after a ajax update:

$('#tr'+id).html(ajaxRequest.responseText);

var link= '<a href="javascript:ajaxSkjulTraad2('+ id +','+ user +','+ dir +',''+ navn+ '',''+ navn2 +'');" title="Skul indlæg i tråd: '+ navn +'"><div class="felt"><img src="images/close.gif"></div><div class="felt">'+ navn2 +'</div></a>';

$('#keytr'+id).html(link);

upDateCluetips();

But I can't find a solution how to load the cluetip on my updated DIV only ('#keytr'+id)

BR Lars

Topic Participants
lars

Cluetip "delete" my images after ajax update

Cluetip "delete" my images after ajax update

Topic Participants

lars