Jquery-ui dialogs do not work

Navigation
0

I have the following problem:

I want to open a dialog of jquery-ui

for which I have the following code: 

<div id="dialog-form" title="TEST DIALOG">
    <h3>Prueba Dialogo</h3>
    <form action="" method="POST"></form>
</div>

$( document ).ready(function() {
  $(function() {
    var dialog, form;

    function crear(){
        alert("Creado");
    }

    dialog = $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Crear": crear,
        Cancelar: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();

      }
    });

    form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();

    });

    $( "#create-user" ).button().on( "click", function() {
      dialog.dialog( "open" );
    });
  });
});

But I miss an error, I've already tried changing the versions of jquery, and jquery-ui.

What could I do to fix this error?

Error: 

Uncaught TypeError: $.ui.safeActiveElement is not a function

open    @   jquery-ui.js:11929
(anonymous function)    @   jquery-ui.js:144
(anonymous function)    @   jquery-ui.js:256
each    @   jquery-1.12.4.js:370
each    @   jquery-1.12.4.js:137
$.fn.(anonymous function)   @   jquery-ui.js:236
(anonymous function)    @   VM8014:53
dispatch    @   jquery-1.12.4.js:5226
elemData.handle @   jquery-1.12.4.js:4878

EDIT

So I charge the css and js 

    <link  rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/bootstrap.css" media="screen" />
    <link  rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/jquery.easyselect.min.css" media="screen">
    <link  rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/jquery.alerts.css" media="screen" />
    <link  rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/datepicker/css/datepicker.css" media="screen">

    <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/jquery.dataTablesBoostrap.css">
    <link  rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/jquery-ui.css" media="screen" />


    <script type="text/javascript" charset="utf8" src="<?php echo base_url();?>js/jquery-1.12.4.js"></script>
    <script type="text/javascript" charset="utf8" src="<?php echo base_url();?>js/jquery-ui.js"></script>

    <script type="text/javascript" src="<?php echo base_url();?>js/jquery.easyselect.min.js"></script>

    <script type="text/javascript" src="<?php echo base_url();?>js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url();?>js/jquery.ui.draggable.js" ></script>
    <script type="text/javascript" src="<?php echo base_url();?>js/jquery.alerts.js"> </script>
    <script type="text/javascript" src="<?php echo base_url();?>js/jquery.browser.js"></script> 

    <script type="text/javascript" src="<?php echo base_url();?>js/mapa.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&callback=initialize" async defer></script>
    <script type="text/javascript" src="<?php echo base_url();?>js/funciones.js"></script>
    <script type="text/javascript" charset="utf8" src="<?php echo base_url();?>js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf8" src="<?php echo base_url();?>js/dataTables.bootstrap.min.js"></script>
    
asked by Juan Pinzón 02.02.2017 в 18:04
source

2 answers

0

You probably use a jquery-ui.js custom .

One solution is to download the file safe-active-element.js and include it just below the jquery-ui.js

PS: It is advisable to validate that the version of both is the same.

    
answered by 02.02.2017 / 18:38
source
0

Try this 

$("#dialog-form").dialog({
  autoOpen: false,
  height: 300,
  width: 350,
  modal: true,
  buttons: [
   {
     text: "Crear",
     click: function() {
       alert("Creado")
     }
   },
   {
     text: "close",
     click: function() {
       $(this).dialog("close")
     }
   }
 ],
 close: function() {
    form[ 0 ].reset()
 }})
    
answered by 02.02.2017 в 20:00
no implicit conversion of Symbol into Integer (RAILS) Problems with doing maintenance on java spring