Semantic-UI popup - HTML change before initialization
I am working with Semantic-UI and have a popup with an input field in it (search box). The popup is initialized / opened "on: 'click'", but I would like to set a value in the input field using javascript before the user opens the popup.
Trying to do it with
document.getElementById("sok_tekst").value = input;
leads only to
Uncaught TypeError: Cannot set property value 'null
When I look in the console, I see that the HTML contains a popup with an input field (id = "sok_tekst"), but it looks like I "can't reach it" with javascript before initializing it.
I feel like I've tried everything and it looks like I need to open the popup before adding a value to the input field.
Here is DEMO
Does anyone have a sleeve trick for this?
Thank!
For the curious: I am using an input field as a lookup field in a table / workplan. When the table is redrawn, the user changes the week number, the pop-ups are also redrawn. I am trying to store the search value and put it back in the input field in a new popup menu in a new table.
source to share
To initialize the input value, you must not specify the popup content with data-html="..."
, this will prevent the value from being changed because the input has not yet been created (which is why you get Can't set property value 'to null), so you should change it from the pre-existing HTML content, so instead of setting popup: $('#YourContentSelector'),
in the popup settings, set the content and then you can change the input value using: $('#input_test').val('test');
as shown below:
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 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
source to share