twitter-bootstrap 为引导模式编写回调函数
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/24899765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Writing a callback function for a bootstrap modal
提问by user1261774
I have a bootstrap modal confirmation where I want to display the currently selected value of a html select list as well as a value by passing in a variable.
我有一个引导模式确认,我想在其中显示 html 选择列表的当前选定值以及通过传入变量的值。
I asked this SO question and received a good answer here about displaying two values from the same html select list for a JavaScript confirmation popup. However, I now need to replace the JavaScript confirmation with a bootstrap modal.
我问了这个 SO 问题,并在这里收到了一个很好的答案,关于为 JavaScript 确认弹出窗口显示来自同一个 html 选择列表的两个值。但是,我现在需要用引导模式替换 JavaScript 确认。
Here is the html select list:
这是 html 选择列表:
<select name="language_code" id="id_language_code">
<option value="ar">Arabic - ???????</option>
<option value="bg">Bulgarian - Български</option>
<option value="zh-CN">Chinese (Simplified) - 中文 (简体)?</option>
<option value="en" selected="selected">English (US)</option>
<option value="fr-CA">French (Canada) - fran?ais (Canada)?</option>
</select>
I can display two language values on the bootstrap modal, using the following code:
我可以使用以下代码在引导模式上显示两种语言值:
$( "#submit_buttonA" ).attr('update-confirm', 'Are you sure you want to change the language of the website from ' + $('#id_language_code option[value=' + '{{ user.get_profile.language_preference }}' + ']').text() + ' to ' + $('#id_language_code option:selected').text() + '?');
The above code line always returns the 2nd language value $('#id_language_code option:selected').text()(which is marked as selected="selected") as English (US)on the bootstrap modal, even if the user has selected Bulgarian - Български.
上面的代码行总是在引导模式中返回第二语言值$('#id_language_code option:selected').text()(标记为 selected="selected")作为英语(美国),即使用户有选定的保加利亚语 - Български。
I have read up on this and believe that this will require a JavaScript callback function because the bootstrap modal is asynchronous, while the JavaScript confirm() is not asynchronous.
我已经阅读了这个并相信这将需要一个 JavaScript 回调函数,因为引导模式是异步的,而 JavaScript 确认()不是异步的。
Is this correct? I have tried writing a call back function to return the value of the html select list that the user has selected, but it does not work. I am not sure if this is the correct approach or that my code skills are not good enough.
这个对吗?我尝试编写一个回调函数来返回用户选择的 html 选择列表的值,但它不起作用。我不确定这是正确的方法还是我的代码技能不够好。
Can someone show me how to write this call back function and explain how it works, because I am really confused on how to get this to work?
有人可以告诉我如何编写这个回调函数并解释它是如何工作的,因为我真的很困惑如何让它工作?
回答by Navas Basheer
Bootstrap's modal class already have below events for hooking into modal functionality.
Bootstrap 的模态类已经有以下事件用于连接模态功能。
- show- This event fires immediately when the show instance method is called.
- shown- This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
- hide- This event is fired immediately when the hide instance method has been called.
- hidden- This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).
- show- 在调用 show 实例方法时立即触发此事件。
- 显示- 当模态对用户可见时触发此事件(将等待 css 转换完成)。
- hide- 当调用 hide 实例方法时,会立即触发此事件。
- hidden- 当模态完成对用户隐藏时触发此事件(将等待 css 转换完成)。
You can use the above events as
您可以将上述事件用作
$('#myModal').on('shown', function () {
//your code to display the message
})
Hope this will solve your problem !!
希望这能解决你的问题!!
EDIT 1 :
编辑 1:
The real problem is with jquery selector $('#id_language_code option:selected').text();Use
var selectedValue = $('#id_language_code').val():which will give you the currently selected value inside the select box. and you can use $('#id_language_code option[value=' + selectedValue + ']').text();to get the text which is selected by the user.
真正的问题在于 jquery 选择器$('#id_language_code option:selected').text();Use
var selectedValue = $('#id_language_code').val():它将为您提供选择框中当前选择的值。并且您可以使用它$('#id_language_code option[value=' + selectedValue + ']').text();来获取用户选择的文本。
You don't need to go for the Call back function for your problem.
您不需要为您的问题使用回调函数。
Good Day
再会

