dcsimg
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,882
    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.
    STOP using $ prefix on JavaScript variable names...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  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,882
    The point I am making though is the issue of compatibility with screen readers and accessible web design.
    STOP using $ prefix on JavaScript variable names...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  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,882
    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?
    STOP using $ prefix on JavaScript variable names...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  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