www.webdeveloper.com
Results 1 to 7 of 7

Thread: Data id attribute and ajax tooltip

  1. #1
    Join Date
    Dec 2013
    Posts
    4

    Data id attribute and ajax tooltip

    Hello,

    Im using qtip2 tooltips and want to call the tooltip with ajax and a data id attribute.

    Ive items "ajaxContent1.html, ajaxContent2.html", which i want to call with the data id attribute inside of my tooltip. Now i have the problem, that the tooltip doesnt load the content of the files.

    Here is my code:

    Code:
    <script type="text/javascript">
    
    // 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://www.example.de/items/ajaxContent.html?id='     + $(this).data('id'),
                    loading: false
                }
            },
            position: {
                viewport: $(window)
            },
            style: 'qtip-wiki'
            });
            });
           });
    
      </script>
    And now i want to call the tooltip with:

    Code:
    <a href='#' data-id='1' >Test</a>

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,313
    Why?

    Would it not be easier to put the "Tool tip" in the HTML tag to start with? It is less coding, less bulk and no need to put your server under undue duress fetching elements that should already be set in any case to conform with accessibility regulations.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Dec 2013
    Posts
    4
    I dont to type in the tooltip content everytime. So i chose this solution with the data id. But somewhere is a mistake in my code, i think.

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,313
    The point I am making though is the issue of compatibility with screen readers and accessible web design.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  5. #5
    Join Date
    Dec 2013
    Posts
    4
    Thanks, but could someone look over the code, please?

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,313
    Question: If you are setting the ID's for these items, why are you not setting the title tag at the same time and have done with it?

    Secondly, are you naming the ID's individually as in id1, id2, id3, etc as an example?
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  7. #7
    Join Date
    Dec 2013
    Posts
    4
    Ive a folder and inside of this folder i have my items. They are all called ajaxContent + the id (ajaxContent1, ajaxContent2, ajaxContent etc).

    I think there is a mistake in building the url:

    Code:
     url: 'http://www.example.de/items/ajaxContent.html?id='     + $(this).data('id'),

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles