Avatar billede gbjensen65 Nybegynder
22. december 2013 - 11:28 Der er 1 løsning

Problem med Jquery / Cluetips

Hej,

jeg har et debat forum hvor jeg bruger Cluetips til at vise billeder i original størrelse i pop-up vinduer.
Det virker 99% men hvis et billede har været vist før og en tråd ekspanderes og dermed får sit indhold vist, så forsvinder billedet fra cluetips'en, men overskriften vises!

indholdet i en tråd vises / indsættes via et ajax kald der også opdatere cluetips for at få billeder i tråden vist i cluetips (funktionen upDateCluetips()kaldes når tråden er indsat i sin DIV)

Prøv at se mere her: http://goodbeer.dk/forumtest.php

Koden kan også ses her:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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 ) {
        }
    });
});

I HTML indsættes: <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>

Men når billedet har været vist i en cluetips så ændre cluetips HTML koden til:
<a href="#" class="label4" title="02/05-2013 webmaster"><img src="images/forum/thumb/debat1.jpg" border="0"></a>
og derfor "forsvinder der tekst og billede fra cluetips'en.

Jeg håber der er nogen der vil / kan give et godt råd.
Evt. også at bruge et andet jquery plugin til formålet.
Avatar billede gbjensen65 Nybegynder
06. januar 2014 - 20:44 #1
Jeg har fundet en løsning på problemet, måske ikke den mest elegante, men det virker.

Når en DIV skal opdateres med indhold via et ajax kald, så sender jeg DIV ID med over som en parameter. DIV id indsættes så i class navnet. Et eksempel:
Ajax kald: (id=id123)
var queryString = "?traad=" + id + "&u=" + user + "&dir=" + dir;
ajaxRequest.open("GET", "/aj/showtraad.php" + queryString, true);

HTML kode fra Ajax kald:
<a href="#" class="id123label1" title='02/05-2013 webmaster|<img src="images/forum/debat1.jpg">'><img src="images/forum/thumb/debat1.jpg" border="0"></a>

Opdatering af cluetips, efter opdatering af div'en:
var d="a."+id+"label1";
$(d).cluetip({ajaxCache: true, splitTitle: '|', width: 200});

Dette gør at kun de nye cluetips'er fra den opdaterede div bliver aktiveret. Dem der var på siden i forvejen bliver ikke påvirket.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester