Diferent context menu in same page

Diferent context menu in same page

gorkagorka Posts: 5Questions: 2Answers: 0
edited May 2018 in Free community support

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

Answers

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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

  • gorkagorka Posts: 5Questions: 2Answers: 0

    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.

  • bindridbindrid Posts: 730Questions: 0Answers: 119

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

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    same can be said for your first menu list

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    ooops, my bad. I did scroll far enough

  • bindridbindrid Posts: 730Questions: 0Answers: 119

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

  • gorkagorka Posts: 5Questions: 2Answers: 0

    Hi bindrid,

    You are rigth but the problem continues.

    Thanks

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    edited May 2018

    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

  • gorkagorka Posts: 5Questions: 2Answers: 0

    Hi colin,

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

    Thanks for the answer.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • bindridbindrid Posts: 730Questions: 0Answers: 119

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

This discussion has been closed.