CODEWITHSUNDEEP
jqueryajaxqtip2
nixxx
nixxx

Reputation: 453

QTip2 ajax popup not working

I am trying to display qtip popup via ajax with no success. I got the following code, but cant seem to detect whee am going wrong. Help will be greatly appreciated.

<script type="text/javascript">
$(document).ready(function()
{
    $('.tiplink').qtip({
        content:{
            var id = $(this).attr('rel');
            text: '<img class="" src="../images/loader.gif" alt="Loading..." />',
            ajax:{
                url: 'pops.php',
                type: 'POST', 
                loading: false,
                data: 'id=' + id
            }
        },

        show: 'mouseover', // Show it on mouseover
        hide: {
            delay: 200,
            fixed: true // We'll let the user interact with it
        },
        style: {
            classes: 'ui-tooltip-light ui-tooltip-shadow',
            width: 290 
        }
    });

});
</script>

<a href="#" class="tiplink" rel='1'>show me the popup1!</a>
<a href="#" class="tiplink" rel='2'>show me the popup2!</a>
<a href="#" class="tiplink" rel='3'>show me the popup3!</a>

Upvotes: 1

Views: 2286

Answers (2)

Chris
Chris

Reputation: 501

I had a similar problem; it seems to be related to the fact that $('.myclass').qtip({}) can not reference more then one element. In the event it does (and such as your example) you need to wrap the qtip() calls within an each(function()) block...

With respect to your example, the following should fix your issue:

$(document).ready(function()
{
  // the each() call I was explaining above this code example
  $('.tiplink').each(function(){

    // Extract your variables here:
    var $this = $(this);
    var id = $this.attr('rel');

    // Now make your qtip() call
    $this.qtip({
      content:{
        text: '<img class="" src="../images/loader.gif" alt="Loading..." />',
        ajax:{
          url: 'pops.php',
          type: 'POST', 
          loading: false,
          data: 'id=' + id
        }
      },
      show: 'mouseover', // Show it on mouseover
      hide: {
        delay: 200,
        fixed: true // We'll let the user interact with it
      },
      style: {
        classes: 'ui-tooltip-light ui-tooltip-shadow',
        width: 290 
      }
    });
  }); // end each(function()) call
});

Upvotes: 1

Iliya Reyzis
Iliya Reyzis

Reputation: 3687

there is some questions around that might help you here

and the tutorial itself on qtip's site here

i don't see any other reason it shouldn't work if you do everything as written

Upvotes: 0

Related Questions