JQuery - Cargar datos en formulario desde mysql y poder modifcarlo

   
Vista:

Cargar datos en formulario desde mysql y poder modifcarlo

Publicado por Adrian adriangarciaortiz@gmail.com (6 intervenciones) el 16/07/2015 21:29:11
Hola llevos unos dias, dandole a la cabeza pero no consigo que jquery ni ajax hagan lo que yo quiero.
Os esplico tenco un formulario que muestra la configuracion de red ficticia desde un origen de mysql, el proglema es que cuando le digo a jquery y carge el documento, muestre los datos del formulario, para luego poderlos editar con un update a mysql via php, no me lo permite. He pensado que en cada campo del formulario cuando le de a click, la peticion de ajax se desactive y pueda actualizarlo sin que la peticion $.ajax se meta en medio, ya que aunque pongo datos en los formularios, sigue recogiendo los datos desde $.ajax. Tambien he pensado en poner en cada input en su value un echo de la variable en cuastion desde php pero, luego no puedo modificarlo.

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
<!-- index.php-->
<!-- carga el formulario-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajc</title>
 
<link rel="stylesheet" type="text/css" href="./css/redmond/jquery-ui-1.10.4.custom.css">
 
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
 
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
 
<link href="./css/ajc.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript">
	       	$(document).ready(function()
                    {
//cargo los datos del formulario
$.ajax({
url:'php/datosconex.php',
type:'POST',
dataType:'json',
data:{}}).done(function(respuesta)
{
$('#ip').val(respuesta.ip);
$('#mask').val(respuesta.mask);
$('#dns1').val(respuesta.dns1);
$('#dns2').val(respuesta.dns2);
$('#tconex').val(respuesta.tconex);
$('#tipoip').val(respuesta.tipoip);
$('#essid').val(respuesta.essid);
$('#pass').val(respuesta.pass);
 
});
 
 
$("#ip").click(function(){
 
    //intento que al pulsar en este id el ajax no siga dando los datos
});
 
$("#mask").click(function(){
 
});
$("#dns1").click(function(){
 
});
$("#dns2").click(function(){
 
});
$("#tconex").click(function(){
 
});
$("#tipoip").click(function(){
 
});
$("#essid").click(function(){
 
});
$("#pass").click(function(){
 
});
 
        //guardo
                        $("#guardar").click(introd);
                        function introd()
                        {
                            $.post("php/insert.php", $("#formulario").serialize()).done();
                            $("#recepcion_datos").html("<p>Se han guardado los datos</p>");
                        }
				//	
			$("#iprefresh").click(refresh);
                        function refresh()
                        {
                            $("#recepcion_datos").load("php/iprefresh.php");
                            $("#recepcion_datos").html("<p>Se ha refrescado la IP</p>");
                            setInterval($('#recepcion_datos').load('php/set.php'), 5000);
                        }
 
                        $("#reboot").click(reboot);
                        function reboot()
                        {
                            $("#recepcion_datos").load("php/reboot.php");
                            $("#recepcion_datos").html("<p>Se ha reseteado la unidad</p>");
                            setInterval($('#recepcion_datos').load('php/set.php'), 5000);
                    }
 
    		});
 
        </script>
 
    </head>
 
 
<body>
<header class="principal">
 
<div id="busqueda_general">
<div id="topbr">
</div>
<form method="post" id="formulario">
 
<table>
<tr>
 
<td><b><label for="ip">IP</label></b></td>
<td><b><input type="text" size="20" id="ip" name="ip" value="" /></b></td>
<td><b><label for="tconex">Tipo de Conexión</label></b></td>
<td><b><input type="radio" id="tconex" name="tconex" value="0" checked>ETH <br> <input type="radio" id="tconex" name="tconex"  value="1">WIFI</b></td>
 
</tr>
<tr>
<td><b><label for="mask">Mascara</label></b></td>
<td><b><input type="text" id="mask" size="18" name="mask" value=""/></b></td>
<td ><b><label for="essid">ESSID</label></b></td>
<td><b><input type="text"  size="20" id="essid" name="essid" value=""/></b></td>
</tr>
<tr>
<td><b><label for="dns1">DNS1</label></b></td>
<td><b><input type="text"  size="20" id="dns1" name="dns1" value=""/></b></td>
<td><b><label for="pass">Pass</label></b></td>
<td><b><input type="password"  size="20" id="pass" name="pass" value=""/></b></td>
</tr>
<tr>
<td><b><label for="dns2">DNS2</label></b></td>
<td><b><input type="text"  size="20" id="dns2" name="dns2" value=""/></b></td>
 
</tr>
<tr>
<td><b><label for="tipoip">Tipo de IP</label></b></td>
<!--<td><b><input type="radio" id="tipoip" name="tipoip" value="0" checked>IP Estatica <br> <input type="radio" id="tipoip" name="tipoip"  value="1">DHCP</b></td>-->
<td><b><input type="radio" id="tipoip" name="tipoip" value="0" checked>IP Estatica
<br>
<input type="radio" id="tipoip" name="tipoip" value="1">DHCP</b></td>
 
 
<tr class="busqueda_envio">
<td><input type="button" class="boton" id="guardar" value="Guardar"/></td>
<td><input type="button" class="boton" id="reboot" value="Reboot"/></td>
<td><b><input type="button"  class="boton" id="iprefresh" value="Refrescar IP"/></b></td>
<td><input type="button" class="boton" id="inicio" value="<<<"/></td>
<div id="recepcion_datos">
</div>
</tr>
 
</tr>
 
</table>
</form>
 
 
</div>
 
<div id="recepcion_datos">
</div>
 
</header>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
// este es el codigo que pide a mysql los datos del formulario
 
    $conexion = new mysqli('localhost','***','***','bbdd');
    $consulta = "select * FROM datosred order by id desc limit 1";
    $result = $conexion->query($consulta);
    $respuesta = new stdClass();
	if($result->num_rows > 0)
            {
		$fila = $result->fetch_array();
		$respuesta->ip = $fila['ip'];
		$respuesta->mask = utf8_encode($fila['mask']);
		$respuesta->dns1 = utf8_encode($fila['dns1']);
		$respuesta->dns2 = utf8_encode($fila['dns2']);
		$respuesta->tconex = utf8_encode($fila['tconex']);
		$respuesta->tipoip = utf8_encode($fila['tipoip']);
		$respuesta->essid = utf8_encode($fila['essid']);
		$respuesta->pass = utf8_encode($fila['pass']);
            }
echo json_encode($respuesta);
 
 ?>

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
<?php
//recoge los datos del formulario y los guarda
        session_start();
        $conexion = mysqli_connect('localhost','***','***',***');
        
        if(! $conexion )
        {
            die('Could not connect: ' . mysqli_error());
        }
      
        $ip = utf8_decode($_POST['ip']);
	$mask = utf8_decode($_POST['mask']);
	$dns1 = utf8_decode($_POST['dns1']);
	$dns2 = utf8_decode($_POST['dns2']);
	$tconex = utf8_decode($_POST['tconex']);
        $tipoip = utf8_decode($_POST['tipoip']);
	$essid = utf8_decode($_POST['essid']);
	$pass = utf8_decode($_POST['pass']);
  

        $sql = "update `datosred` set `ip` = '$ip', `mask`='$mask', `dns1`='$dns1', `dns2`='$dns2', `tconex`='$tconex', `tipoip`='$tipoip', `essid`='$essid', `pass`='$pass') WHERE id = 8";
	        
        $final = $conexion->query($sql);
        
	mysqli_close($conexion);
?>

Gracias es lo que podais ayudarme.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas

Cargar datos en formulario desde mysql y poder modifcarlo

Publicado por Vainas (96 intervenciones) el 17/07/2015 08:46:44
Buenas:

Has probado en vez de click el evento focus?. Ese puede funcionarte.

Antes de comentar algo mas sobre lo que ya tienes te pregunto si has pensado en la opcion de bloquear los campos para que no se puedan escribir?. despues del ajax los desbloqueas. Puedes usar tambien una imagen que cargue en el centro de la pantalla indicando que se esta cargando los datos asi el usuario espera. He visto en otros foros que la imagen la generas con esto: http://www.ajaxload.info/

Mira este ejemplo al hacer click sobre un enlace: http://jsfiddle.net/VpDUG/4952/

Aqui te explican como hacerlo con jquery, te dan los css que necesitas, el div que tienes que crear donde metes la imagen y el uso de ajaxStart y ajaxStop para mostrar y ocultar la imagen de cargando... http://stackoverflow.com/a/1964871

Ahora respondiendo a tu pregunta. Para detener el ajax tienes la funcion "abort();. Cuando ejecutas ajax puedes guardar un valor que regresa para hacer uso de ella, en tu caso puedes crear una variable "global" para luego usarla, seria algo asi:

1
2
3
4
5
6
7
$(document).ready(function()
                    {
//cargo los datos del formulario
var xhr = $.ajax({ ...tu codigo });
...
//cuando necesites cancelar el ajax solo tienes que hacer
xhr.abort();

Se me ocurre que podrias al principio anclar el onfocus pasandole un codigo que aborte el ajax y una vez que el ajax se cargue (usando el evento ajaxStop) desanclas el mismo con $( "#foo").unbind( "focus" );

En fin si opciones creo que tienes, pero por cual te decantas?

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Cargar datos en formulario desde mysql y poder modifcarlo

Publicado por Adrian (6 intervenciones) el 17/07/2015 13:32:10
Hola Vainas, muchas gracias, por ayudarme, creo que el metodo que dices del onfocus me parece la mejor idea, pero no la visualizo bien, soy un poco newbie en esto y hay cosas que se me escapan, ya le asignado la variable que me dices, pero aun asi cuando le asigno una nuevo dato, me sigue guardando la variable del ajax, no se como puedo hacer el desanclaje para que funcione mejor, ya que hay me pierdo, te dejo el codigo con lo que me comentas, la parte que dices al principio la habia pensado pero para mas adelanbte cuando sea funcional el envio de datos.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajc</title>
 
<link rel="stylesheet" type="text/css" href="./css/redmond/jquery-ui-1.10.4.custom.css">
 
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
 
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
 
<link href="./css/ajc.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript">
$(document).ready(function()
                    {
 
var xhr = $.ajax({
url:'php/datosconex.php',
type:'GET',
dataType:'json',
data:{}}).done(function(respuesta)
{
$('#ip').val(respuesta.ip);
$('#mask').val(respuesta.mask);
$('#dns1').val(respuesta.dns1);
$('#dns2').val(respuesta.dns2);
$('#tconex').val(respuesta.tconex);
$('#tipoip').val(respuesta.tipoip);
$('#essid').val(respuesta.essid);
$('#pass').val(respuesta.pass);
 
});
 
 
//$("#ip").click(function(){
$("#ip").focus(function(){
xhr.abort();
// no se si debe ir aqui
$( "#ip").unbind( "focus" );
});
 
 
$("#guardar").click(introd);
                        function introd()
                        {
                            $.post("php/insert.php", $("#formulario").serialize()).done();
                            $("#recepcion_datos").html("<p>Se han guardado los datos</p>");
                            //xhr.abort();
 
                        }
 
       </script>
 
    </head>
 
 
<body>
<header class="principal">
 
<div id="busqueda_general">
<div id="topbr">
</div>
<form method="post" id="formulario">
 
<table>
<tr>
 
<td><b><label for="ip">IP</label></b></td>
<td><b><input type="text" size="20" id="ip" name="ip" value="" /></b></td>
<td><b><label for="tconex">Tipo de Conexión</label></b></td>
<td><b><input type="radio" id="tconex" name="tconex" value="0" checked>ETH <br> <input type="radio" id="tconex" name="tconex"  value="1">WIFI</b></td>
 
</tr>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Cargar datos en formulario desde mysql y poder modifcarlo

Publicado por Adrian (6 intervenciones) el 17/07/2015 18:07:29
Joe, va bien el problema es mio, mysql de la variable ip estaba limitada a 11 y no cogia bien los datos, lo he comprbado lo que has dicho y funciona perfectamente, te debo una cerveza o parecido.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Cargar datos en formulario desde mysql y poder modifcarlo

Publicado por Vainas (96 intervenciones) el 17/07/2015 21:05:47
Buenas:

Me alegro. Estoy acumulando cervezas en el foro para ponerme ciego jaja.

Te habia dejado un ejemplo mas abajo pero no se si funionara.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Cargar datos en formulario desde mysql y poder modifcarlo

Publicado por Vainas (96 intervenciones) el 17/07/2015 21:04:17
Buenas:

No se si es la manera correcta pero prueba con esto:

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
$(document).ready(function(){
// Aqui es global pero dentro de jQuery
var xhr;
 
$("#ip").focus(function(){
xhr.abort();
// Podemos imprimir xhr para ver si tiene el valor correcto que es un objeto jQuery del tipo ajax...
console.log("xhr: "+xhr);
console.log( se ha desactivado el ajax);
// Desanclamos el onfocus
$( "#ip").unbind( "focus" );
 
});
 
	xhr = $.ajax({
		url:'php/datosconex.php',
		type:'GET',
		dataType:'json',
		data:{}}).done(function(respuesta){
			$('#ip').val(respuesta.ip);
			$('#mask').val(respuesta.mask);
			$('#dns1').val(respuesta.dns1);
			$('#dns2').val(respuesta.dns2);
			$('#tconex').val(respuesta.tconex);
			$('#tipoip').val(respuesta.tipoip);
			$('#essid').val(respuesta.essid);
			$('#pass').val(respuesta.pass);
			//... una vez que se reciben todos los valores quito el onfocus
			$( "#ip").unbind( "focus" );
		});

Ya me comentaras que te sale en el log.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar