qTip ajax content issue with JQuery 1.4.2

[sowji250]

Hi Craig,

Thankyou for great qTip project.

I was so happy when I found qTip plugin for tooltip implementation in my project. But I am finding so many issues with qTip on IE8.
I am using JQuery latest version 1.4.2. and I need ajax content in my tooltip. As per your recommendation, I downloaded the qTip (2.0) latest release files.

Do you I need to change my code in order to make the new release files work?

I have included the follwoing files in my project.

JS Code

jquery.qtip.js,
jquery.qtip.ajax.js,
jquery.qtip.css

Here is my java script code to implement qTip.

JS Code

$(element).qtip({
                    content: {
                    url: '/Home/CalendarEventDetails?date=' + $.fullCalendar.formatDate(eventDate, 'MM dd yyyy'),
                        method: 'get',
                        title: { text: $.fullCalendar.formatDate(eventDate, 'dddd, d MMM yyyy') }
                    },
                    position: {
                        corner: {
                            target: 'bottomLeft',
                            tooltip: 'topLeft'
                        }
                    },
                    style: {
                        background: calEvent.color,
                        border:
                        {
                            color: calEvent.color
                        },
                        padding: '0px 0px',
                        name: 'light',
                        tip: true,
                        width: 500
 
                    }
 
                });

Can you please let me know why is it not generating tooltip with this code?
It is giving the following java script error.

'Microsoft JScript runtime error: 'content.ajax' is null or not an object'

at the following highlighted code.

JS Code

$.fn.qtip.plugins.ajax.sanitize = function(opts)
    {
        // Parse options into correct syntax
        if(opts.content !== undefined) {
            if(opts.content.ajax !== undefined) {
                if(typeof opts.content.ajax !== 'object'){ opts.content.ajax = { url: opts.content.ajax }; }
                if(opts.content.text === FALSE){ opts.content.text = 'Loading...'; }
            }
            if(opts.content.url){ <span style="color: #FF0000;">opts.content.ajax.url = opts.content.url</span>; delete opts.content.url; }
            if(opts.content.data){ opts.content.ajax.data = opts.content.data; delete opts.content.data; }
            if(opts.content.method){ opts.content.ajax.type = opts.content.method; delete opts.content.method; }
        }
    };

Really appreciate your quick response on this.

Thanks,
Sowjanya

[Craig]

sowji, the ajax plugin changed it's syntax. You now use basic [link=http://api.jquery.com/jQuery.ajax/]jQuery.ajax object syntax[/link] e.g:

JS Code

$(element).qtip({
                    content: {
                       ajax: {
                           url:  '/Home/CalendarEventDetails',
                           data: { date: $.fullCalendar.formatDate(eventDate, 'MM dd yyyy') },
                           method: 'get',
                        },
                        title: { text: $.fullCalendar.formatDate(eventDate, 'dddd, d MMM yyyy') }
                    },
                    position: {
                      my: 'topLeft', // Notice the new corner syntax
                      at: 'bottomLeft'
                    },
                    style: { // This stylingi s all redundant (except the tip part) as styles are now done via CSS
                        background: calEvent.color,
                        border:
                        {
                            color: calEvent.color
                        },
                        padding: '0px 0px',
                        name: 'light', // Change this to "classes: 'ui-tooltip-light'" for the light tooltip styles
                        tip: true,
                        width: 500
                    }
                });

[sowji250]

Craig,

Thankyou for your quick reply.
I tried to implement ajax call as shown in example. Now I got this error 'Microsoft JScript runtime error: Object doesn't support this property or method' at the following code.

function errorHandler(xhr, status, error)
{
var content = status || error;

// Call user-defined success handler if present
if($.isFunction(ajax.error)) {
content = ajax.error(xhr, status, error);
if(content === FALSE){ return; }
}

// Update tooltip content to indicate error
qTip.updateContent(content); -------------------> I get 'Microsoft JScript runtime error: Object doesn't support this property or method' at this line.
}

Thanks,
Sowjanya

[Craig]

sowji, my bad. That was a bug in the code itself. Please update to the latest revision of the jquery.ajax.js file (371 as of this writing)

[sowji250]

Craig,

Thankyou for fixing the issue with ajax content.

I got the latest and it's working fine.

But I have another issue. When I hover on my element, when the tool tip comes up, my remaining page color is changed.


Please find attached screen shot of this issue.

Thanks,
Sowjanya

[Craig]

sowji, that seems to be a problem with either your scripts styling or your CSS as qTip wouldn't cause that. Make sure you're not using any conflicting class names like qtip on other elements.

[elizas]

How to get HTML fields value.

JS Code

Text field: $('#name').val();
Drop Down: $('#category option:selected').val();
Radio Or Check Box: $('#checkid').attr('checked'); // return true if checked other wise false;
HTML content : $('#div').html(); // same as innerHTML of DOM

How to set value of HTML fields.

JS Code

Text field: $('#name').val('test');
Drop Down: $('#category option:selected').val('ABC');
Radio Or Check Box: $('#checkid').attr('checked',true); or $('#checkid').attr('checked',false);
HTML content: $('#div').html('<table><tr><td>Test</td></tr></table>');

Suppose we have to add some event to more than one element then we can do that by element id one by one otherwise we can do that by class name. we give same class to those elements and write just one line JQuery to add an event to multiple elements.

HTML Code

<a href="#" title="Auto-Notify" class="basic1" id="test1">
<a href="#" title="Send to a Friend" class="basic1" id="test2">

JS Code

$(document).ready(function () {
 $('.basic1').click(function (e) {
  e.preventDefault();
  alert('hi');
 });
}