首页 文章

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

提问于
浏览 次
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 ，我会收到错误说

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

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

javascript jquery tooltipster

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');
})
    回复于

相关问题