首页 文章

在AJAX成功后更新工具提示器中的html内容

提问于
浏览 1558
0

我在工具提示器中有交互式html内容,单击触发器图标时会打开该工具提示器 . 通过AJAX提交数据后,我希望用返回的 data 替换工具提示的内容 . 虽然显示了返回的数据,但此时工具提示已关闭,只有当鼠标悬停在原始打开触发器上时才会显示 .

这是我的工具提示器的jQuery:

$(document).ready(function() {
    $(".layout-save").click(function(e) {
        e.preventDefault();     
        var form = $(".image_define");
        var params = form.serializeArray();
        var formData = new FormData();
        formData.append('default_image', $('#default_image')[0].files[0]);

        $(params).each(function (index, element) {
            formData.append(element.name, element.value);
        });

        $.ajax({
            url: form.attr('action'),
            method: "post",
            data: formData,
            contentType: false,
            processData: false
        })
        .done(function(data) {
            $('.tooltip-imageHandler-<?php echo $products_filter; ?>').tooltipster('destroy');
            $('.tooltip-imageHandler-<?php echo $products_filter; ?>').tooltipster({ 
                content: data,
                contentAsHTML: 'true'
            });
        })
        .fail(function() {
            alert('Ajax Submit for New Image Save Failed ...'); 
        });
    });
});

我假设 .tooltipster('destroy') 正在关闭工具提示,但是如果我首先尝试更换内容而不使用 destroy ,我会收到错误说

工具提示器:一个或多个工具提示已附加到下面的元素 . 忽略 .

如果没有工具提示器关闭,是否可以替换我的内容?

2 回答

  • 0

    试试这个:

    $('.tooltip-imageHandler-<?php echo $products_filter; ?>').tooltipster('update', data);

  • 0

    为了其他可能想要这样做的人的利益,我解决了这样的问题:

    .done(function(data) {
                $('.tooltip-imageHandler-<?php echo $products_filter; ?>').tooltipster('destroy');
                $('.tooltip-imageHandler-<?php echo $products_filter; ?>').tooltipster({ 
                content: data,
                contentAsHTML: 'true',
                interactive: 'true'
                });
                $('.tooltip-imageHandler-<?php echo $products_filter; ?>').tooltipster('open');
                $('.tooltip-imageHandler-<?php echo $products_filter; ?>').tooltipster('reposition');
    })
    

相关问题