Error in select2 update row in Datatable

klermann

Hello, I am having an error in select2 in the Datatable Editor while trying to update the line in Datatable. Here are images of where I click to update the Datatable Editor line and modal displaying the errors in select2, and also follow the codes of a select2 Datatable Editor for your enjoyment.

It this code:

{
    name: 'tipoDespesas[].id',
    type: "select2",
    opts: {
        language: 'pt-BR',
        tags: true,
        placeholder: "Selecione uma categoria",
        allowClear: true,
        ajax: {
            url: '/financeiro/tipoDespesas/listJson',
            delay: 300,
            processResults: function(obj) {

                var listTR = new Array()

                obj.data.forEach(function(dataTR, i) {
                    listTR[i] = {
                        "text": dataTR.nomeTipoDespesas,
                        "id": dataTR.id
                    };
                });
                return {
                    results: listTR
                };
            },
            data: function(params) {

                var queryParameters = {
                    param: params.term
                }
                return queryParameters;
            },
        },
        createTag: createTag,
        insertTag: insertTag,
        templateResult: templateResult,
        templateSelection: templateSelectionCategorias,
    }
},

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

klermann

help me!

allan

Hi,

Can you link to a page showing the error so I can help to debug it please?

Thanks,
Allan

klermann

Hi, follow - >
nome(user): datatable@datatable.com
senha(pass): datatable

191.209.32.171:888/financeiro/despesas/

allan

Thanks for the link. However, I'm afraid its timing out for me at the moment.

Allan

klermann

@Allan try again, pliss.
191.209.32.171:888/financeiro/despesas/

allan

It looks like:

            data: function(params) {
 
                var queryParameters = {
                    param: params.term
                }
                return queryParameters;
            },

Is interfering with the data object that Editor is sending to the server. The Select2 plug-in should be sending an initialValue boolean and value properties when the form is placed into edit mode. The server is then expected to return with the required JSON for that selected value.

Could you try removing that data function please?

Allan

klermann

@Allan - I removed the part of the code you asked me for, but the problem persists, as you can check it yourself!

klermann

clipboardfinanceiro-env.us-east-1.elasticbeanstalk.com/despesas/
nome(user): datatable@datatable.com
senha(pass): datatable

Hi Allan How can I retrieve the values ​​on click and send them to the servers? Since it looks like you gave up on helping me!

allan

Sorry I lost track of this thread. You still have:

                                data: function (params) { 
                                    
                                    var queryParameters = {
                                        param: params.term
                                    }
                                    return queryParameters;
                                },

in the select2 fields. Could you remove them please? I'm not seeing any parameters being sent to the server on initial view of the editing panel, and I think that might be the reason.

Allan

klermann

Allan commented on the part of the code that asked me, and yet the error continues ...

Look:
clipboardfinanceiro-env.us-east-1.elasticbeanstalk.com/despesas/
nome(user): datatable@datatable.com
senha(pass): datatable

klermann

Hi Allan How can I retrieve the values ​​on click and send them to the servers? Since it looks like you gave up on helping me.

Allan commented on the part of the code that asked me, and yet the error continues ...

Look:
clipboardfinanceiro-env.us-east-1.elasticbeanstalk.com/despesas/
nome(user): datatable@datatable.com
senha(pass): datatable

allan

Hi,

Lost track of it again - this forum moves so quickly!

So with that commented out the Select2 instances make requests such as:

minhasContas/listJson?initialValue=true&value%5B%5D=2

i.e.:

initialValue: true
value[]: 2

Is your listJson script handling that initialValue request? It looks like it is just returning the data for the table.

Allan

klermann

I did not understand what you meant. But the point is: in select data update occurs automatically without the page refresh and even to insert a new data the user can! I do not understand how this is affecting the operation of the update. Can't implement a code rollback output to send select data along?

´´´
rowCallback: function ( row, data, action, field ) {

                var verify = $('.verify', row);
                $('input.checkbox-default', row).prop( 'checked', data.pagamento == '1' );
                if(data.pagamento == true){
                    verify.html('<span class="font-size-12 teal-500">Paga!</span>');
                }else if(data.pagamento == false){
                    verify.html('<span class="font-size-12 red-500">Pendente</span>');
                }
         },

´´´

Thanks!

klermann

After months of trying to find a solution, I still haven't found an answer. Can you help me please on this issue?

allan

I'm not clear on how rowCallback would have any effect on the Select2 initial value. Could you re-instate the login information shown above so I can take a look please?

Thanks,
Allan

klermann

Try again:
http://clipboard.com.br/despesas/
user: datatable@datatable.com
Pass: datatable

allan

Are you able to create a record or two for me to test the loading of the Select2 value with? I don't appear to be able to select anything in the Select2 create dialogue and I'm afraid I don't understand the language to be able to know what to do (nor does it appear to let me copy/paste so I could drop it into Google Translate).

Allan

klermann

I ended up solving it that way

```

$('#despesasTable tbody').on( 'change', 'input.checkbox-default', function (row) {

        var oTable = $('#despesasTable').DataTable();
        var data = oTable.row( $(this).parents('tr') ).data(); 
        var checked = $(this).last().parent().find('input').prop( 'checked' )

        $(this).last().parent().parent().parent().addClass('marcador') // Seta class para o highlight

        var id  = data.id;
        var $label = $(this).last().parent().find('label').find('.verify')

        $label.empty('');
        if( checked == false ){
            $label.html('<span class="font-size-12 teal-500 verifyText">Paga</span>' )
        }else if( checked == true){
            $label.html('<span class="font-size-12 red-500 verifyText">Pendente</span>' )
        }

        var minhasDespesas = {};
        minhasDespesas.id = data.id,
        minhasDespesas.isPagamento = checked,

        $.ajax(hostName + "/despesas/setPagamento", {
                method: 'POST',
                data: minhasDespesas,
                cache: false,
        }).done( function(retorno){

            $('.marcador').addClass('highlight')

            $label.empty('');

            $(this).last().parent().find('input').prop( 'checked' )
            if( retorno == false ){
                $label.html('<span class="font-size-12 teal-500 verifyText">Paga</span>' )
            }else if( retorno == true ){
                $label.html('<span class="font-size-12 red-500 verifyText">Pendente</span>' )
            }

            setTimeout(function(){
                $('.marcador').removeClass('highlight').fadeIn()
                $('.selected').removeClass('marcador')
            }, 900)

            reset();
            alertify.success("O status do pagamento foi alterado com sucesso");
            return false;

        }).fail( function(error){
            reset();
            alertify.error("Falha ao alterar o status do pagamento. Reinicie a página");
            return false;
        })          
    } );`