I cannot open modal (dialog)

Question

He was using a bootstrap template, but as it was irregular (they had not paid) the company bought another, also bootstrap.

But the way I used to mount the modal doesn’t work anymore. I can’t open the modal of the template with the data I need for editing.

From the photo, you can see that I have 2 buttons that call the modal, the EDIT on the right side and under the other datatable. I need to click on the EDIT and load the data according to the photo, but that’s not what happens, when I click on the EDIT does not open anything, but when I click on the "OPEN DIALOG" opens the modal and with the edits I need.

Follows print:

My jsp:

            <!-- row Adicionar novas funcionalidades aqui-->
            <div class="row">   

                <!-- row -->
                <div class="row">

                    <!-- NEW WIDGET START -->
                    <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                        <!-- Widget ID (each widget will need unique ID)-->
                        <div class="jarviswidget jarviswidget-color-darken" id="wid-id-0" 
                        data-widget-editbutton="true"
                        data-widget-colorbutton="true"
                        data-widget-editbutton="true"
                        data-widget-togglebutton="true"
                        data-widget-deletebutton="true"
                        data-widget-fullscreenbutton="true"
                        data-widget-custombutton="true"
                        data-widget-collapsed="false"
                        data-widget-sortable="true">
                            <!-- widget options:
                            usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

                            data-widget-colorbutton="false"
                            data-widget-editbutton="false"
                            data-widget-togglebutton="false"
                            data-widget-deletebutton="false"
                            data-widget-fullscreenbutton="false"
                            data-widget-custombutton="false"
                            data-widget-collapsed="true"
                            data-widget-sortable="false"

                            -->

                            <header>
                                <span class="widget-icon"> <i class="fa fa-table"></i> </span>
                                <h2>Standard Data Tables </h2>

                            </header>

                            <!-- widget div-->
                            <div>

                                <!-- widget edit box -->
                                <div class="jarviswidget-editbox">
                                    <!-- This area used as dropdown edit box -->

                                </div>
                                <!-- end widget edit box -->

                                <!-- widget content -->
                                <div class="widget-body no-padding">

                                    <table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%">
                                        <thead>                         
                                            <tr>
                                                <th>Nome do Responsável</th>
                                                <th>Telefone Contato</th>
                                                <th>Celular</th>
                                                <th>E-mail</th>
                                                <th>Editar</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="x in organizacoes">
                                                <td><span ng-bind="x.nomeResponsavel" /></td>
                                                <td><span ng-bind="x.telefone" /></td>
                                                <td><span ng-bind="x.celular" /></td>
                                                <td><span ng-bind="x.emailResponsavel" /></td>
                                                <td><button type="submit" id="dialog_link" class="btn btn-info" ng-click="setSelected(x);" />Editar</button></td>                                                   
                                            </tr>
                                        </tbody>
                                    </table>

                                </div>
                                <!-- end widget content -->

                            </div>
                            <!-- end widget div -->

                        </div>
                        <!-- end widget -->             

            </div>
            <!-- end row -->

            <!-- INICIO DIALOG -->
            <div class="row">

                <div class="col-sm-6 col-md-6 col-lg-6">                
                            <div class="well well-sm well-light">
                        <a href="#" id="dialog_link" class="btn btn-info"> Open Dialog </a>
                    </div>
                </div>
            </div>  

            <!-- ui-dialog -->
            <div id="dialog_simple" title="Dialog Simple Title">
                <p>
                    <!-- START MODAL -->

                                    <form name="form" id="form_sample_2" role="form"
                                        class="form-horizontal ng-pristine ng-valid" novalidate>
                                        <div class="form-body">
                                            <div class="form-group">
                                                <label class="control-label col-md-3">Nome:<span
                                                    class="required" aria-required="true"> * </span></label>
                                                <div class="col-md-9">
                                                    <input type="text"
                                                        ng-model="organizacoesSelecionada.nomeResponsavel"
                                                        class="form-control" id="nomeResponsavel" maxlength="100"
                                                        name="nomeResponsavel" required> <span
                                                        style="color: red"
                                                        ng-show="submitted && form.nomeResponsavel.$error.required">Campo
                                                        Nome Responsável Obrigatório.</span>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label col-md-3">Telefone:<span
                                                    class="required" aria-required="true"> * </span></label>
                                                <div class="col-md-9">
                                                    <input type="text" ng-model="organizacoesSelecionada.telefone" 
                                                        mask="(11) 9999-9999"
                                                        class="form-control" id="telefone" maxlength="100"
                                                        name="telefone" required> <span style="color: red"
                                                        ng-show="submitted && form.telefone.$error.required">Campo
                                                        Telefone Obrigatório.</span>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label col-md-3">Celular:<span
                                                    class="required" aria-required="true"> * </span></label>
                                                <div class="col-md-9">
                                                    <input type="text" ng-model="organizacoesSelecionada.celular"
                                                        mask="(99) 9?9999-9999"
                                                        class="form-control" id="celular" maxlength="100"
                                                        name="celular" required> <span style="color: red"
                                                        ng-show="submitted && form.celular.$error.required">Campo
                                                        Celular Obrigatório.</span>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label col-md-3">E-mail:<span
                                                    class="required" aria-required="true"> * </span></label>
                                                <div class="col-md-9">
                                                    <input type="email"
                                                        ng-model="organizacoesSelecionada.emailResponsavel"
                                                        class="form-control" id="emailResponsavel" maxlength="100"
                                                        name="emailResponsavel" required> <span
                                                        style="color: red"
                                                        ng-show="submitted && form.emailResponsavel.$error.required">Campo
                                                        E-mail Obrigatório.</span>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label col-md-3">ID:<span
                                                    class="required" aria-required="true"> * </span></label>
                                                <div class="col-md-9">
                                                    <input type="text"
                                                        ng-model="organizacoesSelecionada.idEscritorioContabil"
                                                        class="form-control" id="idEscritorioContabil" maxlength="100"
                                                        name="idEscritorioContabil" disabled> <span
                                                        style="color: red"
                                                        ng-show="submitted && form.idEscritorioContabil.$error.required">Campo
                                                        ID Obrigatório.</span>
                                                </div>
                                            </div>

                                        </div>
                                    </form>

                </p>
            </div>

            <!-- FIM DIALOG -->


        </section>
        <!-- end widget grid -->

My . js:

angular.module('BoxApp').controller("ResponsavelOrganizacao", function($scope, $http) {

$scope.organizacoes = {};
$scope.organizacoesSelecionada = {};

$scope.iniciar = function() {
    $http.get('http://localhost:8080/boxmlV2/cadresponsavelorganizacao').success(function(response) {
        $scope.organizacoes = response;
    });
};  

$scope.iniciar();

$scope.setSelected = function(selecao){
    $scope.organizacoesSelecionada = selecao;
};

/**
 * Trecho para validar o form ao submeter.
 */
$scope.submitted = false;
$scope.submitForm = function(form) {
    $scope.submitted = true;

    if (form.$valid) {
        $scope.editaResponsavelOrganizacao();
    }
};  

$scope.editaResponsavelOrganizacao = function() {

    var str = telefone.value;
    telefone.value = str.replace(/[^a-zA-Z0-9]/g, '');
    str = celular.value;
    celular.value = str.replace(/[^a-zA-Z0-9]/g, '');

    $http.post('/boxmlV2/cadresponsavelorganizacao/salvar', {
        idEscritorioContabil : idEscritorioContabil.value,
        nomeResponsavel : nomeResponsavel.value,
        telefone : telefone.value,
        celular : celular.value,
        emailResponsavel : emailResponsavel.value
    }).then(function(response) {
        $scope.sucesso();
    }, function(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });

};

$scope.sucesso = function() {
    $scope.closeMyPopup();
    $scope.iniciar();
    nomeResponsavel.value = "";
    telefone.value = "";
    celular.value = "";
    emailResponsavel.value = "";
};

$scope.closeMyPopup = function() {
    $(myModal_autocomplete).modal('hide');
};

});

Tag page script:

/*
    * DIALOG SIMPLE
    */

    // Dialog click
    $('#dialog_link').click(function() {
        $('#dialog_simple').dialog('open');
        return false;

    });

    $('#dialog_simple').dialog({
        autoOpen : false,
        width : 500,
        resizable : false,
        modal : true,
        title : "Cadastro Responsável Organização",
        buttons : [{
            html : "<i class='.btn .btn-xs'></i>&nbsp; Salvar",
            "class" : "btn btn bg-color-blueLight txt-color-white",
            click : function() {
                $(this).dialog("close");
            }
        }, {
            html : "<i class='.btn .btn-xs'></i>&nbsp; Cancelar",
            "class" : "btn bg-color-red txt-color-white",
            click : function() {
                $(this).dialog("close");
            }
        }]
    });     

Answer 1

First of all... You can only have one ID of a value on a page.

How are you working with multiple records will not work you having one ID open the modal for all lines. You will need to use class...

In place of ID="dialog_link" on the line of EDIT put it like this:

class="btn btn-info dialog_link".

And in the function that opens the modal change this:

$('#dialog_link').click(function() {

That’s why

$('.dialog_link').click(function() {

---

To load the data from a single record in the modal you will have to take the ID record for the function that opens the modal.

So on the line of EDIT put the id="ID_DO_REGISTRO.

In ID_DO_REGISTRO put the ID record how it is done in the Angularjs why I don’t know.

Hence in the do function:

// Dialog Click
$('.dialog_link').click(function() {
    var idRegistro = $(this).attr('id');
    $('#dialog_simple').dialog('open');

    $.ajax({
       type: "GET",
       url: pagina.jsp,
       dataType: "JSON",
       data: { id : idRegistro },
       success: function(data){
           $('.campo-nome').val(data.nome_do_campo);
       }
    });

    return false;
});

In jsp. you have to do a search with the ID in the table and return the records in format json.

Take it from me. Glue on Dad who’s successful!