Semantic-UI Popup - Change HTML before initializing
Semantic-UI Popup - Change HTML before initializing
我正在使用 Semantic-UI 并有一个带有输入字段(搜索字段)的弹出窗口。弹出窗口是 initialized/opened "on: 'click'",但我想在用户打开弹出窗口之前使用 javascript 为输入字段设置一个值。
尝试使用
document.getElementById("sok_tekst").value = input;
只会导致
Uncaught TypeError: Cannot set property 'value' of null
当我查看控制台时,我看到 HTML 代码包含带有输入字段 (id="sok_tekst") 的弹出窗口,但看起来我 "can't reach it"在初始化之前使用 javascript。
我觉得我已经尝试了所有方法,看起来我需要在向输入字段添加值之前打开弹出窗口。
这是一个DEMO
有人对此有什么绝招吗??
谢谢!
出于好奇:我将输入字段用作 table/work 计划中的搜索字段。当 table 重绘时,用户更改周数,弹出窗口也会重绘。我试图保留搜索值,并将其放回输入字段中,在新的弹出窗口中,在新的 table 中。
为了初始化输入值,你不应该用 data-html="..."
指定弹出内容,这不会让更改值导致输入尚未创建 (这就是为什么你正在获取 Cannot set 属性 'value' of null) ,所以应该从预先存在的 HTML content 更改它,所以在弹出窗口中改用 popup: $('#YourContentSelector'),
setting 来设置内容,然后您就可以使用 :$('#input_test').val('test');
更改输入值,如下所示:
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');
});
这是一个有效的 Demo
我正在使用 Semantic-UI 并有一个带有输入字段(搜索字段)的弹出窗口。弹出窗口是 initialized/opened "on: 'click'",但我想在用户打开弹出窗口之前使用 javascript 为输入字段设置一个值。
尝试使用
document.getElementById("sok_tekst").value = input;
只会导致
Uncaught TypeError: Cannot set property 'value' of null
当我查看控制台时,我看到 HTML 代码包含带有输入字段 (id="sok_tekst") 的弹出窗口,但看起来我 "can't reach it"在初始化之前使用 javascript。
我觉得我已经尝试了所有方法,看起来我需要在向输入字段添加值之前打开弹出窗口。
这是一个DEMO
有人对此有什么绝招吗??
谢谢!
出于好奇:我将输入字段用作 table/work 计划中的搜索字段。当 table 重绘时,用户更改周数,弹出窗口也会重绘。我试图保留搜索值,并将其放回输入字段中,在新的弹出窗口中,在新的 table 中。
为了初始化输入值,你不应该用 data-html="..."
指定弹出内容,这不会让更改值导致输入尚未创建 (这就是为什么你正在获取 Cannot set 属性 'value' of null) ,所以应该从预先存在的 HTML content 更改它,所以在弹出窗口中改用 popup: $('#YourContentSelector'),
setting 来设置内容,然后您就可以使用 :$('#input_test').val('test');
更改输入值,如下所示:
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');
});
这是一个有效的 Demo