Eu costumo usar modais para exibir uma ajuda mais completa dos campos de formulário (no caso é um formulário de Termo de Referência para contratações) e hoje tentando isso no Fluig eu senti alguns "problemas".
Pela documentação do Style Guide eu só consigo criar uma Modal usando a FLUIGC.modal e passando todas as informações no parâmetro de configuração. Isso deixa o arquivo JS bastante entupido de HTML e dificulta um pouco a manutenção de troca do texto.
Porém como o Style Guide é baseado na Bootstrap 3 (no Fluig 1.7) eu tentei criar as modais no estilo Bootstrap, deixando a estrutura HTML no formulário (o que é mais simples para dar manutenção depois) e então abrir a modal usando os atributos data-toggle="modal" e data-target="#idDaModal" no botão que chama a ajuda do campo.
Isso funcionou. A modal abriu normalmente, embora com um efeito de foco indesejado, mas abriu.
O problema é quando manda fechar a Modal o Style Guide simplesmente remove o elemento Modal do HTML, então não é possível abrir novamente a Modal, pois seu elemento não existe mais.
Alguém já tentou usar a Modal assim sem ter que colocar todo o HTML da Modal dentro do arquivo JS?
Pensei em utilizar template Mustache pra ao menos ter o conteúdo no HTML do formulário, mas ainda estou tentando entender como fazer a Modal pegar o conteúdo do template.
Oi Bruno, não sei se isso vai te ajudar, mas, eu tenho no html (form) um template (código abaixo):
<script type="text/template" id="detail_template" class="detail_template">
{{#value}}
<div class="detItem">
<div class="row">
<div class="col-md-4">
<label class="control-label">Cód. Tarefa</label>
<input class="form-control" type="text" name="codtarefa" id="codtarefa" readonly="on" value="{{CODTRF}}"/>
</div>
<div class="col-md-8">
<label class="control-label">Tarefa</label>
<input class="form-control" type="text" name="tarefadet" id="tarefadet" readonly="on" value="{{NOMETRF}}"/>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label class="control-label">Preço Unit. Orçado</label>
<input class="form-control" type="text" name="precoorcado" id="precoorcado" readonly="on" value="{{#getPreco}} {{.}} {{/getPreco}}"/>
</div>
<div class="col-md-8">
<label class="control-label">Contrato</label>
<input class="form-control" type="text" name="contrato" id="contrato" readonly="on" value="{{IDCNT}}"/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label class="control-label">Motivo Pedido</label>
<input class="form-control" type="text" name="motivoPedido" id="motivoPedido" readonly="on" value="{{DSCMOTIVOPEDIDOEXTRA}}"/>
</div>
<div class="col-md-12">
<label class="control-label">Detalhamento do motivo</label>
<textarea class="form-control" rows="2" name="detMotivo" id="detMotivo" readonly="on">{{MOTIVO}}</textarea>
</div>
</div>
</div>
{{/value}}
</script>
e no js a chamada eu faço assim:
function openModalDetalhe(id)
{
var template = Mustache.to_html($('#detail_template').html(),
{
value: dsItensPedido.values[id],
getPreco: function () {
return function (text, render) {
return formatMoney(dsItensPedido.values[id].PRECOORCADO, dsItensPedido.values[id].CODMOEDA);
}
}
});
var myModal = FLUIGC.modal({
title: 'Detalhe do Item - ' + dsItensPedido.values[id].CODIGOPRD + " - " + dsItensPedido.values[id].NOMEFANTASIA,
content: template,
id: 'detail-modal',
actions: [{
'label': 'Fechar',
'autoClose': true
}]
}, function(err, data) {
if(err) {
// do error handling
} else {
// do something with data
}
});
}
precisei importar o
<script type="text/javascript" src="/portal/resources/js/mustache/mustache-min.js"></script>
Muito obrigado, Otto. Já ajuda muito ter ao menos o conteúdo da Modal num template.
Quando vi a documentação dizendo que podia usar um template Mustache eu pensei que a Modal já identificasse automaticamente, por isso apanhei com isso. Como eu não preciso de variáveis (são textos fixos) eu deixei num template e só carreguei o html direto sem passar pelo Mustache (deixei numa div oculta mesmo). Obrigado pela ajuda.