javascript - Writing a callback function for a bootstrap modal - Stack Overflow

admin管理员组

文章数量:1287790

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.

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.

Here is the html select list:

<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 - Български.

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.

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.

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?

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.

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.

Here is the html select list:

<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 - Български.

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.

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.

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?

• javascript
• jquery
• twitter-bootstrap
• callback
• html-select

Share Improve this question Follow edited May 23, 2017 at 11:44 CommunityBot 111 silver badge asked Jul 23, 2014 at 0:00 user1261774user1261774 3,6951010 gold badges5858 silver badges104104 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Bootstrap's modal class already have below events for hooking into modal functionality.

1. show - This event fires immediately when the show instance method is called.
2. shown - This event is fired when the modal has been made visible to the user (will wait for css transitions to plete).
3. hide - This event is fired immediately when the hide instance method has been called.
4. hidden - This event is fired when the modal has finished being hidden from the user (will wait for css transitions to plete).

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 :

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.

You don't need to go for the Call back function for your problem.

Good Day

本文标签： javascriptWriting a callback function for a bootstrap modalStack Overflow