Scope problem with using jQuery plugin in JQuery ajax function

Question

I tried to use jQuery qtip plugin in a function that runs after AJAX request. Plugin is not accesable, I have managed the problem in other way (load ajax in qtip content argument), but i'm still curious what the problem is.

<script type="text/javascript" src="jquery.qtip-1.0.0.min.js"></script>
//load plugin
<script type="text/javascript">    
(function ($) {
    jQuery("div.joomimg24_imgct").each(function () {
        jQuery(this).find(".joomimg24_txt").hide();
        var textField = jQuery(this).find(".joomimg24_txt ul li");
        var title = textField.get(0).innerHTML;
        var dataDodania = textField.get(2).innerHTML.split(':')[1];
        var author = textField.get(1).innerHTML.split(':')[1];
        var commnetsC = textField.get(3).innerHTML.split(':')[1];
        var link = jQuery(this).find("a").attr('href');
        var idNumber = getUrlValue('id', link);
        jQuery.ajax({
            url: "ajax/getvote.php",
            cache: false,
            data: "photoid=" + idNumber,
            success: function (html) {
                ajaxFunc(jQuery(this), html, title, author, commnetsC,
                                dataDodania);
            },
            error: function (err, ans) {
                alert("error  : " + err + "  kod : " + ans);
            }
        });
    })
    function getUrlValue(name, link) {
        [...]
        return decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    function ajaxFunc(curObj, rating, title, author, commnetsC, data) {
        if (!jQuery.qtip) {
            alert("jQuery plugin not loaded");
            return;
        }
        var newText = "</div>...<div>"
        //qtip is not loaded!
        curObj.qtip({
            content: newText,
            show: 'mouseover',
            hide: {
                when: 'mouseout',
                fixed: true
            },
            position: {
                target: 'mouse',
                adjust: {
                    mouse: true
                }
            },
            style: {
                height: 'auto',
                width: 'auto',
                padding: 1,
                marginRight: 0,
                //20 , aby wyrownac
                background: 'url(/templates/upsilum/images/bg-slide.jpg)',
                color: 'white',
                border: {
                    width: 2,
                    radius: 3,
                    color: 'white'
                }
            }
        })
        return curObj;
    }
})(jQuery);
</script>

Answer 1

Try something like this:

jQuery.ajax({
        url: "ajax/getvote.php",
        cache: false,
        data: "photoid=" + idNumber,
        success: function(obj, h, t, a, c, d) { 
                  return function (html) {
                    ajaxFunc(obj, h, t, a, c, d);}
          } (jQuery(this), html, title, author, commnetsC),
        error: function (err, ans) {
            alert("error  : " + err + "  kod : " + ans);
        }
    });

Without fully wrapping my head around what you're doing, I'm assuming you're expecting the html, title, author, etc... variables to be in scope when the asynchronous call returns, when in fact they probably aren't.

I haven't exactly tested this so it might not be syntactically correct or even do what you want.

Edit: It may not even do what I expected it to do in the first place, but at least it could give you a starting point on how to get variables in scope when you want them to be.