语义化UI弹出框动态内容

Question

语义化UI版本2.0.8。 我当前使用以下方法在弹出窗口中加载动态内容

JAVASCRIPT

var popupContent = null;
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';

$('.vt').popup({
    inline: true,
    on: 'hover',
    exclusive: true,
    hoverable: true,
    html: popupLoading,
    variation: 'wide',
    delay: {
        show: 400,
        hide: 400
    },
    onShow: function(el) { // load data (it could be called in an external function.)
        var then = function(r) {
            if (r.status) {
                popupContent = r.data; // html string
            } else {
                // error
            }
        };
        var data = {
            id: el.dataset.id
        };
        ajax.data('http://example.site', data, then); // my custom $.ajax call
    },
    onVisible: function(el) { // replace popup content
        this.html(popupUserVoteContent);
    },
    onHide: function(el) { // replace content with loading
        this.html(popupLoading);
    }
});

HTML

<h2 data-id="123" class="vt">10</h2>
<div class="ui popup" data-id="123"></div>

有没有简化整个过程的方法？ 例如，在加载新内容后使用 element.popup('refresh')？ 我试过了：

JAVASCRIPT

...
if (r.status) {
   $('.ui.popup[data-id="123"]').html(r.data);
} 
...

但它不起作用。我也尝试将(data-content)替换为h2.vt，但没有效果。

- Mik

---

你的问题有点不太清楚。你希望以何种方式简化这个过程？ - fstanis

是的，你说得对，我认为有一种更好的方法来加载动态弹出窗口，而不需要触发OnShow、onVisible事件，并且不会涉及外部变量的责任。 - Mik

据我所知，没有更好的方法，但您确实可以避免使用全局变量，仅使用“onShow”事件。我已经添加了一个回复，完全做到了这一点。尽管如此，这个想法与你的代码非常相似。 - fstanis

Answer 1

唯一的改进之处是使代码更加简洁（你只需要onShow事件，它会在弹出窗口显示之前触发），避免使用全局变量（popupContent）。

话虽如此，主要思路基本相同 - 当弹出窗口应该显示时，您用一些虚假内容（加载动画）替换其内容，然后触发$.ajax并在请求完成后立即更新弹出窗口内容。

var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
    inline: true,
    on: 'hover',
    exclusive: true,
    hoverable: true,
    html: popupLoading,
    variation: 'wide',
    delay: {
        show: 400,
        hide: 400
    },
    onShow: function (el) { // load data (it could be called in an external function.)
        var popup = this;
        popup.html(popupLoading);
        $.ajax({
            url: 'http://www.example.com/'
        }).done(function(result) {
            popup.html(result);
        }).fail(function() {
            popup.html('error');
        });
    }
});

- fstanis

---

它可以运行，似乎速度更快。谢谢。 - Mik