TipTip and Ajax loaded content

zomallo's Avatar

zomallo

24 Mar, 2012 08:17 PM

I use TipTip and is great!
I have the problem to apply tiptip effect on images loaded dinamically with Ajax.
I have tried this:
https://drew.tenderapp.com/discussions/tiptip/2

and this is my page:
http://www.vuotoaperdere.org/provatiptip.asp

Why don't work correctly?

Please help me, i'am disconsolate...

PS into the subpage there is only this...
img title="Example text" border="0" src="immagini/3.jpg" (of course into the <>)...

  1. 1 Posted by glasstruten on 30 Mar, 2012 12:00 PM

    glasstruten's Avatar

    I have the exact same issue and would like to see a solution to this.

  2. 2 Posted by Cue on 13 Jun, 2012 01:49 PM

    Cue's Avatar

    Firstly, your applying tipTip to a class selector. Your AJAX response doesn't have this class, nor does tipTip get instantiated to the response object at any time.

    Below is your callback function. You can initially call this function to instantiate tipTip on existing document elements as such:

    var tipTip = function(el, options){
        this.defaults = {
            maxWidth  : "auto",
            edgeOffset: 10,
            keepAlive : false,
            delay     : 100,
            fadeIn    : 400,
            fadeOut   : 100
        };
    
        this.options = $.extend(this.defaults, options||{});
        this.$el = (el instanceof jQuery) ? el : $(el);
        this.$el.tipTip(this.options);
    };
    
    $(document).ready(function(){
        tipTip($(".tiptipClass"));
    });
    

    Given that it's a function, you can apply it as a callback in your AJAX response in your ajax_clienti.js file, as such:

    function stateChangedTabiMexi()
    {
        if (xmlHttp.readyState==4)
        {
            var $obj = $(xmlHttp.responseText).appendTo($("#DatiDettaglioiMexi"));
            window.tipTip($obj);
        }
    }
    
  3. 3 Posted by zomallo on 15 Jun, 2012 01:29 PM

    zomallo's Avatar

    absolutely great!!!!
    Thank you Cue, sincerly

  4. 4 Posted by zomallo on 19 Jun, 2012 11:23 AM

    zomallo's Avatar

    @Cue

    your script is ok but i have tried it in another different mode.
    If my image is into the document, tiptip is OK.
    But if my image is into a table, tiptip effect don't work correctly.

    http://www.vuotoaperdere.org/provatiptip2.asp

    Why? I don't understand

    Thank's a lot

  5. 5 Posted by Cue on 19 Jun, 2012 12:58 PM

    Cue's Avatar

    Because the function is assuming the AJAX is return an image, as was the case in your previous scenario.

    In your new scenario, you need to change your AJAX callback logic to this:

    function stateChangedTabiMexi()
    {
        if (xmlHttp.readyState==4)
        {
            var $obj = $(xmlHttp.responseText).appendTo($("#DatiDettaglioiMexi"+id));
            window.tipTip($('img', $obj));
        }
    }
    

    This assumes your going to apply tipTip to all images in your AJAX response object.

  6. 6 Posted by zomallo on 19 Jun, 2012 02:17 PM

    zomallo's Avatar

    @Cue

    ok, now the image into the table works, but the image that is out don't.
    http://www.vuotoaperdere.org/provatiptip2.asp

    It's possible to apply the tiptip effect to each img into the AJAX loaded page?

    Thank's a lot

    PS This is the code of ProvaTipTip_GetiMexi_tmp.asp file...

    <img title="This is out of the table" border="0" src="immagini/3.jpg" >
    <table cellpadding="2" cellspacing="0" width="100%" >
    <tr>
    <td><img title="This is into the table. Why not?" border="0" src="immagini/3.jpg" ></td>
    <tr>
    </table>

  7. 7 Posted by zomallo on 21 Jun, 2012 05:08 PM

    zomallo's Avatar

    @Cue

    How i can modify this script to apply tiptip effect to ALL images in the page and not only on the images with class="tiptipClass"?

    Thank's a lot Cue

    var tipTip = function(el, options){

    this.defaults = {
        maxWidth  : "auto",
        edgeOffset: 10,
        keepAlive : false,
        delay     : 100,
        fadeIn    : 400,
        fadeOut   : 100
    };
    
    this.options = $.extend(this.defaults, options||{});
    this.$el = (el instanceof jQuery) ? el : $(el);
    this.$el.tipTip(this.options);
    

    };

    $(document).ready(function(){

    tipTip($(".tiptipClass"));
    

    });

  8. 8 Posted by Max on 26 Jun, 2012 07:20 AM

    Max's Avatar

    Ciao,
    devi rifare la chiamata al plugin ogni volta che ricarichi dinamicamente un oggetto che abbia la classe tiptipClass

    Max

  9. 9 Posted by Cue on 26 Jun, 2012 08:53 AM

    Cue's Avatar

    @zomallo

    $(document).ready(function(){
        tipTip($("img"));
    });
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac