Preencher campos no Modal

Bom dia!

Foi criado um Modal com alguns campos, e não entendi como que faz para que esses campos sendo preenchidos assim que a tela for aberta, como por exemplo a data e hora.

Vou colocar aqui a forma que tentei fazer, mas não trouxe em tela.


$('#target').on('click', 'tr', function() {
            var index = that.myTable.selectedRows()[0];
            var selected = that.myTable.getRow(index);
            console.log(selected);

            var myModal = FLUIGC.modal({
                title: 'Solicitação de Serviço',
                content: '<div class="panel panel-primary">' +
                            '<div class="panel-heading">' +
                                '<h3 class="panel-title">Informações</h3>' +
                            '</div>' +
                            '<div class="panel-body">' +
                                '<div class="form-group col-md-2">' +
                                    '<label for="txtBem">Bem/Localiz.:</label>' +
                                    '<input type="text" name="codbem" id="codbem" class="form-control" readonly="readonly">' +
                                '</div>' +
                                '<div class="form-group col-md-4">' +
                                    '<label for="txtDescBem">Desc.Bem/Loc:</label>' +  
                                    '<input type="text" name="nombem" id="nombem" class="form-control" readonly="readonly">' +
                                '</div>' +
                                '<div class="form-group col-md-2">' +
                                    '<label for="txtCC">Centro Custo:</label>' +  
                                    '<input type="text" name="ccusto" id="ccusto" class="form-control" readonly="readonly">' +
                                '</div>' +
                                '<div class="form-group col-md-4">' +
                                    '<label for="txtDescCC">Nome C.Custo:</label>' +  
                                    '<input type="text" name="nomcus" id="nomcus" class="form-control" readonly="readonly">' +
                                '</div>' +
                                '<div class="row">' +
                                    '<div class="form-group col-md-3">' +
                                        '<label for="txtDtAbert">Dt.Abertura:</label>' +  
                                        '<div class="input-group">' +
                                            '<input type="date" name="dataAbert" id="dataAbert" class="form-control" readonly="readonly">' +
                                        '</div>' +
                                    '</div>' +
                                    '<div class="form-group col-md-2">' +
                                        '<label for="txtHrAbert">Hr.Abertura:</label>' +  
                                        '<input type="time" name="horaAbert" id="horaAbert" class="form-control" readonly="readonly">' +
                                    '</div>' +
                                    '<div class="form-group col-md-2">' +
                                        '<label for="txtRamal">Ramal:</label>' +  
                                        '<input type="text" name="ramal" id="ramal" class="form-control">' +
                                    '</div>' +
                                    '<div class="form-group col-md-5">' +
                                        '<label for="txtSituacao">Situacao S.S:</label>' +  
                                        '<input type="text" name="soluca" id="soluca" class="form-control" readonly="readonly">' +
                                    '</div>' +
                                '</div>' +
                                '<div class="row">' +
                                    '<div class="form-group col-md-10">' +
                                        '<label for="txtServico">Serviço:</label>' +  
                                        '<div class="input-group">' +
                                            '<textarea id="servico" name="servico" rows="4" cols="100" maxlength="100"></textarea>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>' +    
                            '</div>' +
                        '</div>',
                id: 'fluig-modal',
                size: 'large',
                actions: [{
                    'label': 'Save',
                    'bind': 'data-open-modal',
                },{
                    'label': 'Close',
                    'autoClose': true
                }]

            });
            var data           = new Date(),
            dia          = data.getDate().toString(),
            diaF        = (dia.length == 1) ? '0'+dia : dia,
            mes          = (data.getMonth()+1).toString(), //+1 pois no getMonth Janeiro começa com zero.
            mesF         = (mes.length == 1) ? '0'+mes : mes,
            anoF         = data.getFullYear(),
            hora        = data.getHours(),          // 0-23
            horaF       = (hora.lenght == 1) ? '0'+hora : hora,
            min         = data.getMinutes(),        // 0-59
            minF        = (min.lenght == 1) ? '0'+min :min,
            dataAtual   = diaF+"/"+mesF+"/"+anoF,
            horaAtual   = horaF + ':' + minF;

        $("#dataAbert").val(dataAtual);

        });

    });

Samara, acredito que a data não é preenchida porque quando você tenta atribuir o valor (data), o objeto ainda está sendo criado, ou seja, ele ainda não existe. Tente usar algum evento que dispara quando o modal está completamente criado e então atribua o valor ao campo de data.

@Samara, ficaria mais ou menos assim...


var myModal = FLUIGC.modal({
    title: 'Title',
    content: '<h1>Modal Content</h1>',
    id: 'fluig-modal',
    actions: [{
        'label': 'Save',
        'bind': 'data-open-modal',
    },{
        'label': 'Close',
        'autoClose': true
    }]
}, function(err, data) {
    //Tudo que você quer que seja executado logo após o modal iniciar. 
    //Para preencher os campo do form do modal, é só adicionar o que deseja aqui dentro.
});

Olá Marcos. Como eu consigo buscar o valor de uma variável dentro do “function(err, data) { AQUI });” pois para mim apresenta undefined.?

Bom dia!

Muito obrigada. Consegui colocar através do value, segue como ficou:


function init(){

    $('#btBuscar').click( function() {
        var that         = this,
            unidade     = $("#unidade option:selected").val();
            descricao     = $("#descBem").val(),
            data           = new Date(),
            dia          = data.getDate().toString(),
            diaF        = (dia.length == 1) ? '0'+dia : dia,
            mes          = (data.getMonth()+1).toString(), //+1 pois no getMonth Janeiro começa com zero.
            mesF         = (mes.length == 1) ? '0'+mes : mes,
            anoF         = data.getFullYear(),
            hora        = data.getHours(),          // 0-23
            horaF       = (hora.lenght == 1) ? '0'+hora : hora,
            min         = data.getMinutes(),        // 0-59
            minF        = (min.lenght == 1) ? '0'+min :min,
            dataAtual   = anoF + "-" + mesF + "-" +diaF,
            horaAtual   = horaF + ':' + minF;

        //Verificar qual o código da filial informada
        var constraintFilial = DatasetFactory.createConstraint("filial", unidade, unidade, ConstraintType.MUST),
            dataset = DatasetFactory.getDataset("DS_CadastroFiliais", null, new Array(constraintFilial), null),
            codFilial = dataset.values[0]["codigo_filial"];

        //Filtrar os bens
        var constraintUnidade = DatasetFactory.createConstraint("unidade", codFilial, codFilial, ConstraintType.MUST),
            constraintDescricao = DatasetFactory.createConstraint("descricao", descricao, descricao, ConstraintType.MUST, true),
            constraints = [constraintUnidade,constraintDescricao];
            datasetReturned = DatasetFactory.getDataset("DS_REST_Bens", null, constraints, null);

        if (datasetReturned != null && datasetReturned.values != null && datasetReturned.values.length > 0) {
            var records = datasetReturned.values;
            that.mydata = [];
            for ( var index in records) {
                var record = records[index];
                that.mydata.push({
                    unidade: record.unidade,
                    codbem: record.codbem,
                    nomebem: record.nomebem
                });
            }
        }

        that.myTable = FLUIGC.datatable('#target', {
            dataRequest : that.mydata,
            renderContent: ['unidade', 'codbem', 'nomebem'],
            header : [{
                'title' : 'Unidade',
                'size' : 'col-md-2'
            }, {
                'title' : 'Código',
                'size' : 'col-md-3'
            }, {
                'title' : 'Nome Bem',
                'size' : 'col-md-7'
            }],
            search: {
                enabled: false,
            },
            scroll: {
                target: ".target",
                enabled: true
            },
            actions: {
                enabled: false,
            },
            navButtons: {
                enabled: false,
            },
            draggable: {
                enabled: false
            },
        }, function(err, data) {
            if (err) {
                FLUIGC.toast({
                    message: err,
                    type: 'danger'
                });
            }
        });

        that.myTable.on('fluig.datatable.loadcomplete', function() {
            if (!that.tableData) {
                that.tableData = that.myTable.getData();
            }
        });

        $('#target').on('click', 'tr', function() {
            var index = that.myTable.selectedRows()[0];
            var selected = that.myTable.getRow(index);
            console.log(selected);

            var myModal = FLUIGC.modal({
                title: 'Solicitação de Serviço',
                content: '<div class="panel panel-primary">' +
                            '<div class="panel-heading">' +
                                '<h3 class="panel-title">Informações para a SS - Unidade: ' + unidade + '</h3>' +
                            '</div>' +
                            '<div class="panel-body">' +
                                '<div class="form-group col-md-2">' +
                                    '<label for="txtBem">Bem/Localiz.:</label>' +
                                    '<input type="text" name="codbem" id="codbem" class="form-control" readonly="readonly" value="' + selected.codbem + '">' +
                                '</div>' +
                                '<div class="form-group col-md-4">' +
                                    '<label for="txtDescBem">Desc.Bem/Loc:</label>' +  
                                    '<input type="text" name="nombem" id="nombem" class="form-control" readonly="readonly" value="' + selected.nomebem + '">' +
                                '</div>' +
                                '<div class="form-group col-md-2">' +
                                    '<label for="txtCC">Centro Custo:</label>' +  
                                    '<input type="text" name="ccusto" id="ccusto" class="form-control" readonly="readonly" value="' + datasetReturned.values[0]["ccusto"] + '">' +
                                '</div>' +
                                '<div class="form-group col-md-4">' +
                                    '<label for="txtDescCC">Nome C.Custo:</label>' +  
                                    '<input type="text" name="nomcus" id="nomcus" class="form-control" readonly="readonly" value="' + datasetReturned.values[0]["descCusto"] + '">' +
                                '</div>' +
                                '<div class="row">' +
                                    '<div class="form-group col-md-3">' +
                                        '<label for="txtDtAbert">Dt.Abertura:</label>' +  
                                        '<div class="input-group">' +
                                            '<input type="date" name="dataAbert" id="dataAbert" class="form-control" readonly="readonly" value="' + dataAtual + '">' +
                                        '</div>' +
                                    '</div>' +
                                    '<div class="form-group col-md-2">' +
                                        '<label for="txtHrAbert">Hr.Abertura:</label>' +  
                                        '<input type="time" name="horaAbert" id="horaAbert" class="form-control" readonly="readonly" value="' + horaAtual + '">' +
                                    '</div>' +
                                    '<div class="form-group col-md-2">' +
                                        '<label for="txtRamal">Ramal:</label>' +  
                                        '<input type="text" name="ramal" id="ramal" class="form-control">' +
                                    '</div>' +
                                    '<div class="form-group col-md-5">' +
                                        '<label for="txtSituacao">Situacao S.S:</label>' +  
                                        '<select name="soluca" class="form-control" id="soluca" disabled>'+
                                            '<option value="A">Aguardando Analise</option>' +
                                            '<option value="D">Distribuida</option>' +
                                            '<option value="E">Encerrada</option>' +
                                            '<option value="C">Cancelada</option>' +
                                        '</select>' +
                                    '</div>' +
                                '</div>' +
                                '<div class="row">' +
                                    '<div class="form-group col-md-10">' +
                                        '<label for="txtServico">Serviço:</label>' +  
                                        '<div class="input-group">' +
                                            '<textarea id="servico" name="servico" rows="4" cols="110" maxlength="250"></textarea>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>' +    
                            '</div>' +
                        '</div>',
                id: 'fluig-modal',
                size: 'large',
                actions: [{
                    'label': 'Save',
                    'bind': 'data-open-modal',
                },{
                    'label': 'Close',
                    'autoClose': true
                }]

            });

        });

    });

} init();