4

Achei neste site: (http://www.webslesson.info/2017/05/bootstrap-multi-select-dropdown-with-checkboxes-using-jquery-in-php.html) um código que ele utiliza o Bootstrap pra auxiliar na criação de uma lista multiselecionável com checkbox.

O problema é que se eu abrir o código direto no navegador ele funciona perfeitamente, seja em .php, .html, .jsp, o que seja. E quando tento fazer o mesmo funcionar em um projeto java web no eclipse, quando tento acessar pelo localhost:8080/app não funciona o bootstrap, só o html puro.

Como posso resolver?

Esse é o código:

<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | Bootstrap Multi Select Dropdown with Checkboxes using Jquery in PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:600px;">
   <h2 align="center">Bootstrap Multi Select Dropdown with Checkboxes using Jquery in PHP</h2>
   <br /><br />
   <form method="post" id="framework_form">
    <div class="form-group">
     <label>Select which Framework you have knowledge</label>
     <select id="framework" name="framework[]" multiple class="form-control" >
      <option value="Codeigniter">Codeigniter</option>
      <option value="CakePHP">CakePHP</option>
      <option value="Laravel">Laravel</option>
      <option value="YII">YII</option>
      <option value="Zend">Zend</option>
      <option value="Symfony">Symfony</option>
      <option value="Phalcon">Phalcon</option>
      <option value="Slim">Slim</option>
     </select>
    </div>
    <div class="form-group">
     <input type="submit" class="btn btn-info" name="submit" value="Submit" />
    </div>
   </form>
   <br />
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $('#framework').multiselect({
  nonSelectedText: 'Select Framework',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth:'400px'
 });
 
 $('#framework_form').on('submit', function(event){
  event.preventDefault();
  var form_data = $(this).serialize();
  $.ajax({
   url:"insert.php",
   method:"POST",
   data:form_data,
   success:function(data)
   {
    $('#framework option:selected').each(function(){
     $(this).prop('selected', false);
    });
    $('#framework').multiselect('refresh');
    alert(data);
   }
  });
 });
 
 
});
</script>

1
  • Como assim não funciona o bootstrap? Ao olhar o console do navegador, é exibido alguma mensagem de erro? Notei que você ta usando cdn pra carregar as bibliotecas. Você está com internet no computador em que está rodando os projetos? Commented 27/06/2017 às 21:38

2 Respostas 2

-2

O problema pode estar no CDN, tente baixar o min.css e colocar dentro do diretório.

  <link rel="stylesheet" href="diretorio/arquivo.min.css" />

Já tive o mesmo tipo de problema e foi resolvido dessa forma. Além de resolver o problema é mais confiável ter o arquivo css no diretório do seu projeto.

-2

Pode ser por causa do https, provavelmente no seu servidor o link é http, e como tem as chamadas via https não funciona.

Você pode remover o 's' das chamadas e deixar com http, tbm vai funcionar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .