Edit js twitter twitter bootstrap modal

Question

I have JavaScript that displays a confirmation dialog to the user to confirm their actions with the variables passed in.

However, I have to change the usual confirmation dialog to twitter-bootstrap-modal.

I tried several times, read a lot of SO posts and read twitter bootstrap tags, but I can't get it to work, as my js knowledge is not good enough. I am obsessed with displaying variables in boottrap modal twitter.

I hope someone can help me by pointing me a few pointers.

Here is my current js dialog code:

function checkboxUpdated(checkbox, count, label, id) { if (checkbox.checked) { $('#menu_entry_' + id).show(); } else { if (count > 0) { if (! confirm('{% trans "You have '+ count +' saved '+ label +'.\n\nIf you leave this option un-checked your saved '+ label +' will be deleted only after you update this page.\n\nAre you sure you want to delete your ' + count + ' saved ' + label +'?" %}')) { checkbox.checked = true; return; } } $('#menu_entry_' + id).hide(); } } 

EDIT: ADDED #menu_entry_ CODE, as stated in the comment:

 {% for id, menu_entry, selected, item_count in menu_entries %} <li id="menu_entry_{{ id }}" {% if not selected %}style="display:none;"{% endif %}> <a {% if id == 4 %} href="{% url summary_details %}" {% elif id == 8 %} href="{% url objective_details %}" {% elif id == 12 %} href="{% url leading_employment_details %}" {% elif id == 16 %} href="{% url desired_occupation_details %}" .... {% elif id == 112 %} href="/" {% else %} href="/" {% endif %} onclick="showProgressAnimation();"> 

Please note that I need to convert the following js verification code to tweet modal download code:

 if (! confirm('{% trans "You have '+ count +' saved '+ label +'.\n\nIf you leave this option un-checked your saved '+ label +' will be deleted only after you update this page.\n\nAre you sure you want to delete your ' + count + ' saved ' + label +'?" %}')) { 

Answer 1

You can write your own jQuery plugin. First add the modal Bootsrap component to your document.

 <div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="confirm-label" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="confirm-label"></h4> </div> <div class="modal-body"> <p class="message"></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default dismiss" data-dismiss="modal"></button> <button type="button" class="btn btn-primary confirm" data-dismiss="modal"></button> </div> </div> </div> </div> 

Basically, the plugin should display modal on invocation and fire the confirm event if the confirm button or dismiss otherwise.

 $.fn.confirm = function (options) { var settings = $.extend({}, $.fn.confirm.defaults, options); return this.each(function () { var element = this; $('.modal-title', this).html(settings.title); $('.message', this).html(settings.message); $('.confirm', this).html(settings.confirm); $('.dismiss', this).html(settings.dismiss); $(this).on('click', '.confirm', function (event) { $(element).data('confirm', true); }); $(this).on('hide.bs.modal', function (event) { if ($(this).data('confirm')) { $(this).trigger('confirm', event); $(this).removeData('confirm'); } else { $(this).trigger('dismiss', event); } $(this).off('confirm dismiss'); }); $(this).modal('show'); }); }; 

The improvement we can make to the code above is to set the plugin's default settings.

 $.fn.confirm.defaults = { title: 'Modal title', message: 'One fine body…', confirm: 'OK', dismiss: 'Cancel' }; 

Usage example:

 $('#confirm').confirm().on({ confirm: function () { console.log('confirm'); }, dismiss: function () { console.log('dismiss'); } }); 

See a real-time example: http://jsfiddle.net/cdog/4q9t9pk5/ .

If you do not want to write your own solution, you can try existing projects, for example: https://github.com/nakupanda/bootstrap3-dialog . This is similar to what you were looking for. Documents and demos are available here: http://nakupanda.imtqy.com/bootstrap3-dialog/ .

Answer 2

Demo

You want to change your function as shown below. Then add modal markup to add to the page (see Demo) and event listeners shown below:

 function checkboxUpdated(checkbox, count, label, id) { if (checkbox.checked) { $('#menu_entry_' + id).show(); } else { if (count > 0) { //save data to use later $('#message_p').text( '<the-message-to-show-on-the-modal>' ) .data('elem', '#menu_entry_' + id) .data('chkbox', checkbox); //set modal title $('#title_h4').text( '<Modal Title>' ); //show modal $('#confirm_modal').modal('show'); } } } $(document).ready(function() { $('.button-yes').on('click',function() { var checkbox = $('#message_p').data('chkbox'); checkbox.checked = true; $('#confirm_modal').modal('hide'); }); $('#confirm_modal').on('hidden.bs.modal', function() { var elem = $('#message_p').data('elem'); $(elem).hide(); }); }); 

NOTE. . Let us know if you have any questions.