How to call different modals, without using database

Question

I’m having some difficulties, I know this is not the ideal way, but it’s what I need at the moment. I have a list medicos and need to call a different modal for each of them, without database, static even.

Follows my code:

<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> [phone] </li></ul>
                        <ul><li><i class="fa2 fa-phone"></i><span class="span-modal"> Telefone:</span> [phone] </li></ul>
                        <ul><li><i class="fa2 fa-fax"></i><span class="span-modal"> CRM:</span> [phone]</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>

What to change in the new modal and how to call in the div of medico?

Answer 1

You can take advantage of the HTML 5 date attributes:

 
$('.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: [phone]" data-crm="CRM: [phone]" 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: [phone]-0000" data-crm="CRM: [phone]" 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: [phone]" 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: [phone]" 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>

To do this deletes the respective date attributes to the modal, ..data-target="#myModal" data-toggle="modal"... 'Cause we’re gonna open it manually

Answer 2

Well there are numerous ways to do this as you want. Let’s go to the simplest that I could imagine at the moment:

NOTE: understanding that you do not use any "database" as it says, like a txt file or something like.

You will have to replace the Modal call from an HTML tag to a Javascript function.

1º define the default structure of the object that will be sent to the function as for example:

{
    "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" : "[phone], [phone]",
    "crm": "[phone]",
    "email" : "[email protected]"
}

all your doctors should have the same data structure, so you can send it to the function and insert the elements in the modal itself.

2º create the modal function

For it to work, you will have to have the predefined elements within the modal (there are numerous other ways but for the sake of optimization and simplicity this is the best way). it is necessary to be able to identify through the selector by name, attribute or id, example:

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

And the function would be something like:

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");
}

In doing so, in your links that open the modal, you would have to have something like this:

<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' : '[phone], [phone]',
    'crm': '[phone]',
    'email' : '[email protected]'
})">
    <h4 class="list-group-item-heading">Joao Eduardo Albieri Marinho</h4>
</a>

NOTE: it is not advisable to keep these data as demonstrated because it makes it difficult to edit these data if necessary. I advise you to have a static file within your site that does the management of this data (as there can be no database), such as a JSON where this will be called through a JSON request, so:

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!")
        }
    );
}

The above function should be called after page loading and in function abreModal() will undergo the necessary modifications staying with something like:

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");
}