Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Ajax Tooltips with data-id attribute

    Hello,

    I´m using qtip2.com ajax tooltips.

    I´ve a folder with my ajax files inside, which are called like: ajaxContent1.html, ajaxContent2.html and so on. I want to get the files inside the tooltip with the data-id attribute so it looks like:

    Code:
    <a href="#" data-id="1">Snowy Owl</a>
    I´m using this script (http://jsfiddle.net/craga89/L6yq3

    Code:
    // Create the tooltips only when document ready
    $(document).ready(function()
    {
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('a').each(function() {
         $(this).qtip({
            content: {
                text: 'Loading...',
                ajax: {
                    url: 'http://qtip2.com/demos/data/owl',
                    loading: false
                }
            },
            position: {
                viewport: $(window)
            },
            style: 'qtip-wiki'
         });
     });
     });
    At the moment you need the whole link to the ajax file to get it inside of the tooltip:

    Code:
    <a href='http://qtip2.com/demos/data/snowyowl'>Snowy Owl</a>

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok, so it's working, right? Why wouldn't you just use the href? I'm just curious.

    You could do this. http://jsfiddle.net/L6yq3/493/

    Code:
    String.prototype.killWhiteSpace = function() {
        return this.replace(/\s/g, '');
    };
     $(document).ready(function()
     {
         // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
         $('a').each(function() {
             alert('http://qtip2.com/demos/data/'+$(this).text().killWhiteSpace()+'.html')
             $(this).qtip({
                content: {
                    text: 'Loading...',
                    ajax: {
                        url: 'https://www.mysite.com/dogs/'+$(this).text().killWhiteSpace()+'.html',
                        loading: false
                    }
                },
                position: {
                    viewport: $(window)
                },
                style: 'qtip-wiki'
             });
         });
     });
    Code:
    <a>Red dogs</a><br>
    <a>Blue Dogs</a>

  • #3
    New Coder
    Join Date
    Aug 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I´ve many items so it´s more comfortable to use ids.

    I tried something like that, but it doesn´t work. Maybe someone could help me at this:

    Code:
     <script>
                    var urlFormat = "/examples/content/web/tooltip/ajax/ajaxContent{0}.html";
    
                    $(document).ready(function() {
                        $("#products").qtip({
                            filter: "a",
                            content: {
                                url: "/examples/content/web/tooltip/ajax/ajaxContent1.html"
                            },
                            width: 520,
    
                            position: "top",
                            requestStart: function(e) {
                                e.options.url = qtip.format(urlFormat, e.target.data("id"));
                            }
                        });
    
                        $("#products").find("a").click(false);
                    });
                </script>

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    well you really need to be specific as to how you would like to do it. I just spent some of my time and showed you a perfectly working example using just the text from the link and nothing else. No id's or anything!

    Please show a real world example with 2 links with the text and attributes you want to use and specify what information you would like to use to correlate that information to a actual link and I can show you how to code it.

    Your first example shows a data-id of 1 and the text snowy owl. You then wanted to go to http://qtip2.com/demos/data/owl , oddly enough not http://qtip2.com/demos/data/snowyowl, so you have to first tell us how you want to correlate one piece of information with the other. ther is no direct way to read the data-id of "1" and tell the script o this means go to http://qtip2.com/demos/data/owl, with out some other information. See what I mean?

  • #5
    New Coder
    Join Date
    Aug 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, sorry for that. So i will be more clearer.

    I have multiple ajax files in a folder, which called like that:

    /examples/content/web/tooltip/ajax/ajaxContent1.html
    /examples/content/web/tooltip/ajax/ajaxContent2.html
    /examples/content/web/tooltip/ajax/ajaxContent3.html

    Now i want to get the content of them inside of the tooltip, but i don´t want to use the whole link to get them. This should be done with the date-id attribute, which should be the number at the end of each ajaxContent file.

    So if i want to have the ajaxContent1.html content inside of the tooltip, the link should look like:

    Code:
    <a href="#" data-id="1">Example</a>
    And if i want to have the ajaxContent2.html content inside:

    Code:
    <a href="#" data-id="2">Example2</a>
    And if i want to have the ajaxContent3.html content inside:

    Code:
    <a href="#" data-id="3">Example3</a>
    Last edited by Holgo; 09-28-2013 at 03:29 AM.

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
     $(document).ready(function()
     {
         // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
         $('a').each(function() {
             var link = '/examples/content/web/tooltip/ajax/ajaxContent'+$(this).data('id')+'.html'
             $(this).qtip({
                content: {
                    text: 'Loading...',
                    ajax: {
                        url: link,
                        loading: false
                    }
                },
                position: {
                    viewport: $(window)
                },
                style: 'qtip-wiki'
             });
         });
     });

  • Users who have thanked DanInMa for this post:

    Holgo (09-28-2013)

  • #7
    New Coder
    Join Date
    Aug 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, working fine.

  • #8
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    sweet


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •