Display selectmenu inside jQuery confirm

Question

i have a jQUery-confirm and im trying to display some content which have a select and my select.selectMenu() doesn't seem to work because it's being displayed inside the jQUery-confirm. It's just showing the default select.I can easily call .selectMenu() on a select outside the scope and it will change from select to a selectmenu. Example:

HTML:

 <div id="aDiv"> 
     <select id="aSelect"> <option value="1"> 1 </option></select>
 </div>
 <button type="button" id="aButton">Click </button>

CSS:

#aDiv {
     display: none;
}

JS:

$(document).ready(function() {
  $('#aSelect').selectmenu();
  var divVar = $('#aDiv');
  $('#aButton').on("click", function() {
       $.confirm( {
            title: 'Hello',
            content: '',
            onOpen : function() {
                divVar.show();
                this.setContent(divVar);
            },
            onClose : function() {
               divVar.hide();
            }

         });
     });
 });          

How do i make jquery-confirm show jquery ui widgets like selectmenu?

Answer 1

try this, you need to add html markup inside jconfirm and initialize the selectMenu plugin, its better to write the markup inside content instead of defining it outside.

$(document).ready(function() {
    // $('#aSelect').selectMenu();
    $('#aButton').on("click", function() {
        $.confirm( {
            title: 'Hello',
            content: function(){
                return $('#aDiv').html(); // put in the #aSelect html, 
            },
            onContentReady : function() {
                this.$content.find('#aSelect').selectMenu(); // initialize the plugin when the model opens.
            },
            onClose : function() {

            }
        });
    });
});  

Answer 2

Please try the following:

You have missed the # for id

$(document).ready(function() {
  $('#aSelect').selectMenu();
  var divVar = $('#aDiv');
  $('#aButton').on("click", function() {
       $.confirm( {
            title: 'Hello',
            content: '',
            onOpen : function() {
                divVar.show();
                this.setContent(divVar);
            },
            onClose : function() {
               divVar.hide();
            }

         });
     });
 });