Diferent context menu in same page

gorka

Hi,

I have 2 tables in same page and each of them with his id, tablaLiquidaciones and tablaImportarLiquidaciones.

When I do click in tablaLiquidaciones tables row no context menu is shown and when I do click in tablaImportarLiquidaciones table rows tablaLiquidaciones's context menu is shown.

What is my mistake?

This is my code:

$(document).contextmenu({
       delegate: "#tablaImportarLiquidaciones tbody tr",
           autoFocus: true,
          preventContextMenuForPopup: true,
          preventSelect: true,
          taphold: true,
          beforeOpen: function(event, ui) {
          },           
           menu: [{ // Opciones disponibles en el menu contextual
                title: "Importar",
                cmd: "importar",
                uiIcon: "far fa-pencil fa-lg text-primary float-left mr-3               }
        ],

        select: function(event, ui) {
            var numexp = ui.extraData.numExp;
            var numLiq = ui.extraData.numLiq;
            switch (ui.cmd) { // Acciones asociadas a cada opción del menú
                case "importar":
                    break;              }
        }
    });

    $(document).contextmenu({
        delegate: "#tablaLiquidaciones tbody tr",
        autoFocus: true,
        preventContextMenuForPopup: true,
        preventSelect: true,
        taphold: true,
        beforeOpen: function(event, ui) {

        },
        menu: [{ // Opciones disponibles en el menu contextual
                title: "Fase tramitación",
                cmd: "tramitacion",
                uiIcon: "far fa-pencil fa-lg text-primary float-left mr-3               },
            {
                title: "Fase resolución",
                cmd: "resolucion",
                uiIcon: "far fa-pencil fa-lg text-primary float-left mr-3"
            },
            {
                title: "Eliminar",
                cmd: "delete",
                uiIcon: "far fa-trash-alt fa-lg text-danger float-left mr-3",
            }
        ],

        select: function(event, ui) {
            var numexp = ui.extraData.numExp;
            var numLiq = ui.extraData.numLiq;
            switch (ui.cmd) { // Acciones asociadas a cada opción del menú
                case "tramitacion":
                    break;
                    case "resolucion":
                    break;

                    case "importar":
                    delete;

            }
        }
    });

Thanks for your help

allan

I don't see any DataTables configuration or initialisation there. Can you link to a test case showing the issue, per the forum rules please?

Allan

gorka

Hi allan,

I am sorry but I can not give you a link to test because I am working in local.

These are datatables configurations:

$importarLiquidaciones = $('#tablaImportarLiquidaciones');
    dImportarLiquidaciones = $importarLiquidaciones.DataTable({
        lengthChange: false,
        pageLength: 10,
        order: [],
        "createdRow": function( row, data, dataIndex ) {
            $(row).attr('data-numLiq',data.numLiquidacion)
                  .attr('data-numExp',data.codExp);
          },
        aoColumnDefs: [{
          'bSortable': false, 'aTargets': [ 0, 3]
        }],
        "autoWidth": false,
        "columns":[
          {"data":"codExp","visible": false},
          {"data":"nif","width": "17%"},
          {"data":"numLiquidacion","width": "20%"},
          {"data":"concepto","width": "26%"},
          {"data":"fechaNotificacion","width": "21%"},
          {"data":"importe","width": "16%"}
        ],
        rowId: 'numLiquidacion',
        "fnDrawCallback": function(oSettings) {
            if (oSettings._iDisplayLength >= oSettings.fnRecordsDisplay()) {
                $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
            } else {
                $(oSettings.nTableWrapper).find('.dataTables_paginate').show();
            }
            if (oSettings.fnRecordsDisplay() >= 0) {
                $(oSettings.nTableWrapper).find('.dataTables_info').show();
                $importarLiquidaciones.parent().toggle(true);
            } else {
                $importarLiquidaciones.parent().toggle(false);
              $(oSettings.nTableWrapper).find('.dataTables_info').hide();
            }
        },
        "language": {
            url: urlEstatico + '/js/plugins/datatables/i18n/'+ idioma +'-ES.json'
        }
    });
                                                                                                         
        $table3 = $('#tablaLiquidaciones');
    dTable3 = $table3.DataTable({
        lengthChange: false,
        "autoWidth": false,
        pageLength: 10,
        "createdRow": function( row, data, dataIndex ) {
          $(row).addClass('liquidaciones')
                .attr('data-numLiq',data.numeroLiquidacion);
        },
        "columns":[
          {"data": "id"},
          {"data": "numeroLiquidacion","width": "18%"},
          {"data": "concepto","width": "26%"},
          {"data": "fechaFirmeza","width": "13%"},
          {"data": "sancion","width": "13%"},
          {"data": "tipoCondonacion","width": "27%"}
        ],
         "columnDefs": [ 
            {
                "targets": [ 0 ],
                "visible": false,
                "searchable": false
            }
        ],
        rowId: 'id',
        "fnDrawCallback": function(oSettings) {
            if (oSettings._iDisplayLength >= oSettings.fnRecordsDisplay()) {
                $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
            } else {
                $(oSettings.nTableWrapper).find('.dataTables_paginate').show();
            }
            if (oSettings.fnRecordsDisplay() >= 0) {
                $(oSettings.nTableWrapper).find('.dataTables_info').show();
                $table3.parent().toggle(true);
            } else {
              $table3.parent().toggle(false);
              $(oSettings.nTableWrapper).find('.dataTables_info').hide();
            }
        },
        "language": {
            url: urlEstatico + '/js/plugins/datatables/i18n/'+ idioma +'-ES.json'
        }
    });

Maybe, there is a link with an example with 2 tables in a same page and each of them with its own context menu.

Thank you allan.

bindrid

looks to me that your {} are not balanced in the second menu list

bindrid

same can be said for your first menu list

bindrid

ooops, my bad. I did scroll far enough

bindrid

however, it does look like you are missing a close " on the first item in the first menu item in each menu.

gorka

Hi bindrid,

You are rigth but the problem continues.

Thanks

colin

Hi @gorka ,

I think the problem is because you're searching and manipulating generic DataTables classes, such as ".dataTables_paginate" and ".dataTables_info". When you do that, it will change those elements for both tables.

To make it table specific, use the ID rather than the class, for example

.dataTables_info -> #tablaLiquidaciones_info

Hope that does the trick,

Cheers,

Colin

gorka

Hi colin,

I have made tha changes you have told me but the problem continues.

Thanks for the answer.

colin

Hi @gorka ,

I think it's time for that test case that Allan requested earlier - if we can see the problem, it'll be easier to find the solution.

Cheers,

Colin

bindrid

Your code shows, as far as I can tell, "delete" in your switch statement which does not seem to be defined anywhere.