Semantic-UI Popup - Change HTML before initializing

Question

I'm working with Semantic-UI and have a popup with an input field in it (search field). The popup is initialized/opened "on: 'click'", but I would like to set a value to the input field with javascript before the user opens the popup.

Trying to do so with

document.getElementById("sok_tekst").value = input;

only leads to

Uncaught TypeError: Cannot set property 'value' of null

When I look in the console, I see that the HTML-code contains the popup with the input field (id="sok_tekst"), but it looks like I "can't reach it" with javascript before it's initialized.

I feel I have tried everything, and it looks like I need to open the popup before adding a value to the input field.

Here is a DEMO

Do anyone have a trick up their sleeve for this??

Thanks!

For the curious: I am using the input field as a search field in a table/work plan. When the table is redrawn, by the user changing week number, the popup are redrawn as well. I'm trying to keep the search value, and put it back in the input field, in the new popup, in the new table.

Answer 1

In order to initialize input value you shouldn't specify popup content with data-html="..." , this won't let change the value cause the input is not yet created (this is why you're getting Cannot set property 'value' of null) , so should change it from a pre-existing HTML content , so use instead popup: $('#YourContentSelector'), in popup setting to set the content ,then and you'll be able to change input value using :$('#input_test').val('test'); like the following :

HTML:

<!-- Popup Button -->
<i class="search link icon sok"></i>
<!-- Popup Button -->

<!-- Popup Content -->
<div class='ui form popup hidden' id="content"><!-- hidden class added so it won't be shown when it's loaded   -->
    <div class='field'>
        <div class='ui icon input'>
            <input type='text' placeholder='Input' id='input_test'>
            <i class='search icon'></i>
        </div>
    </div>
</div>
<!-- Popup Content -->

JS(jQuery)

$(document).on('click', '.search.sok', function() {
  $('#input_test').val('test');
    $(this)
       .popup({
           popup: $('#content'),
            on:'click'
       })
       .popup('show');

});

Here is a working Demo

Docs