What is a promise in Javascript?

Question

bypabloc_

Asked: 2020-01-11 15:12:20 +0800 CST 2020-01-11 15:12:20 +0800 CST 2020-01-11 15:12:20 +0800 CST

The search engine of a "select2" in a modal made with "BootstrapDialog" does not work for me

772

Using a select2 inside a modal made with bootstrap3-dialog does not allow me to use the built-in search engine.

I leave the link in jsfiddle.net with some test array .

2 Answers

Voted

alanfcm · Answer 1 · 2020-01-11T15:41:47+08:00

This is a known problem with select2and BootstrapDialog. One solution is to remove the attribute tabindexfrom the dialog. It would be like this:

$( document ).ready(function() {
  let modal_popup = verObservs_dialog();
    modal_popup.open();
    $(window).on('shown.bs.modal', function() { 
      $(".modal.bootstrap-dialog").removeAttr("tabindex");
    });
});

let impuesto = 18.00;

function verObservs_dialog(){
    let dialog = new BootstrapDialog({
        size: BootstrapDialog.SIZE_SMALL,
        title: 'Prueba',
        message: function(dialogRef){
            dialogRef.getModalContent()[0].getElementsByClassName("modal-body")[0].setAttribute('class', 'panel-body');

            var form = $('<form/>',{
                'id' : 'form_observs',
                'role'  : 'form',
                'class'  : 'form-horizontal'
            });
            let div;
            let label;
            let div_field;
            let field;

            let div_b = $('<div/>',{
                'class' : 'form-group col-sm-12 col-xs-12',
            });
                let label_b = $('<label/>',{
                    'class' : 'text-center col-xs-12 col-sm-12 col-md-12 col-lg-12',
                    'text'    : 'Productos'
                });
                label_b.appendTo(div_b);

                let div_into_li;
                div = $('<ul/>',{
                    'class' : 'nav nav-tabs',
                    'role'  : 'tablist',
                });
                    label = $('<li/>',{
                        'class' : 'active',
                    });
                        div_into_li = $('<a/>',{
                            'href'        : '#productos',
                            'role'        : 'tab',
                            'data-toggle' : 'tab',
                            'html'        : 'Productos',
                        });
                        div_into_li.appendTo(label);
                    label.appendTo(div);

                    label = $('<li/>',{
                        'class' : '',
                    });
                        div_into_li = $('<a/>',{
                            'href'        : '#categorias',
                            'role'        : 'tab',
                            'data-toggle' : 'tab',
                            'html'        : 'Categorias',
                        });
                        div_into_li.appendTo(label);
                    label.appendTo(div);
                div.appendTo(div_b);

                let div_content = $('<div/>',{
                    'class' : 'tab-content',
                });
                    let label_content = $('<div/>',{
                        'class' : 'tab-pane fade active in', 
                        'style' : 'padding-top:5%;padding-bottom:5%;', 
                        'id'    : 'productos',
                    });
                        div = $('<div/>',{
                            'class' : 'form-group col-sm-12 col-xs-12',
                        });
                            label = $('<label/>',{
                                'for' : 'categoria_producto',
                                'class' : 'control-label col-sm-3 col-xs-12',
                                'text'    : 'Categorias: '
                            });
                            label.appendTo(div);
                            div_field = $('<div/>',{
                                'class' : 'col-sm-9 col-xs-12',
                            });
                                let field_categoria_producto = $('<select/>',{
                                    'class' : 'form-control select2-select',
                                    'id' : 'categoria_producto',
                                    'name' : 'categoria_producto',
                                    'style' : 'width: 100%;',
                                });
                                field_categoria_producto.appendTo(div_field);
                            div_field.appendTo(div);
                        div.appendTo(label_content);

                        div = $('<div/>',{
                            'class': 'form-group col-xs-12 col-sm-12 col-md-12 col-lg-12',
                        });
                            label = $('<label/>',{
                                'for' : 'producto',
                                'class' : 'control-label col-xs-12 col-sm-3 col-md-3 col-lg-3',
                                'text'    : 'Producto(s): '
                            });
                            label.appendTo(div);
                            
                            div_field_min = $('<div/>',{
                                'class' : 'col-xs-10 col-sm-6 col-md-6 col-lg-6',
                            });
                                let field_insumo = $('<select/>',{
                                    'class' : 'form-control',
                                    'id' : 'producto',
                                    'name' : 'producto',
                                    'style' : 'width: 100%;',
                                });
                                field_insumo.appendTo(div_field_min);
                            div_field_min.appendTo(div);
                            
                            div_field_min = $('<div/>',{
                                'class' : 'col-xs-2 col-sm-3 col-md-3 col-lg-3',
                            });
                                field = $('<button/>',{
                                    class:'btn btn-info',
                                    'id' : 'producto_b',
                                    'name' : 'producto_b',
                                    'style' : 'width: 100%;',
                                });
                                    span_icon = $('<span/>',{
                                        class: 'fas fa-plus',
                                    });
                                    span_icon.appendTo(field);
                                    span_text = $('<span/>',{
                                        class: 'hidden-xs',
                                        html: ' Agregar',
                                    });
                                    span_text.appendTo(field);
                                field.appendTo(div_field_min);
                            div_field_min.appendTo(div);
                        div.appendTo(label_content);

                    label_content.appendTo(div_content);
                    
                    label_content = $('<div/>',{
                        'class' : 'tab-pane fade',
                        'id'    : 'categorias',
                        'html'  : '<h2>Contenido Botones</h2>'
                    });

                    label_content.appendTo(div_content);
                div_content.appendTo(div_b);

                let div_field_b = $('<div/>',{
                    'class' : 'col-sm-12 col-xs-12',
                });

                    field_categoria_producto.select2({
                        placeholder: "Elija...",
                        allowClear: true,
                        data:categorias,
                        escapeMarkup: function (markup) { return markup; },
                        templateResult: categorias_formatData,
                        templateSelection: categorias_formatDataSelection
                    }).on('select2:select', function (e) {
                        let datos = e.params.data.productos;
                        datos.sort((a,b) => a.text < b.text ? -1 : +(a.text > b.text));
                        field_insumo.empty();
                        field_insumo.select2({
                            placeholder: "Elija...",
                            allowClear: true,
                            data: datos,
                            escapeMarkup: function (markup) { return markup; },
                            templateResult: proveedor_formatData,
                            templateSelection: proveedor_formatDataSelection,
                        }).on('select2:select', function (e) {
                            let datos = e.params;
                            console.log(datos);
                        });
                        function proveedor_formatData (data) {
                            if (data.loading) return data.text;
                            return data.text;
                        }
                        function proveedor_formatDataSelection (data) {
                            return data.text;
                        }
                        field_insumo.val(null).trigger("change");
                    }).on('select2:unselect', function (e) {
                        let datos = productos;
                        field_insumo.empty();
                        field_insumo.select2({
                            placeholder: "Elija...",
                            allowClear: true,
                            data: datos,
                            escapeMarkup: function (markup) { return markup; },
                            templateResult: proveedor_formatData,
                            templateSelection: proveedor_formatDataSelection,
                        }).on('select2:select', function (e) {
                            let datos = e.params;
                        });
                        function proveedor_formatData (data) {
                            if (data.loading) return data.text;
                            return data.text;
                        }
                        function proveedor_formatDataSelection (data) {
                            return data.text;
                        }
                        field_insumo.val(null).trigger("change");
                    });
                    function categorias_formatData (data) {
                        if (data.loading) return data.text;
                        return data.text;
                    }
                    function categorias_formatDataSelection (data) {
                        return data.text;
                    }

                    field_insumo.select2({
                        placeholder: "Elija...",
                        allowClear: true,
                        data: productos,
                        escapeMarkup: function (markup) { return markup; },
                        templateResult: proveedor_formatData,
                        templateSelection: proveedor_formatDataSelection,
                    }).on('select2:select', function (e) {
                    });
                    function proveedor_formatData (data) {
                        if (data.loading) return data.text;
                        return data.text;
                    }
                    function proveedor_formatDataSelection (data) {
                        return data.text;
                    }

                    field_insumo.val(null).trigger("change");
                    field_categoria_producto.val(null).trigger("change");

                    let th;
                    let tr = $('<tr/>');

                    function result_total(){
                        let filas = $("[id$=filas]");
                        let total = 0;
                        for (var i = filas.length - 1; i >= 0; i--) {
                            if(filas[i].getAttribute('data-tipo') != 'eliminar'){
                                let fila = filas[i];
                                let cantidad  = (parseInt(fila.getElementsByClassName('cantidad')[0].innerHTML));
                                let precio    = parseFloat(fila.getElementsByClassName('precio')[0].innerHTML);
                                let cant_prec = precio*cantidad;
                                total += parseFloat(cant_prec);
                            }
                        }
                        let base          = total/(1+(impuesto/100));
                        let impuesto_porc = (total-(total/(1+(impuesto/100))));

                        $('#subtotal').html(base.toFixed(2));
                        $('#subtotal_impuesto').html(impuesto_porc.toFixed(2));
                        $('#subtotal_mas_impuesto').html(total.toFixed(2));
                    }

                    field.on('click', function(event) {
                        event.preventDefault();

                        let datos = field_insumo.select2('data')[0];

                        console.log(datos);
                    });

                    
                div_field_b.appendTo(div_b);
            div_b.appendTo(form);

            return form;
        },
        buttons: 
        [{
            label: 'Cerrar',
            icon: 'fa fa-remove',
            action: function(dialogRef) {
                dialogRef.close();
            }
        }],
    });
    return dialog;
};

let productos = [
  {
    "id": 435,
    "text": "aaaa",
    "precio": "11.00",
    "observ": [
      {
        "id": 83,
        "descripcion": "Mucha azucar"
      },
      {
        "id": 85,
        "descripcion": "Con toppings"
      },
      {
        "id": 86,
        "descripcion": "Con Chocolate"
      },
      {
        "id": 87,
        "descripcion": "Con alfajores"
      },
      {
        "id": 88,
        "descripcion": "Con caramelos"
      }
    ]
  },
  {
    "id": 275,
    "text": "Arroz con leche",
    "precio": "15.00",
    "observ": [
      {
        "id": 83,
        "descripcion": "Mucha azucar"
      },
      {
        "id": 85,
        "descripcion": "Con toppings"
      },
      {
        "id": 86,
        "descripcion": "Con Chocolate"
      },
      {
        "id": 87,
        "descripcion": "Con alfajores"
      },
      {
        "id": 88,
        "descripcion": "Con caramelos"
      }
    ]
  },
  {
    "id": 313,
    "text": "Arroz zambito",
    "precio": "27.00",
    "observ": [
      {
        "id": 83,
        "descripcion": "Mucha azucar"
      },
      {
        "id": 85,
        "descripcion": "Con toppings"
      },
      {
        "id": 86,
        "descripcion": "Con Chocolate"
      },
      {
        "id": 87,
        "descripcion": "Con alfajores"
      },
      {
        "id": 88,
        "descripcion": "Con caramelos"
      }
    ]
  },
  {
    "id": 410,
    "text": "Cafe",
    "precio": "4.00",
    "observ": [
      {
        "id": 120,
        "descripcion": "Sin sorbete"
      }
    ]
  },
  {
    "id": 413,
    "text": "Cola Inglesa 3L",
    "precio": "20.00",
    "observ": [
      {
        "id": 84,
        "descripcion": "Bajo Azucar"
      }
    ]
  },
  {
    "id": 312,
    "text": "Flan",
    "precio": "24.00",
    "observ": [
      {
        "id": 83,
        "descripcion": "Mucha azucar"
      },
      {
        "id": 85,
        "descripcion": "Con toppings"
      },
      {
        "id": 86,
        "descripcion": "Con Chocolate"
      },
      {
        "id": 87,
        "descripcion": "Con alfajores"
      },
      {
        "id": 88,
        "descripcion": "Con caramelos"
      }
    ]
  },
  {
    "id": 407,
    "text": "Frugos",
    "precio": "12.00",
    "observ": [
      {
        "id": 84,
        "descripcion": "Bajo Azucar"
      }
    ]
  },
  {
    "id": 412,
    "text": "Inka Cola 1L",
    "precio": "14.00",
    "observ": [
      {
        "id": 84,
        "descripcion": "Bajo Azucar"
      }
    ]
  },
  {
    "id": 311,
    "text": "Leche asada",
    "precio": "5.00",
    "observ": [
      {
        "id": 83,
        "descripcion": "Mucha azucar"
      },
      {
        "id": 85,
        "descripcion": "Con toppings"
      },
      {
        "id": 86,
        "descripcion": "Con Chocolate"
      },
      {
        "id": 87,
        "descripcion": "Con alfajores"
      },
      {
        "id": 88,
        "descripcion": "Con caramelos"
      }
    ]
  },
  {
    "id": 314,
    "text": "Manzana acaramelada",
    "precio": "15.00",
    "observ": [
      {
        "id": 83,
        "descripcion": "Mucha azucar"
      },
      {
        "id": 85,
        "descripcion": "Con toppings"
      },
      {
        "id": 86,
        "descripcion": "Con Chocolate"
      },
      {
        "id": 87,
        "descripcion": "Con alfajores"
      },
      {
        "id": 88,
        "descripcion": "Con caramelos"
      }
    ]
  },
  {
    "id": 310,
    "text": "Mazamorra morada",
    "precio": "20.00",
    "observ": [
      {
        "id": 83,
        "descripcion": "Mucha azucar"
      },
      {
        "id": 85,
        "descripcion": "Con toppings"
      },
      {
        "id": 86,
        "descripcion": "Con Chocolate"
      },
      {
        "id": 87,
        "descripcion": "Con alfajores"
      },
      {
        "id": 88,
        "descripcion": "Con caramelos"
      }
    ]
  },
  {
    "id": 411,
    "text": "Te",
    "precio": "7.00",
    "observ": [
      {
        "id": 120,
        "descripcion": "Sin sorbete"
      }
    ]
  }
];

let categorias = [
  {
    "id": 67,
    "text": " Bebidas Calientes",
    "observ": [
      {
        "id": 120,
        "descripcion": "Sin sorbete"
      }
    ],
    "productos": [
      {
        "id": 410,
        "text": "Cafe",
        "precio": 4
      },
      {
        "id": 411,
        "text": "Te",
        "precio": 7
      }
    ]
  },
  {
    "id": 66,
    "text": " Bebidas Frias",
    "observ": [
      {
        "id": 84,
        "descripcion": "Bajo Azucar"
      }
    ],
    "productos": [
      {
        "id": 407,
        "text": "Frugos",
        "precio": 12
      },
      {
        "id": 412,
        "text": "Inka Cola 1L",
        "precio": 14
      },
      {
        "id": 413,
        "text": "Cola Inglesa 3L",
        "precio": 20
      }
    ]
  },
  {
    "id": 51,
    "text": " Postres",
    "observ": [
      {
        "id": 83,
        "descripcion": "Mucha azucar"
      },
      {
        "id": 85,
        "descripcion": "Con toppings"
      },
      {
        "id": 86,
        "descripcion": "Con Chocolate"
      },
      {
        "id": 87,
        "descripcion": "Con alfajores"
      },
      {
        "id": 88,
        "descripcion": "Con caramelos"
      }
    ],
    "productos": [
      {
        "id": 275,
        "text": "Arroz con leche",
        "precio": 15
      },
      {
        "id": 310,
        "text": "Mazamorra morada",
        "precio": 20
      },
      {
        "id": 311,
        "text": "Leche asada",
        "precio": 5
      },
      {
        "id": 312,
        "text": "Flan",
        "precio": 24
      },
      {
        "id": 313,
        "text": "Arroz zambito",
        "precio": 27
      },
      {
        "id": 314,
        "text": "Manzana acaramelada",
        "precio": 15
      },
      {
        "id": 435,
        "text": "aaaa",
        "precio": 11
      }
    ]
  }
];

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

Ana Pimentel · Answer 2 · 2022-08-28T10:26:14+08:00

Ana Pimentel

2022-08-28T10:26:14+08:002022-08-28T10:26:14+08:00

An easy way is by adding the following:

 $('#mySelect2').select2({
            dropdownParent: $('#myModal .modal-body')
        });

I read this here

0

The search engine of a "select2" in a modal made with "BootstrapDialog" does not work for me

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?