Semantic-ui ver. 2.0.8. I currently use the following method to load dynamic content in a pop-up

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('', 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>

There 's a way to simplify the whole process? For example with a element.popup ('refresh') after loading the new content? I tried:

JAVASCRIPT

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

but it does not work. I also tried using (replace) data-content into h2.vt but nothing.

Semantic-ui ver. 2.0.8. I currently use the following method to load dynamic content in a pop-up

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>

There 's a way to simplify the whole process? For example with a element.popup ('refresh') after loading the new content? I tried:

JAVASCRIPT

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

but it does not work. I also tried using (replace) data-content into h2.vt but nothing.

• javascript
• jquery
• html
• semantic-ui

• It's a little unclear what you're asking. In what way would you like to simplify the process? – fstanis Commented Aug 15, 2015 at 11:17
• yes, you're right, I thought there was a better way to load a dynamic pop-up without incurring OnShow, onVisible and without liability to an external variable. – Mik Commented Aug 15, 2015 at 12:38
• There's not much a better way (to my knowledge), but you could indeed avoid the global variable and use only the onShow event. I've added a reply which does exactly this. Still, the idea is very much the same as in your code. – fstanis Commented Aug 15, 2015 at 13:02

1 Answer 1

The only improvement that es to mind is to make the code a little cleaner (you only really need the onShow event, which fires before the popup shows) and avoid using a global variable (popupContent).

That said, the main idea is mostly the same - when the popup is supposed to show, you replace its content with some fake content (the loading animation), then trigger $.ajax and update the popup content as soon as the request pletes.

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./'
        }).done(function(result) {
            popup.html(result);
        }).fail(function() {
            popup.html('error');
        });
    }
});