-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathajax25.html
201 lines (154 loc) · 7.01 KB
/
ajax25.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax Tutorial 25</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="text-center">Tutorial 25 AJAX</h1>
<h3>Proyecto 2 CRUD | Insertar Usuarios a base de datos</h3>
</div>
<div class="container">
<br> <br> <br>
<div id="wrapper">
<div id="info"></div>
</div>
</div>
<div id="overlay"></div>
<div id="nuevaventana">
<div id="box-header"></div>
<button type="button" name="botoncerrar" id="botoncerrar" onmousedown="ejecutarnuevaventana()"></button>
<br><br>
<label>Nombre:</label><input type="text" name="nombrenuevousuario" id="nombrenuevousuario">
<br><br>
<label>Correo:</label><input type="text" name="correonuevousuario" id="correonuevousuario">
<br><br>
<button type="button" onmousedown="agregarusuario()" style="margin-left: 40%;" class="btn btn-success">Agregar Usuario</button>
</div>
<script type="text/javascript">
var resultado = document.getElementById('info');
function mostrar_usuarios(){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
//La respuesta que obtenga (xmlhttp.responseText) la muestro en resultado
resultado.innerHTML = xmlhttp.responseText;
}
};
//Abro el archivo del servidor donde envio los parametros
xmlhttp.open("GET", "servidor25.php?personas=" + "personas", true);
// Envio la respuesta
xmlhttp.send();
}
// Se llama a la funcion mostrar usuarios al comienzo de la pagina
mostrar_usuarios();
//La funcion editar usuario no utiliza ajax, simplemente hace cambios a la vista para facilitar el borrar y el actualizar
function editar_usuario(usuario_id){
var nombre_id = "nombre_id" + usuario_id;
var correo_id = "correo_id" + usuario_id;
var borrar = "borrar" + usuario_id;
var actualizar = "actualizar" + usuario_id;
var editar_nombre_id = nombre_id + "-editar";
var nombredelusuario = document.getElementById(nombre_id).innerHTML;
var parent = document.querySelector("#" + nombre_id);
//Esta seleccion es para verificar que el valor ya este mostrado como input
//Con el query selector verfico que este el campo con el id editar_nombre_id
//Si no lo encuentro -> null -> lo cambio para que pueda insertarlo
if(parent.querySelector("#" + editar_nombre_id) === null){
document.getElementById(nombre_id).innerHTML = '<input type = "text" id = "' + editar_nombre_id + '" value = "' + nombredelusuario + '">';
document.getElementById(borrar).disabled = "true";
document.getElementById(actualizar).style.display = "block";
}
}
function actualizar_usuario(usuario_id) {
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//Encuentro el input para enviar el value al php que me hara la actualizacion
var nombre_actualizado = document.getElementById("nombre_id" + usuario_id + "-editar").value;
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
//LLamamos a la funcion mostrar_usuarios ya que esta me actualiza los valores de la pagina
mostrar_usuarios();
}
}
//Abro el archivo del servidor donde envio los parametros
xmlhttp.open("GET", "servidor25.php?usuario_id_actualizado=" + usuario_id + "&nombre_actualizado=" + nombre_actualizado, true);
// Envio la respuesta
xmlhttp.send();
}
function borrar_usuario(usuario_id){
var respuesta = confirm("Esta seguro de borrar este usuario?");
if (respuesta === true) {
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
//LLamamos a la funcion mostrar_usuarios ya que esta me actualiza los valores de la pagina
mostrar_usuarios();
}
}
//Abro el archivo del servidor donde envio los parametros
xmlhttp.open("GET", "servidor25.php?usuario_id_eliminado=" + usuario_id, true);
// Envio la respuesta
xmlhttp.send();
}
}
var overlay = document.getElementById('overlay');
var nuevaventana = document.getElementById('nuevaventana');
function ejecutarnuevaventana() {
overlay.style.opacity = .5;
if (overlay.style.display == "block") {
overlay.style.display = "none";
nuevaventana.style.display ="none";
}else{
overlay.style.display = "block";
nuevaventana.style.display ="block";
}
document.getElementById('nombrenuevousuario').value="";
document.getElementById('correonuevousuario').value="";
}
function agregarusuario() {
// Oculto las cajitas
overlay.style.display = "none";
nuevaventana.style.display ="none";
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var nombre = document.getElementById('nombrenuevousuario').value;
var correo = document.getElementById('correonuevousuario').value;
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
//LLamamos a la funcion mostrar_usuarios ya que esta me actualiza los valores de la pagina
mostrar_usuarios();
}
}
//Abro el archivo del servidor donde envio los parametros
xmlhttp.open("GET", "servidor25.php?nuevonombre=" + nombre + "&nuevocorreo=" + correo, true);
// Envio la respuesta
xmlhttp.send();
}
</script>
</body>
</html>