craigsworks.com - Support Forum - [Solved] Data selection in AJAX.

Hey, Craig and other qTip devs.

I followed the example of the qTip 2 "AJAX" demo, referred here.
http://craigsworks.com/projects/qtip2/demos/#ajax

What I'm trying to achieve is to select content from the data. Nothing wrong with the code, except that when I click on the link it loads the whole site in the qTip, with all the headers and sidebars and what not. Since I don't have "text-version" output of the site as a possibility.

So my question is, is there a possibility to "select" with qTip, heres a little something in plain jQuery, that I just can't make my mind about to implement

JS Code

jQuery.get(url, function(data) {
var fullContent = jQuery("article# div.content p", data);
var html = fullContent.html();

The part of div.content p is what I'd like to wrap in my data with qTip, could you provide an example please

I'm using qTip 2 on my site with the following code

JS Code

// Create the tooltips only on document load
jQuery(document).ready(function()
{
   jQuery('.field-name-field-faq a').each(function()
   {
      // We make use of the .each() loop to gain access to each element via the "this" keyword...
      jQuery(this).qtip(
      {
         content: {
            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: '<img class="throbber" src="/projects/qtip/images/throbber.gif" alt="Loading..." />',
            ajax: {
              url: jQuery(this).attr('href') // usin href here to get the a.
            },
            title: {
               text: jQuery(this).text(), // Give the tooltip a title using each elements text
               button: true
            }
         },
         position: {
            at: 'bottom center', // Position the tooltip above the link
            my: 'top center',
            viewport: jQuery(window), // Keep the tooltip on-screen at all times
            effect: false // Disable positioning animation
         },
         show: {
            event: 'click',
            solo: true // Only show one tooltip at a time
         },
         hide: 'unfocus',
         style: {
            classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
         }
      })
   })
 
   // Make sure it doesn't follow the link when we click it
   .click(function(event) { event.preventDefault(); });
});

Thanks :3

You'll need to apply a selector to the end of the URL:

JS Code

ajax: {
	url: jQuery(this).attr('href') + ' .myClassSelector'
}

Thank you so much Craig, this worked and saved me a lot of headache. Will most definitely keep an eye out on qTip2's progress and be using it on my future projects as well.

Rock on!

I have a page called check.aspx where the code to check users is written based on username.

I want to pass the username to this page and get the response.

My Jquery code is:

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Label3").qtip({
content: {
url: 'check.aspx',
data: { username: 'abc' },
method: 'get'
},

show: 'mouseover',
hide: 'unfocus'

});
});

The above code doesn't work.
It works fine if I pass an integer number such as: data: {id: 6}....How can I pass strings???

HELP!!!!!!!

There's no difference between passing strings or integers... must be a server-side problem. Open a new thread if you need more help please Smile

craigsworks.com - Support Forum

Diixi

Craig

Diixi

naupadnara

Craig