Crear una ventana modal ui con datos cargados desde una consulta ajax mediante Jquery
Bueno no me gusta escribir mucho sobre cuales librerías debes cargar y eso, en fin, debes tener jquery y jquery-ui para usar las modales.
manos a la obra, bueno todos sabemos que debemos crear algún botón con id al cual darle click para que salte el modal, y crear un div con id del modal para poder modificarlo, esta modal contendrá un botón el cual serializara los datos para efectuar la consulta ajax, y un botón cancelar para cerrar la ventana modal.
mas abajo vemos como se edita el html de la ventana modal para desplegar el mensaje en la ventana modal
en este caso un típico quiere guardar los datos ?
en fin no creo que necesite mas explicación este código
a ver el código
Sin título (2)
$(function(){ var u = document.location.href.split("/"); var n = u.length; var _url = "http:"; var i=0; n=n-3; for(i=0;i<=n;i++){ _url+="/"+u[i+1]; } _url+="/guardar" $('#guardar').click(function(){ $('#modal').dialog({ autoOpen: false, modal: true, position:'center', height: 200, width: 250, buttons: { "Aceptar": function() { var checking = $('#check').jserialize(); loading('#cargando','Cargando'); $.ajax({ url:_url ,type : "POST" ,async: true ,data : checking ,success: function(msg){ $('#modal').dialog('close'); loading(); } }); }, "Cancelar": function(){ $('#modal').dialog('close'); } } }); var html = " <br><br><br>"; html+="<div class = 'ui-state-highlight ui-corner-all'>"; html+="<div class = 'ui-icon ui-icon-info '></div>"; html+="<center>¿Seguro que quiere Guardar los Datos ? </center></div><br><br><br>"; $('#modal').html (html); $('#modal').dialog('open'); }); });
Comentarios
Publicar un comentario