Display database elements in bootstrap modal

Question

Display database elements in bootstrap modal

Navigation

#1 by (0 votes)

0

Good evening, I have a modal to display information about a product, until then I can display this data with this script

$('a[data-target="#saberModal"]').on('click', function (e) {
    e.preventDefault();
    var nome = $(this).data('nome');
    var descricao = $(this).data('descricao');
    $('div.textoSaber').html(nome + descricao);
    $('#saberModal').modal('show');
    return false;
});

Only the name sticks to the description, I would like to know how to format these elements in my html so that they are displayed correctly. I tried changing the script this way.

$('a[data-target="#saberModal"]').on('click', function (e) {
    e.preventDefault();
    var nome = $(this).data('nome');
    var descricao = $(this).data('descricao');
    $('div.textoSaber').html(nome);
    $('div.descricao').html(descricao);
    $('#saberModal').modal('show');
    return false;
});

but only the name is displayed, the description is not.

javascript html5 modal

asked by anonymous 10.01.2017 / 05:24

1 answer

Skip field input after click (function () { Jupyter notebook and Pyspark

score 0 · Answer 1

It depends a lot on the formatting you want to do, if you want to highlight the name and description below, or all on the same line, name and / or bold description, etc.

You can usually place the html code in your javascript code. Here are some examples:

Note that in example 3 is the closest approximation to your example and you can format directly in your css.

// ------ Exemplo 1 -----


   //Nomes estáticos para facilitar no código
    var nome = 'Nome para teste';
    var descricao = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra enim dui. Suspendisse vel velit erat. Donec vel dictum nisl. Vestibulum fermentum euismod sapien. '


    //Concatena o html já existente com o código da linha abaixo
    $('div.textoSaber').append('<h2>'+nome+'</h2>')
    $('div.textoSaber').append('<p>'+descricao+'</p>');


// ------ Exemplo 2 -----


    $('div.textoSaber2').html('<p>'+nome+'</p>'+'<p>'+descricao+'</p>');



// ------ Exemplo 3 -----
$('div.textoSaber3').html('<p>'+nome+'</p>');
$('div.descricao').html('<p>'+descricao+'</p>');

.descricao{ margin-top:20px;display:inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="textoSaber"></div>

<hr/>

<div class="textoSaber2"></div>

<hr/>

<div class="textoSaber3"></div>
<div class="descricao"></div>