I made a global modal with this

<div id="GlobalModal" class="modal fade" role="dialog">
 <div class="modal-dialog">
    <style>
        #GlobalModal .modal-body .body-content {
            margin:0;
            width: 100%;
        }
    </style>
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header" style="background:#337ab7;">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title" style="color:white">Not set...</h4>
        </div>
         <div class="modal-body">

         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

and this is my button for calling the modal

<button id="new-munication" type="button" class="btn btn-info btn-sm">NEW <i class="glyphicon glyphicon-plus"></i></button>

and this is the content

<div class="hidden">
 <div id="mc-munication">
  <form id="loginForm"  class="form-horizontal" role="form" method="POST" action="" >
  <div class="form-group">
    <label class="col-sm-2 control-label">Type</label>
      <div class="col-sm-10">
        <select class="form-control selectpicker show-tick" name="SingleSelectFieldType">
          <option></option>
          <option>Mobile - Private</option>
          <option>Mobile - Office</option>
          <option>Others</option>
        </select>
        </select>
      </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Value</label>
      <div class="col-sm-10 col-md-10">
          <input class="form-control" type="tel" id="input-mobile-number" placeholder="" name="MobileNumberFieldType">
      </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label"></label>
      <div class="col-sm-10">
        <div class="[ form-group ]">
          <input type="checkbox" checked />
            <span></span><span> </span></label>
              <label>Primary</label>
        </div>
      </div> 
  </div>
 </form>
 </div>
</div>

and this is my jQuery of calling the content to get into the modal class.modal.js

var Modal = {
 Me: $('#GlobalModal'),
 Title: 'Undefined Title',
  Width: { xs: '25%', sm: '40%', md: '55%', lg: '70%', xl: '85%', full: '95%' },
 Show: function (params) {
   this.Me.find('.modal-body').empty();
   this.Me.find('.modal-title').text((this.Title == null) ? this.Title : params.Title);

   if(params.Content.substr(0, 1) == '#') { //To Check if content may e from a view or a div
     this.Me.find('.modal-body').append($(params.Content).clone());
   } else {
     this.Me.find('.modal-body').load(params.URI);
   }

   this.Me.find('.modal-dialog').css('width', this.Width[params.Width]);
   this.Me.modal('show');
 }
}

and the script to call in my view

  $(document).ready(function(){
    $('#new-munication').on('click', function(){
     Modal.Show({
      Title: 'Communication',
      Content: '#mc-munication',
      Width: 'sm'
    });
   });
 });

The thing is I can see the contents inside my select, but I can't select it and I also got a checkbox there and I can't check it. I tried making a new modal that is not global, but just for the munication, and it worked, I don't know what's wrong with my code.

I made a global modal with this

<div id="GlobalModal" class="modal fade" role="dialog">
 <div class="modal-dialog">
    <style>
        #GlobalModal .modal-body .body-content {
            margin:0;
            width: 100%;
        }
    </style>
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header" style="background:#337ab7;">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title" style="color:white">Not set...</h4>
        </div>
         <div class="modal-body">

         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

and this is my button for calling the modal

<button id="new-munication" type="button" class="btn btn-info btn-sm">NEW <i class="glyphicon glyphicon-plus"></i></button>

and this is the content

<div class="hidden">
 <div id="mc-munication">
  <form id="loginForm"  class="form-horizontal" role="form" method="POST" action="" >
  <div class="form-group">
    <label class="col-sm-2 control-label">Type</label>
      <div class="col-sm-10">
        <select class="form-control selectpicker show-tick" name="SingleSelectFieldType">
          <option></option>
          <option>Mobile - Private</option>
          <option>Mobile - Office</option>
          <option>Others</option>
        </select>
        </select>
      </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Value</label>
      <div class="col-sm-10 col-md-10">
          <input class="form-control" type="tel" id="input-mobile-number" placeholder="" name="MobileNumberFieldType">
      </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label"></label>
      <div class="col-sm-10">
        <div class="[ form-group ]">
          <input type="checkbox" checked />
            <span></span><span> </span></label>
              <label>Primary</label>
        </div>
      </div> 
  </div>
 </form>
 </div>
</div>

and this is my jQuery of calling the content to get into the modal class.modal.js

var Modal = {
 Me: $('#GlobalModal'),
 Title: 'Undefined Title',
  Width: { xs: '25%', sm: '40%', md: '55%', lg: '70%', xl: '85%', full: '95%' },
 Show: function (params) {
   this.Me.find('.modal-body').empty();
   this.Me.find('.modal-title').text((this.Title == null) ? this.Title : params.Title);

   if(params.Content.substr(0, 1) == '#') { //To Check if content may e from a view or a div
     this.Me.find('.modal-body').append($(params.Content).clone());
   } else {
     this.Me.find('.modal-body').load(params.URI);
   }

   this.Me.find('.modal-dialog').css('width', this.Width[params.Width]);
   this.Me.modal('show');
 }
}

and the script to call in my view

  $(document).ready(function(){
    $('#new-munication').on('click', function(){
     Modal.Show({
      Title: 'Communication',
      Content: '#mc-munication',
      Width: 'sm'
    });
   });
 });

The thing is I can see the contents inside my select, but I can't select it and I also got a checkbox there and I can't check it. I tried making a new modal that is not global, but just for the munication, and it worked, I don't know what's wrong with my code.

• javascript
• php
• jquery
• css
• twitter-bootstrap

• 1 Please post JSfiddle, CodePen or snippet – Chris Happy Commented Jan 3, 2017 at 5:59
• you might be having elements with same ID.. – Prashanth Benny Commented Jan 3, 2017 at 6:00
• no sirs, its just that when im using a global modal my select wont work, and when i used a new modal with the content inside it, it works – GGw Commented Jan 3, 2017 at 6:04

1 Answer 1

You will have to reinitialize the selectpicker after appending the html

if(params.Content.substr(0, 1) == '#') { //To Check if content may e from a view or a div
    this.Me.find('.modal-body').append($(params.Content).clone());

    // This will reinitialize selectpicker. You may need to revalidate this logic since you are appending data and not replacing.
    $('.selectpicker').selectpicker();
} else {
    this.Me.find('.modal-body').load(params.URI, function() {
        // Initialize the selectpicker after loading the data
        $('.selectpicker').selectpicker();
    });
}

The reason y this is happening is, the html data is dynamic and selectpicker is not initialized in newly added html elements