How to call different modals, without using a database

Question

How to call different modals, without using a database

Navigation

#1 by (5 votes)
#2 by (2 votes)

5

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

Follow 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> (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>

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

jquery html5 bootstrap-3

asked by anonymous 19.12.2016 / 15:13

2 answers

How to make a gradient at the ends of a line, with CSS? Generate a random profession for Online Players

score 5 · 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><scriptsrc="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>

For this it deletes the date attributes for modal, ..data-target="#myModal" data-toggle="modal"... Because we will open it manually

score 2 · Answer 2

Well there are numerous ways to do this as you want. Let's simpler than I could imagine at the moment:

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

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

1st define the default structure of the object that will be sent to the function such as :

{
    "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]"
}

All your doctors should have the same data structure, so you can send that to the function and insert the elements yourself in the modal.

2nd create modal function

For it to work, you will have to have the predefined elements within the modal (there are lots of other ways but for optimization and simplicity this is the best way). it is necessary to be able to identify through the selector by name, attribute or id, for 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");
}

Doing this, in your link's 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' : '(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>

NOTE: It is not advisable to keep this data as demonstrated because it makes it difficult to edit this data if necessary. I advise you to have a static file inside your site that manages this data (as there can be no database), as a JSON where it will be called through a JSON request, like this:

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 function above must be called after loading the page, and in the abreModal() function it will undergo the necessary modifications 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");
}