JQuery - jquery + php problema ventana modal

   
Vista:

jquery + php problema ventana modal

Publicado por Sonia (3 intervenciones) el 21/08/2012 13:19:32
Hola, tengo un boton que al pulsarlo aparece una ventana modal jquery en la que tengo un combo para elegir el número de filas que va a tener la tabla. La ventana modal tiene dos botones:
CANCELAR: que cierra la ventana
ACEPTAR: lo que pretendo es que cuando se pulse, se cierre la ventana y se muestre la tabla con el numero de filas que se ha elegido. Pongo sólo el número de filas porque el número de columnas es fijo.

Espero que podais ayudarme, muchas gracias de antemano. Un saludo
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 xve

jquery php problema ventana modal

Publicado por xve (557 intervenciones) el 21/08/2012 19:17:36
Hola Sonia, donde te has quedado atascada??
Nos puedes mostrar el código para poder ayudarte?

Por lo que comentas, al pulsar el botón Aceptar, si únicamente en ampliar los campos de un formulario, puedes hacerlo con javascript o con php mediante AJAX... coméntanos, ok?
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

jquery php problema ventana modal

Publicado por Sonia (3 intervenciones) el 21/08/2012 23:01:53
panel.inc.php

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
<?php
	require_once("class/claseUsuario.php");
 
	$obj=new claseUsuario();
	$obj=json_decode($_SESSION["usuario"]);
?>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
<article id="panel">
	<section class="s1">
		<p>PANEL DE CONTROL</p>
 
	</section>
	<br>
	<section class="s2">
		<div id="sesion">
			&nbsp;<?php echo "Sesión iniciada: ".$obj->nombre." - "; ?>
			<a class="logout" href="includes/logout.inc.php">Cerrar sesión</a>
		</div><br>
 
		<form method="post" action="includes/panelcontrol.inc.php" name="form" id="form">
			<input type="submit" value="Añadir tabla" />
		</form>
 
	</section>
 
</article>


Al pulsar el boton añadir tabla nos lleva a panelcontrol.inc.php donde aparece la cabecera de la tabla con botones para agregar y eliminar filas y columnas...

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
<meta charset="utf-8">
<script type="text/javascript" src="../js/funciones.js" ></script>
<script type="text/javascript" src="../js/jquery-min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/estilos.css">
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
<article id="panel">
	<section class="s1">
		<img src="../img/xaicompanel.png"/>
		<p>PANEL DE CONTROL</p>
 
	</section>
	<br>
	<section class="s2">
 
	<div id="tabla" >
		<table id="t1">
			<tr id="botonera">
				<td></td>
				<td class="td1"><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" > </input><input class="btEliminar" onclick="eliminar(this)" type="button" name="boton" value="-" ></input></td>
				<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
				<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
				<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
				<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
				<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
			</tr>
 
 
			<tr class="cabecera">
				<td><input class="btAnadir" onclick="add()"  type="button" name="boton" value="+" ></input></td>
				<td class="td1"><div contenteditable></div></td>
				<td><div>Muy bien</div></td>
				<td><div>Bien</div></td>
				<td><div>Regular</div></td>
				<td><div>Mal</div></td>
				<td><div>NS/NC</div></td>
			</tr>
		</table>
 
 
		<form method="post" action="../" name="form" id="form">
			<input type="submit" value="Guardar" />
		</form>
	</div>
 
		<div id="ventana" title="Añadir tabla" style="display:none">
			<p>Número de filas</p>
			<select id="numFilas" >
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
			</select>
			<p>Tipo de fila</p>
			<select id="tipo" >
				<option value="1">Radio Buttons</option>
				<option value="2">Checkbox</option>
				<option value="3">Textarea</option>
			</select>
		</div>
 
	</section>
 
</article>


Al darle al boton de añadir fila aparece una ventana jquery pidiendo cuantas filas quieres agregar y el tipo, si quieres radio buttons, checkbox o textarea

funciones.js

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
function add(){
	$("#ventana").dialog({
		buttons: {
			Aceptar: function() {
				numFilas = $("#numFilas").val();
				tipo = $("#tipo").val();
				mensaje = "numFilas="+ numFilas +"&tipo=" + tipo;
 
				$.ajax({
					type: 'get',
					url: '../scripts/nuevatabla.scr.php',
					data: mensaje,
					success: function(data){
						if(data == "1"){
							location.href="./";
						} else {
							alert(data);
						}
					}
				});
			},
			Cancelar: function() {
				$(this).dialog("close");
			}
		}
	});
}


Esta funcion abre la ventana jquery y lo que quiero es que al darle aceptar, se cierre la ventana y me cree el número de filas correspondientes justo a continuación de la cabecera de la tabla

nuevatabla.scr.php
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
require_once("../class/conexiondb.php");
include("../class/clasePreguntas.php");
 
    $numFilas = $_GET['numFilas'];
    $tipo = $_GET['tipo'];
 
    for($i = 1; $i <= $numFilas; $i++){
        echo "hola"; // esto es solo una prueba, pretendía que "hola" me apareciese en la página
                            // panelcontrol.inc.php pero me aparece en un alert
        echo "1";
    }
?>



Espero haberme explicado jeje. Un saludo y gracias
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