5

Estou com algumas dificuldades, sei que esse não é o jeito ideal, mas é o que preciso no momento. Tenho uma lista medicos e preciso chamar um modal diferente para cada um deles, sem banco de dados, estático mesmo.

Segue meu código:

<section class="about text-center" id="about">
    <div class="container">
        <div class="row">
            <div class="header-backup"></div>

            <h2>Dentistas</h2>

            <div class="col-md-6 col-sm-6">

             <div class="col-sm-12" style="background-color:lavender;">
                <h3>Dentistas</h3>
                    <div class="list-group">
                        <a href="#" class="list-group-item " data-target="#myModal" data-toggle="modal">
                          <h4 class="list-group-item-heading">Antonio Andrade Santos</h4>
                        </a>
                        <a href="#" class="list-group-item" data-target="#myModal" data-toggle="modal">
                          <h4 class="list-group-item-heading">Armando Sambataro </h4>
                        </a>
                        <a href="#" class="list-group-item" data-target="#myModal" data-toggle="modal">
                          <h4 class="list-group-item-heading">Joao Eduardo Albieri Marinho</h4>
                        </a>
                        <a href="#" class="list-group-item " data-target="#myModal" data-toggle="modal">
                          <h4 class="list-group-item-heading">Raul Coutinho Rodrigues Da Matta</h4>
                        </a>
                        <a href="#" class="list-group-item " data-target="#myModal" data-toggle="modal">
                          <h4 class="list-group-item-heading">Rodolpho Telarolli Junior</h4>
                        </a>
                    </div>
               </div>
            </div>
             <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
            <div class="header-backup"></div>
              <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Antonio Andrade Santos</h4>
                      </div>
                      <div class="modal-body">
                        <div class="modal-perso">
                            <div class="info-detail2">
                        <ul><li><i class="fa2 fa-calendar"></i><span class="span-modal"> Segunda Feira - Sexta Feira:</span> 8:00 as 18:00 </li></ul>
                        <ul><li><i class="fa2 fa-map-marker"></i><span class="span-modal"> Endereço:</span> São Paulo </li></ul>
                        <ul><li><i class="fa2 fa-phone"></i><span class="span-modal"> Telefone:</span> (00) 0000-0000 </li></ul>
                        <ul><li><i class="fa2 fa-phone"></i><span class="span-modal"> Telefone:</span> (00) 0000-0000 </li></ul>
                        <ul><li><i class="fa2 fa-fax"></i><span class="span-modal"> CRM:</span> (123)984-1234</li></ul>
                        <ul><li><i class="fa2 fa-envelope"></i><span class="span-modal"> Email:</span> [email protected]</li></ul>
                    </div>
                        </div class="div-foto3x4">
                        <div><img src="img/foto 3x4.jpg" class="foto3x4" alt="foto"></div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                      </div>
                  </div>
              </div>
            </div>
        </div>
    </div>
</section>

O que alterar no novo modal e como chamar na div do medico?

1
  • Vc quer usar o mesmo modal pra todos os médicos? Commented 19/12/2016 às 14:23

2 Respostas 2

5

Podes aproveitar os atributos data de HTML 5:

 
$('.list-group-item').on('click', function(e) {     
  const to_append = '<ul><li><i class="fa2 fa-calendar"></i><span class="span-modal">' +$(this).data('horario')+ '</li></ul><ul><li><i class="fa2 fa-map-marker"></i><span class="span-modal">' +$(this).data('endereco')+ '</li></ul><ul><li><i class="fa2 fa-phone"></i><span class="span-modal">' +$(this).data('telefone')+ '</li></ul><ul><li><i class="fa2 fa-phone"></i><span class="span-modal">' +$(this).data('crm')+ '</li></ul><ul><li><i class="fa2 fa-envelope"></i><span class="span-modal">' +$(this).data('email')+ '</li></ul>';
  $('.info-detail2').html(to_append);
  $('.modal-title').html($(this).data('nome'));
  $('#myModal').modal('show');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div>
<div class="col-sm-12" style="background-color:lavender;">
                <h3>Dentistas</h3>
                    <div class="list-group">
                        <a href="#" class="list-group-item " data-nome="Antonio Andrade Santos" data-horario="Segunda Feira - Sexta Feira: 8:00 as 18:00" data-endereco="Endereço: São Paulo" data-telefone="Telefone: (00) 0000-0000" data-crm="CRM: (123)984-1234" data-email="Email: [email protected]">
                          <h4 class="list-group-item-heading">Antonio Andrade Santos</h4>
                        </a>
                        <a href="#" class="list-group-item" data-nome="Armando Sambataro" data-horario="Segunda Feira - Sexta Feira: 8:00 as 18:00" data-endereco="Endereço: São João" data-telefone="Telefone: (00) 00324500-0000" data-crm="CRM: (123)984-1234" data-email="Email: [email protected]">
                          <h4 class="list-group-item-heading">Armando Sambataro </h4>
                        </a>
                        <a href="#" class="list-group-item" data-nome="Joao Eduardo Albieri Marinho" data-horario="domingo Feira - Sexta Feira: 8:00 as 18:00" data-endereco="Endereço: Rio Paulo" data-telefone="Telefone: (00) 0432423000-0000" data-crm="CRM: (123)9832244-1234" data-email="Email: [email protected]">
                          <h4 class="list-group-item-heading">Joao Eduardo Albieri Marinho</h4>
                        </a>
                        <a href="#" class="list-group-item " data-nome="Raul Coutinho Rodrigues Da Matta" data-horario="Terça Feira - Sexta Feira: 8:00 as 18:00" data-endereco="Endereço: São Paulo" data-telefone="Telefone: (00) 0342423000-0000" data-crm="CRM: (123)984-1234" data-email="Email: [email protected]">
                          <h4 class="list-group-item-heading">Raul Coutinho Rodrigues Da Matta</h4>
                        </a>
                        <a href="#" class="list-group-item " data-nome="Rodolpho Telarolli Junior" data-horario="quarta Feira - Sexta Feira: 8:00 as 18:00" data-endereco="Endereço: São Paulo" data-telefone="Telefone: (00) 0000-0000" data-crm="CRM: (123)984-12222234" data-email="Email: [email protected]">
                          <h4 class="list-group-item-heading">Rodolpho Telarolli Junior</h4>
                        </a>
                    </div>
               </div>
            </div>
             <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
            <div class="header-backup"></div>
              <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title"></h4>
                      </div>
                      <div class="modal-body">
                        <div class="modal-perso">
                            <div class="info-detail2"></div>
                    </div>
                        </div class="div-foto3x4">
                        <div><img src="img/foto 3x4.jpg" class="foto3x4" alt="foto"></div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                      </div>
                  </div>
              </div>
            </div>

Para isto apaga os atributos data respetivos à modal, ..data-target="#myModal" data-toggle="modal"... Porque vamos abri-la manualmente

3
  • @FelipeGalli , coloca o teu código aqui que eu vou tentar ajudar-te, jsfiddle.net
    – Miguel
    Commented 19/12/2016 às 19:31
  • podemos conversar por email ? Te mando as pastas do site pra você dar uma olhada e tiro algumas duvidas! Meu email é [email protected] Commented 19/12/2016 às 19:47
  • Hoje não vou conseguir, estou nas aulas... Mas porque não copias este codiogo que fiz... E depois fazes as tuas alterações. Amanha falamos se ainda não tiveres conseguido @FelipeGalli . Lembra-te que a parte de jquery, a primeira parte deve estar dentro <script>AQUI</script>
    – Miguel
    Commented 19/12/2016 às 19:49
2

Bom existem inúmeras formas de fazer isso como você quer. Vamos a mais simples que consegui imaginar no momento:

NOTA: entendendo que você não utilize nenhum "banco de dados" como diz, como um arquivo txt ou algo do tipo.

Você terá que substituir a chamada do Modal de uma tag HTML para uma função Javascript.

1º defina a estrutura padrão do objeto que será enviada para a função como por exemplo:

{
    "nomeMedico" : "Antonio Andrade Santos",
    "atendimento" : "Segunda Feira - Sexta Feira, de 8:00 as 18:00",
    "endereco" : "Rua x, nº 123 - São Paulo/SP",
    "telefone" : "(00) 0000-0000, (00) 0000-0000",
    "crm": "(123)984-1234",
    "email" : "[email protected]"
}

todos os seus médicos deverão ter a mesma estrutura de dados, assim você poderá enviar isso para a função e ela mesma inserir os elementos no modal.

2º criar a função do modal

Para que funcione, você terá que ter os elementos pré-definidos dentro do modal (existem inúmeras outras formas mas por questão de otimização e simplicidade esta é a melhor forma). é necessário que sejam possíveis de identificar através do seletor por nome, atributo ou id, exemplo:

<span name="nomeMedico"></span>

E a função seria algo do tipo:

function abreModal(obj){
    for(var param in obj) //nota: 1 declaração não precisa de chaves.
        document.querySelector('#myModal [name="' + param + '"]').innerHTML = obj[param];
    $("#myModal").modal("show");
}

Fazendo isso, nos seus link's que abrem o modal, você teria que ter algo assim:

<a href="#" class="list-group-item" onclick="abreModal({
    'nomeMedico' : 'Antonio Andrade Santos',
    'atendimento' : 'Segunda Feira - Sexta Feira, de 8:00 as 18:00',
    'endereco' : 'Rua x, nº 123 - São Paulo/SP',
    'telefone' : '(00) 0000-0000, (00) 0000-0000',
    'crm': '(123)984-1234',
    'email' : '[email protected]'
})">
    <h4 class="list-group-item-heading">Joao Eduardo Albieri Marinho</h4>
</a>

NOTA: não é aconselhável manter esses dados como demonstrado pois dificulta a edição desses dados caso necessário. aconselho que se tenha um arquivo estático dentro de seu site que faça a gestão destes dados (como não pode haver banco de dados), como um JSON onde este será chamado através de uma requisição JSON, assim:

function pegaJSON(){
    var obj = {};
    $.get("www.meudominio.com/assets/static/dadosMedicos.json").then(
        function(response){ //success
            window.site.dadosMedicos = response;
        }, 
        function(response){ //error
            window.site.dadosMedicos = null;
            alert("não foi encontrado os dados dos médicos!")
        }
    );
}

A função acima deve ser chamada após o carregamento da página e na função abreModal() sofrerá as modificações necessárias ficando com algo do tipo:

function abreModal(obj){
    if(!typeof(window.site.dadosMedicos) === "object")
         return;
    //se quiser mandar só a posição do medico no array ou o próprio objeto
    var arrayMedicos = typeof(obj) === "object" ? obj : window.site.medicos[obj]; 
    for(var param in arrayMedicos ) //nota: 1 declaração não precisa de chaves.
        document.querySelector('#myModal [name="' + param + '"]').innerHTML = obj[param];
    $("#myModal").modal("show");
}

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 .