TypeError: $ (...) .dialog is not a function

0

My error is as follows: I have a modal window that works, that window has the following code:

$(document).ready(function () {
    $('.accesori').click(function () {
        var id = this.getAttribute('id');
        //alert(id);

        $.get("module/accesori/controller/controller_accesori.php?op=read&id=" + id, function (data, status) {
            var json = JSON.parse(data);
            console.log(json);

            if(json === 'error') {
                //console.log(json);
                //pintar 503
                window.location.href='index.php?page=503';
            }else{
                console.log(json.accesori);
                $("#accesori").html(json.accesori);
                $("#imatge_accesori").html(json.imatge_accesori);
                $("#email").html(json.email);
                $("#codprod").html(json.codprod);
                $("#marca").html(json.marca);
                $("#modelo").html(json.modelo);
                $("#cantitat").html(json.cantitat);
                $("#data1").html(json.data1);
                $("#data2").html(json.data2);
                $("#pais").html(json.pais);
                $("#idioma").html(json.idioma);
                $("#observaciones").html(json.observaciones);
                $("#valoracio").html(json.valoracio);

                $("#details_accesori").show();
                $("#accesori_modal").dialog({
                    width: 850, //<!-- ------------- ancho de la ventana -->
                    height: 500, //<!--  ------------- altura de la ventana -->
                    //show: "scale", <!-- ----------- animación de la ventana al aparecer -->
                    //hide: "scale", <!-- ----------- animación al cerrar la ventana -->
                    resizable: "false", //<!-- ------ fija o redimensionable si ponemos este valor a "true" -->
                    //position: "down",<!--  ------ posicion de la ventana en la pantalla (left, top, right...) -->
                    modal: "true", //<!-- ------------ si esta en true bloquea el contenido de la web mientras la ventana esta activa (muy elegante) -->
                    buttons: {
                        Ok: function () {
                            $(this).dialog("close");
                        }
                    },
                    show: {
                        effect: "blind",
                        duration: 1000
                    },
                    hide: {
                        effect: "explode",
                        duration: 1000
                    }
                });
            }//end-else
        });
    });
});

The problem is that now I have put a template, and tells me the error of the title, and I would like to know some solution, I know that it is some compatibility issue of libraries and / or versions, but I can not find it, any suggestion ? Thanks.

EDIT:

The libraries that I use for the modal window and the datepicker to work are the following:

        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
    
asked by Carloscr99 12.01.2018 в 13:10
source

2 answers

0

Finally I solved the error I had, and, indeed, it was because of some libraries that the template had, after commenting on these libraries, the modal window with the code I had previously worked again, and neither did it in conflict with the datepicker. Many thanks anyway to A. Cedano for his interest. The libraries that I had to comment on were the following:

<script src="assets/plugins/jquery-1.10.2.js"></script>
<script src="assets/plugins/bootstrap.js"></script>

Which came in the template and make use of jquery and bootstrap plugins and came into conflict with the ones I had at the beginning

    
answered by 14.01.2018 / 10:55
source
0

When I saw your code I was curious to know if it was possible to hear the clicks occurred in a class.

The code snippet that follows shows that is not possible , at least as you are trying.

This $('.accesori').click(function () { will not work .

$(document).ready(function() {
  /*click sin on*/
  $('.class_accesori').click(function() {
    alert(1);
  });
  $('#id_accesori').click(function() {
    alert($(this).text());
  });

  /*click sin con on*/

  $(".class_accesori").on("click", function() {
    alert($(this).text());
  });

  $("#id_accesori").on("click", function() {
    alert($(this).text());
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class "class_accesori">Escuchando la clase: Click aquí (no funcionará)</div>
<hr />
<div id="id_accesori">Escuchando el ID: Click aquí  (funcionará)</div>
    
answered by 12.01.2018 в 13:44