How to pass list of a picklist (bootstrap) via POST (ajax)

2

Good morning, I do not know how to pass data from this component to my controller java.

See picture:

Forexample,IhavethesefieldsthatIpassbyrequestPOSTtomycontrollerandtheyworkOK,itarrivesatcontrollerjava:

BoxApp.controller("CadastroCertificadoController", function($scope, $http) {

    $scope.clientes = {};

    $scope.iniciar = function() {
        $http.get('/boxmlV2/cadastrocertificado').success(function(response) {
            $scope.clientes = response;
        });
    };

    $scope.iniciar();
    $scope.clientes2 = [];

    $scope.atribuirUm = function(index, c) {
        $scope.clientes2.push(c);
        $scope.clientes.splice(index, 1);
    }

    $scope.limparUm = function(index, c2) {
        $scope.clientes2.splice(index, 1);
        $scope.clientes.push(c2);
    }

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

    $scope.cadastraCertificado = function() {
        $http.post('/boxmlV2/cadastrocertificado/salvaCertificado', {
            urlCertificado : $scope.certificadoIncluirAlterar.urlCertificado,
            dataValidadeCertificado : $scope.certificadoIncluirAlterar.dataValidadeCertificado.toString(),
            senhaCertificado : $scope.certificadoIncluirAlterar.senhaCertificado
            //picklist???
            //certificado
        }).then(function(response) {
            $scope.sucesso();
        }, function(response) {
        });
    };
});

But I do not know how to pass the picklist that already works, taking the base, the data I need to collect is the list on the right.

How can I do this?

My component picklist:

<div class="form-group">
    <label class="control-label col-md-3">Empresas:</label>
    <div class="col-md-9">
        <select multiple="multiple" class="multi-select" id="my_multi_select1" name="my_multi_select1[]">
            <option ng-repeat="c in clientes" value="{{c.idCliente}}" ng-click="atribuirUm($index, c)">{{c.razaoSocial}}</option>
            <option selected ng-repeat="c2 in clientes2" value="{{c2.idCliente}}" ng-click="limparUm($index, c2)">{{c2.razaoSocial}}</option>
        </select>
    </div>
</div>

Thanks, if you need more code, I'll post it without any problems.

Edited - save button:

<div class="modal-footer">
    <button type="button" class="btn btn-default"
        data-dismiss="modal">Cancelar</button>
    <button type="submit" class="btn btn-primary"
        ng-click="submitForm(form)">
        <i class="fa fa-check"></i> Salvar
    </button>
</div>

After applying the response provided, I get the array OK, but it gives bad request 400 on sending, I took the picklist as a test and I can pass the other attributes to the controller java successfully. I'm getting on the Java side, a string list with the same name, should work.

    
asked by anonymous 14.01.2016 / 12:16

1 answer

1

Well, firstly, I recommend that you remove the data definition from within $ http, use a variable instead, like this:

var dados = {
    urlCertificado :     $scope.certificadoIncluirAlterar.urlCertificado,
    dataValidadeCertificado : $scope.certificadoIncluirAlterar.dataValidadeCertificado.toString(),
    senhaCertificado : $scope.certificadoIncluirAlterar.senhaCertificado
};

Now to define the list of selected companies you have 2 ways to do this:

  • Pass the button calling the function as a parameter;
  • Get directly from the controller;

The second option only works (and in your case is even simpler) because the manipulation of the companies is done within the same controller. If it were done elsewhere, it would not be possible to use the second method (which is what I will explain).

The first method would look like this:

<button type="submit" class="btn btn-primary"
    ng-click="submitForm(form, clientes2)">
    <i class="fa fa-check"></i> Salvar
</button>

And in the controller, upon receiving the function, also get it:

$scope.submitForm = function(form, clientes2) { //....

As yours is already inside the controller, you can skip this step and reference it directly through $scope.clientes2 and merge with your already existing data array (which I exemplified above), like this:

dados['empresas'] = $scope.clientes2; //ou dados['clientes2'], fica a seu critério

This will create a nested-array of data that you can just reference in $ http and send, see:

$scope.cadastraCertificado = function() {       
    $http.post('/boxmlV2/cadastrocertificado/salvaCertificado', dados)
        .then(function(response) {
            $scope.sucesso();
        }, function(response) {         
    });
};
    
14.01.2016 / 12:46