Home / Questions / 485152
Accepted
Miguel
Asked: 2022-09-20 04:25:14 +0800 CST 2022-09-20 04:25:14 +0800 CST

Open modal on iteration with JavaScript

  • 772

Hi, I'm iterating some results of a query with AJAX and I'm doing a forto iterate all the ones there are.

success: function (resultado){
     $.each(resultado , function(index, productos) { 
        for(i = 0; i < productos.length; i++){
           if(idCategoria == 6) {
               $('#zonaProductos').append('<div class="lasCat seleccionProducto center" data-id="'+ productos[i].id +'">\
                   <a href="#'+ productos[i].slug +'" class="abrModal" data-user="'+ productos[i].slug +'" data-toggle="modal" data-target="#'+ productos[i].slug +'" id="#'+ productos[i].slug +'">\
                   <img src="'+ productos[i].foto +'" alt="" class="img-fluid">\
                   <h2>'+ productos[i].name +'</h2>\
                   </a>\
                  </div>');
                                

                  $('.seleccionProducto').on('click',function () {
                     var prod = $(this).data("id");
                     var url = '/ficha-producto-pizza';
                     $.ajax({
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        type: "GET",
                        url: url,
                        data: {'prod': prod},
                        success: function (elProducto){
                            $('#zonaProductos').append('<div class="modal left modalLat" id="'+ elProducto.producto.slug +'" tabindex="-1"  role="dialog" aria-labelledby="'+ elProducto.producto.slug +'" aria-hidden="true" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5)";>\
                                <div class="modal-dialog myModal" role="document">\
                                    <div class="modal-content">\
                                        <a class="cerrar_modal_lateral"><i class="fas fa-times"></i></a>\
                                           <h2>'+ elProducto.producto.name +'</h2>\
                                        </div>\
                                     </div>\
                                 </div>')
                                },
                             });
                             abreMenu();
                            });   
                        } 
                    }
                });
            },

And then I have the function abreMenu();to display the side modal.

function abreMenu() {
        var menuLateral = true;
        $('.abrModal').click(function(){
            $('.myModal').animate({ width:'640px' });
            menuLateral=false;
        });
        $('.cerrar_modal_lateral').click(function(){
            $('.myModal').animate({ width:'0px' });
            $('.modalLat').modal('hide');//ocultamos el modal
            $('body').removeClass('modal-open');//eliminamos la clase del body para poder hacer scroll
            menuLateral=true;
        });
    };

But what happens is that it iterates two products the first result of the AJAX, that's fine because there are two, but when I press the product to open the modal, I have to press just twice, as if it were the number of cycles there is, then once to open I have clicked twice on each of the two, it already opens the first time, worse if I open it twice, a long delay is generated in the appearance of the modal, surely I am doing many things wrong.

javascript

1 Answers

  1. Best Answer

    I publish the solution that I have given to the problem.

    success: function (resultado){
                // No modifiques el hash el enlace lo actualizó
                $.each(resultado , function(index, productos) { 
                    for(i = 0; i < productos.length; i++){
                        //Comprobamos que id de categoria viene
                        //Si es 6 = (pizza) mostramos otra pantalla diferente
                        if(idCategoria == 6) {
                            $('#zonaProductos').append('<div class="lasCat seleccionProducto center" data-id="'+ productos[i].id +'">\
                                <a class="abrModal">\
                                    <img src="'+ productos[i].foto +'" alt="" class="img-fluid">\
                                    <h2>'+ productos[i].name +'</h2>\
                                </a>\
                                </div>');
                             
                         
                        } 
                    }                    
                });
            },

    I have removed the successand forthe click to display the modal, I also removed hrefthe functions to open the modal. Once that's done, create a new function.

    $('#zonaProductos').on( 'click', '.seleccionProducto', function(){
        var prod = $(this).attr("data-id");
        var url = '/ficha-producto-pizza';
        $.ajax({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            type: "GET",
            url: url,
            data: {'prod': prod},
            success: function (elProducto){
                $('#zonaProductos').append('<div class="modal left modalLat" id="'+ elProducto.producto.slug +'" tabindex="-1"  role="dialog" aria-labelledby="'+ elProducto.producto.slug +'" aria-hidden="true" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5)";>\
                    <div class="modal-dialog myModal" role="document">\
                        <div class="modal-content">\
                            <a class="cerrar_modal_lateral"><i class="fas fa-times"></i></a>\
                            <h2>'+ elProducto.producto.name +'</h2>\
                        </div>\
                    </div>\
                </div>')
                //Una vez cargado el modal, ya podemos hacer click en el botón de mostrar
                $("#" + elProducto.producto.slug +"").modal("show");
                //Llamamos a la función para darle ancho a la ventana de modal
                abreMenu(); 
            },
        });
        //abreMenu();
    });

    In this function I listen through a function clickwhich is the data-idproduct that I am clicking on, once the modal window is generated I add that it is $("#" + elProducto.producto.slug +"").modal("show");displayed and once it is going to be displayed I call the function abreMenu(); .

    Also the function abreMenu()I have had to change things.

    function abreMenu() {
  var menuLateral = true;
        
  $('.myModal').animate({ width:'640px' });
    menuLateral=false;
        
  $('.cerrar_modal_lateral').click(function(){
    $('.myModal').animate({ width:'0px' });
    $('.modalLat').modal('hide');//ocultamos el modal
    $('body').removeClass('modal-open');//eliminamos la clase del body para poder hacer scroll
    menuLateral=true;
   });
};

    I have removed the click event $('.abrModal').click(function(){because I am already opening it from the success.

    I don't know if it's the best way I've fixed it but it works fine.

    • 1