Error in select2 update row in Datatable

Error in select2 update row in Datatable

klermannklermann Posts: 277Questions: 67Answers: 1
edited October 2019 in Free community support

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.

Answers

  • klermannklermann Posts: 277Questions: 67Answers: 1

    help me!

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

    Hi,

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

    Thanks,
    Allan

  • klermannklermann Posts: 277Questions: 67Answers: 1

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

    191.209.32.171:888/financeiro/despesas/

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

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

    Allan

  • klermannklermann Posts: 277Questions: 67Answers: 1
  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

    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

  • klermannklermann Posts: 277Questions: 67Answers: 1

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

  • klermannklermann Posts: 277Questions: 67Answers: 1
    edited October 2019

    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!

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

    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

  • klermannklermann Posts: 277Questions: 67Answers: 1

    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

  • klermannklermann Posts: 277Questions: 67Answers: 1

    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

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

    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

  • klermannklermann Posts: 277Questions: 67Answers: 1

    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!

  • klermannklermann Posts: 277Questions: 67Answers: 1

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

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

    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

  • klermannklermann Posts: 277Questions: 67Answers: 1
    edited June 2020

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

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

    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

  • klermannklermann Posts: 277Questions: 67Answers: 1
    edited June 2020

    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;
            })          
        } );`
    
This discussion has been closed.