1 00:00:00,600 --> 00:00:05,860 En este video vamos a ver cómo agregar la funcionalidad para eliminar los registros. 2 00:00:06,060 --> 00:00:12,360 Lo primero que vamos a hacer es cada vez que alguien presione este botón se va a eliminar el registro 3 00:00:12,360 --> 00:00:17,650 nos va a preguntar a quienes estamos utilizando por el default que viene en el navegador. 4 00:00:17,650 --> 00:00:25,180 Hay algo que me hace falta es cuando doy Jabber aquí puedes ver que en este SI PARECE LA MANO EN ESTE 5 00:00:25,180 --> 00:00:37,080 NO SE de embarcarnos por así decirlo voy a colocar aquí PTM y me hace falta un veten Jover 7m Jabber 6 00:00:38,280 --> 00:00:45,080 cursor Painter dejen de Guardar cambios y recargar y aparecer así la mano entonces cada vez que alguien 7 00:00:45,080 --> 00:00:51,420 Presione aquí va a preguntarnos si queremos eliminar el registro si confirmamos lo va a eliminar. 8 00:00:51,770 --> 00:00:58,640 Primero vamos a abrir el LAP J.V y algo importante que va a saber en esta parte es que hay muchos íconos 9 00:00:58,640 --> 00:01:04,610 para eliminar podríamos escribir un selector un selector que seleccione todos esos. 10 00:01:04,910 --> 00:01:10,580 Y después cuando alguien de clic identificará en cuál dieron clic y de ahí eliminar el registro. 11 00:01:10,580 --> 00:01:16,640 Pero hay otra técnica que me gusta mucho utilizar sobretodo en este tipo de escenarios donde hay muchos 12 00:01:16,640 --> 00:01:23,840 elementos es algo que se conoce como delegacion y actualmente ya tenemos un The Body aquí y un selector 13 00:01:23,840 --> 00:01:25,560 que dice listado de contactos. 14 00:01:25,950 --> 00:01:35,990 Entonces vamos a ponerle aquí Lissner para eliminar el botón que ponemos listado de contactos punto 15 00:01:36,040 --> 00:01:46,750 a de Béliz Zener click y vamos a eliminar el contacto voy a copiar eliminar contacto esta función y 16 00:01:46,750 --> 00:01:50,920 me la llevo hasta abajo antes de las notificaciones. 17 00:01:52,440 --> 00:02:00,490 Eliminar el contacto most function ponemos el nombre de la función y abrimos llaves y colocaron Consol 18 00:02:00,530 --> 00:02:11,860 log diste clic guardamos cambios y voy a abrir Speck abrimos Consol y tenemos el selector en lo que 19 00:02:11,860 --> 00:02:14,740 viene siendo todo el the body. 20 00:02:14,830 --> 00:02:19,750 No importa dónde demos clic en toda la parte que viene siendo el The Body y puedes ver que va registrando 21 00:02:20,130 --> 00:02:20,830 qué hemos dado. 22 00:02:20,920 --> 00:02:24,930 Incluso aquí también en lo que es el botón de eliminar. 23 00:02:25,500 --> 00:02:32,590 Entonces básicamente delegacion trata de identificar a qué le diste clic y en base a ello es que ejecuta 24 00:02:32,590 --> 00:02:33,370 la acción. 25 00:02:33,380 --> 00:02:39,550 Quedas como un contenedor grande como éste pero gracias a algunos algún código que vamos a escribir 26 00:02:39,550 --> 00:02:45,490 enseguida puedes identificar a qué elemento se le dio clic entonces vamos a eliminar esto de nueva cuenta 27 00:02:45,490 --> 00:02:50,680 tenemos que pasarle leer nos va a reportar a qué elemento le hemos dado clic. 28 00:02:50,680 --> 00:02:59,860 Por lo tanto si pones el punto Target y guardas cambios puedes recargar y das click aquí se te detres 29 00:03:00,210 --> 00:03:03,540 o aquí vemos que seguí etcétera. 30 00:03:05,110 --> 00:03:07,560 No esperes ver cómo funciona aquí si le das clic en Editar. 31 00:03:07,680 --> 00:03:11,880 Obviamente te lleva a la otra página pero puedes presionar donde sea en cualquier lugar de estos y te 32 00:03:11,880 --> 00:03:17,790 va a ir reportando que le has dado click aquí vamos a colocar el siguiente código con mi punto target 33 00:03:17,790 --> 00:03:25,180 sabes qué es lo que dispara este evento por lo tanto aquí voy a cortar o voy a colocar aquí contó Parente 34 00:03:27,030 --> 00:03:27,590 element. 35 00:03:27,640 --> 00:03:36,350 Contó que las Liste porque si damos clic aquí por ejemplo en este icono de basura puedes ver que nos 36 00:03:36,350 --> 00:03:43,540 reporta lo que se lí pero si vemos el código tenemos ahí pero el botón está arriba que contiene Leydi. 37 00:03:43,550 --> 00:03:48,240 La clase de botón borrar por lo tanto vamos a utilizar algo que se conoce como otra versión de Edom 38 00:03:49,070 --> 00:03:56,090 que nos va a permitir ir del hijo hacia el padre con punto para un elemento que recargamos click aquí 39 00:03:56,440 --> 00:04:02,490 y vemos que ya tenemos el botón ya no nos reporta que es el icono sino que es el botón. 40 00:04:02,490 --> 00:04:14,390 Gracias a este elemento ponemos para en Element punto clase listo contains veten borrar esto va a revisar 41 00:04:14,390 --> 00:04:20,210 que exista esta clase lo hemos recargar podemos dar clic aquí vemos que no se le clica acá vemos que 42 00:04:20,210 --> 00:04:26,770 se Fool's cada que dé clic aquí vas a ver que estoy dando clic en el botón de borrar. 43 00:04:26,880 --> 00:04:30,770 Entonces la idea es que el código de eliminar solamente corra cuando Xatruch. 44 00:04:31,110 --> 00:04:41,910 Por lo tanto todo esto lo pongo en ONIF y abro paréntesis en caso de que esto sea True entonces ejecuta 45 00:04:41,910 --> 00:04:42,510 este código. 46 00:04:42,510 --> 00:04:49,250 Caso contrario no hagas nada no nos interesa lo que pueda pasar en caso de que demos clic en otro elemento 47 00:04:50,250 --> 00:04:56,190 entonces lo primero que vamos a hacer aquí es tomar el Heydi del elemento que le hemos dado o eliminar. 48 00:04:56,190 --> 00:05:03,180 Por ejemplo cuando click en eliminar este que sepa cuál es el aire y la ventaja es que tanto hiri como 49 00:05:03,180 --> 00:05:04,860 el botón están en el mismo nivel. 50 00:05:04,860 --> 00:05:13,510 Por lo tanto nada más tenemos que leer este Daura Heydi y poner un const ahí es igual a y punto target 51 00:05:13,750 --> 00:05:27,310 punto Padrenda Element get a tribute to get a Trivium y podemos dar Heydi de consol Lobb a Heydi y guardamos 52 00:05:27,320 --> 00:05:35,730 cambios y recargamos cada vez que dé clic aquí vemos que no soporta el 1 2 3 4 y voy reportando que 53 00:05:35,750 --> 00:05:37,740 hoy día hemos dado click para eliminarlo. 54 00:05:38,850 --> 00:05:45,640 Lo siguiente voy a comentar esta línea siguientes que le vamos a preguntar al usuario preguntará al 55 00:05:45,640 --> 00:05:49,150 usuario si están seguros lo probamos aquí Icons. 56 00:05:49,150 --> 00:05:56,410 Respuesta Vamos a utilizar el confirm la confirmación nativa que viene en el navegador nos ponemos confirm 57 00:05:57,990 --> 00:06:00,510 y le preguntamos estás seguro 58 00:06:06,800 --> 00:06:08,390 y aquí vamos a poner GIF. 59 00:06:08,450 --> 00:06:18,610 Respuesta En caso de que sea así con sólo si estoy seguro con su blog 60 00:06:21,360 --> 00:06:28,300 pensarlo más salgo así entonces en caso de que presionemos en que sí en la confirmación de nueva cuenta 61 00:06:28,390 --> 00:06:34,590 el nativo del navegador va a aparecer o va a correr esta parte en caso de que demos no va a correr esta 62 00:06:34,600 --> 00:06:41,110 otra cuenta recargamos click aquí se está seguro si le damos Cancelo vamos que dice Déjame pensarlo 63 00:06:41,110 --> 00:06:44,830 más si recargo doble clic aquí vemos que se está seguro. 64 00:06:45,160 --> 00:06:50,860 Si estoy seguro entonces esta pantalla puede verse diferente de acuerdo al navegador que es el nativo 65 00:06:51,460 --> 00:06:59,050 que viene en el navegador dependiendo si utilizas Crom si utilizas hecho cualquier navegador va a tener 66 00:06:59,110 --> 00:07:05,850 un diálogo diferente en el caso de que entre en el Liev que le presionen que si va a ejecutar un código 67 00:07:05,850 --> 00:07:10,800 de Ayax en el caso contrario no va a hacer nada se elimina en esta parte. 68 00:07:10,800 --> 00:07:19,450 Entonces vamos a hacer el llamado a Ayax que recuerda que es abrir la conexión crear el objeto abrir 69 00:07:19,450 --> 00:07:20,350 la conexión 70 00:07:24,880 --> 00:07:33,800 leer la respuesta y enviar la petición son cuatro acciones las que debemos de realizar. 71 00:07:33,800 --> 00:07:45,210 Lo primero es que vamos a crear el objeto de nueva cuenta X HR igual a new Xmen XML HTTP Request parentesis 72 00:07:45,810 --> 00:07:52,260 abrimos la conexión de nueva cuenta muy fácilmente H.R Open y en este caso va a ser Goeth porque vamos 73 00:07:52,260 --> 00:07:59,790 a extraer un dato que viene de la base de datos dató existente y en la base de datos y vamos a estar 74 00:07:59,790 --> 00:08:05,700 utilizando el mismo modelo que utilizábamos anteriormente el de contactos solamente que en esta parte 75 00:08:06,330 --> 00:08:13,310 como estamos pasando por Goeth se va a pasar el Heydi queremos eliminar por medio de la web R.L la diferencia. 76 00:08:13,320 --> 00:08:19,860 Por ejemplo cuando envías la petición que se de recent es que cuando mandas por post aquí se agrega 77 00:08:19,860 --> 00:08:20,850 la variable. 78 00:08:20,850 --> 00:08:25,710 Cuando mandas por post cuando mandas Projet se manda en la web R.L del Open. 79 00:08:26,420 --> 00:08:33,210 Entonces cómo vamos a inyectar una variable de JavaScript puede utilizar de nueva cuenta templetes strings 80 00:08:33,830 --> 00:08:41,170 y en diagonal modelos diagonal modelo contactos punto PHP. 81 00:08:41,530 --> 00:08:45,810 Le pasamos porque estamos pasando por el Heydi que queremos eliminar. 82 00:08:45,900 --> 00:08:55,720 En este caso el Saidi viene de aquí arriba ya lo estamos leyendo ponemos signo de dólar llaves y el 83 00:08:55,720 --> 00:09:01,360 Heydi entonces es un poco diferente a la consulta que habíamos realizado anteriormente puedes ver qué 84 00:09:01,360 --> 00:09:08,710 está mandábamos por post aquí está todos los datos se mandaban aquí en este nada más hacemos al archivo 85 00:09:08,740 --> 00:09:15,160 se mandatado por post y si recuerdas en este insertar base de datos leíamos la acción que en este caso 86 00:09:15,160 --> 00:09:21,280 era el valor que está oculto en el caso de eliminar no lo ocupas porque es obvio que cuando alguien 87 00:09:21,280 --> 00:09:23,320 presiona aquí quiere eliminarlo. 88 00:09:23,320 --> 00:09:29,560 Entonces lo vamos a pasar aquí directamente en la web R.L y acción porque estamos pasando dos parámetros 89 00:09:29,970 --> 00:09:35,590 y luego entró para hacer hacerlo asíncrono de nueva cuenta leer la respuesta que vamos a colocar y quizá 90 00:09:35,720 --> 00:09:44,270 repunten Elorza y esto va a ser una función y ponemos IP disputo estátus esto no cambia es igual a 200 91 00:09:44,270 --> 00:09:53,730 es decir que se realizó correctamente moscones resultado igual a Yeison por toparse X Sacher Response 92 00:09:53,750 --> 00:10:03,000 Text y le va a dar aquí un Consol Loja. al resultado entonces esto va a mandarlo por JEET al modelo 93 00:10:03,000 --> 00:10:08,790 de contactos así que vamos a abrir el modelo de contactos si recuerdas aquí tenemos un NIF de post acción 94 00:10:08,790 --> 00:10:16,620 crear voy a colapsar esta línea y aquí va a poner IBF pero en este caso vamos a revisar por qué la acción 95 00:10:17,250 --> 00:10:25,600 es igual a nada más tengo que revisar que aquí es borrar en caso de que sea borrar pues va a caer en 96 00:10:25,600 --> 00:10:26,560 esta parte. 97 00:10:26,650 --> 00:10:31,630 En caso de que sea crear CA y en el otro por eso me gusta crear estos modelos para manejar todas las 98 00:10:31,630 --> 00:10:37,730 distintas operaciones en un solo archivo y que vamos a ponerle hehco Jayson cows 99 00:10:40,310 --> 00:10:47,500 Get y de esa forma en la respuesta en el respond text que tenemos aquí se va a imprimir lo que viene 100 00:10:47,500 --> 00:10:54,670 por por ket que en este caso se Heydi y la acción de borrar únicamente el recargamos damos clic aquí 101 00:10:54,860 --> 00:11:02,220 damos ok y vemos que nos retorna la acción de borrar con el Heydi 7 si damos clic en otro el Leidi 12 102 00:11:02,230 --> 00:11:08,240 la acción sigue siendo la misma porque estamos presionando en esta parte y el Heydi 15 etcétera. 103 00:11:08,580 --> 00:11:14,230 Entonces el siguiente video vamos a ver cómo eliminar el registro en el modelo y realizar la consulta 104 00:11:14,230 --> 00:11:18,910 nuevamente para eliminar ahora sí el registro en base a Leydi que hemos pasado.