How to call a script on success of $.ajax

Question

The goal

Call a script (to be more specific, qTip2 script) on success of $.ajax function from jQuery.

The problem

I have the following script to work with KnockoutJS:

$.ajax({
    url: "/ProductsSummary/List?output=json",
    dataType: "json",
    success: function (data) {
        var mappingOptions = {
            create: function (options) {
                return (new (function () {
                    this.finalMeasure = ko.computed(function () {
                        return this.quantity() > 1 ? this.measure() + "s"
                        : this.measure();
                    }, this);

                    this.infoComposition = ko.computed(function () {
                        return this.quantity() + ' ' + this.finalMeasure();
                    }, this);

                    ko.mapping.fromJS(options.data, {}, this);
                })());
            }
        };

        ViewModel.Summary.products = ko.mapping.fromJS(data, mappingOptions);
        ko.applyBindings(ViewModel);

        $("ul.products-list li").each(function () {
            var $productId = $(this).data("productid"),
                $match = $(".summary")
                         .find("li[data-productid=" + $productId + "]")
                             .length > 0;

            if ($match) {
                $(this).find("button.action").addClass("remove");
            } else {
                $(this).find("button.action").addClass("add");
            }
        });
    }
});

In the following fragment, I set a class to a button to define its style, but I have no success because I need to call the qTip2 again to render the new tooltip. See:

$("ul.products-list li").each(function () {
    var $productId = $(this).data("productid"),
        $match = $(".summary")
                 .find("li[data-productid=" + $productId + "]")
                     .length > 0;

    if ($match) {
        $(this).find("button.action").addClass("remove");
    } else {
        $(this).find("button.action").addClass("add");
    }
});

To make the things work, I have to call the qTip2 script after this fragment, but it was previously called.

To do not be redundant or practice the DRY concept , how can I call, inside of the "on success", qTip2 script again?

A little of code

My qTip2 Script:

$(function () {
        var targets = $("ul.products-list li .controls
                      button.action.add").attr('oldtitle', function () {
            var title = $(this).attr('title');
            return $(this).removeAttr('title'), title;
        }),

            shared_config = {
                content: {
                    text: function (event, api) {
                        return $(event.currentTarget).attr('oldtitle');
                    }
                },
                position: {
                    viewport: $(window),
                    my: "bottom center",
                    at: "top center",
                    target: "event"
                },
                show: {
                    target: targets
                },
                hide: {
                    target: targets
                },
                style: "qtip-vincae qtip-vincae-green"
            };

        $('<div/>').qtip(shared_config);

        $('<div/>').qtip($.extend(true, shared_config, {
            content: {
                text: function (event, api) {
                    var target = $(event.currentTarget),
                        content = target.data("tooltipcontent");

                    if (!content) {
                        content = target.next("div:hidden");
                        content && target.data("tooltipcontent", content);
                    }

                    return content || false;
                }
            },
            position: {
                my: "top center",
                at: "bottom center",
                viewport: $(".content"),
                container: $(".content")
            },
            show: {
                event: "click",
                effect: function () {
                    $(this).show(0, function () {
                        $(this).find("input[name=productQuantity]").focus();
                    });
                }
            },
            hide: {
                event: "click unfocus",
                fixed: false
            },
            events: {
                hide: function (event, api) {
                    $($(this).find("input[type=text].quantity")).val("");
                    $($(this).find("button")).prop("disabled", true);
                }
            },
            style: "qtip-vincae qtip-vincae-grey"
        }));
    });

Thanks in advance.

Answer 1

As I see it you should call simply $(this).find("button.action").qtip() or .qtip(...) and set/update what you want. This demo could be your cheat-sheet: http://craigsworks.com/projects/qtip2/demos/#validation