Usar Modal de twitter bootstrap

#1 te he insertado las imágenes.

¿No puedes reducir algo el código de ejemplo?

#2 Aquí pego el código lo más reducido posible. He quitado todo lo que uso para la validación,para los selects dependientes y los selects de marca y modelo también los he quitado. Simplemente dejo el código que pertenece al primer select y el modal que me carga al pulsar el botón de "+" con el javascript correspondiente. Como ya dije antes el problema es que al tener un formulario principal y otro formulario secundario, si pulso el boton de enviar del formulario secundario hace el envio en el formulario principal.

<form class="form-horizontal" id="adddispositivo" action="{$ruta}dispositivo_controller/addDispositivo" method="POST">
    <fieldset>
        <legend>Nuevo dispositivo</legend>
        <div class="control-group">
            <label class="control-label" for="tipo_dispositivo">Tipo de dispositivo</label>
            <div class="controls">
                <select name="tipo_dispositivo" id="tipo_dispositivo">
                    <option value=""></option>
                    {section name=fila loop=$tipo}
                        <option value="{$tipo[fila]['id']}">{$tipo[fila]['nombre']}</option>
                    {/section}
                </select>

            <!-- Boton para sacarme el modal -->
            <a class="btn" id="modal1" data-toggle="modal" href="#myModal1" rel="tooltip" title="Añade tipo de dispositivo"><i class="icon-plus"></i></a>
            
<!-- Ventana que genero con el formulario secundario -->
<div class="modal hide fade in" id="myModal1" style="display: none;">
                    <div class="modal-header">
                        <a class="close" data-dismiss="modal">×</a>
                        <h3>Ingresar nueva marca</h3>
                    </div>
                    <div class="modal-body">
                        <form class="FormTipo">
                        <fieldset>
                            <div class="modal-body">
                                <ul class="nav nav-list">
                                <li class="nav-header">Name</li>
                                <li><input class="input-xlarge" value="" type="text" name="nombre" id="nombre"></li>
                                </ul> 
                            </div>
                        </fieldset>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn" data-dismiss="modal">Close</a>
                        <button class="btn btn-success" id="submit2">Guardar</button>
                    </div>
                </div>
            </div>
        </div>
<!-- Final de la ventana modal -->    
   

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">Guardar</button>
        <button class="btn">Borrar Formulario</button>
    </div>
</fieldset>
</form>


{literal}
<script src="bootstrap-modal.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script>
 $(function() {
//twitter bootstrap script
    $("button#submit2").click(function(){
            $.ajax({
            type: "POST",
        url: "http://localhost/pfcdata/dispositivo_controller/addTipoDispositivo",
        data: $('form.FormTipo').serialize(),
            success: function(msg){
                    $("#modal1").modal('hide');
                 },
        error: function(){
            alert("failure");
            }
              });
    });
});
</script>
{/literal}

#5 Voy a ver como arreglo esto pues, He pensado en dejar los select de la pagina principal sin etiquetas <form></form>, y el botón de guardar hacerlo con etiquetas <a></a>. Espero que así funcione. Si alguno tiene otra opción se agradece.

#7 pero si quiero poner el botón seguido del select como esta en la imagen tengo que ponerlo dentro del form. Como podría ponerlo a continuación del select y tenerlo fuera del form?

#9 Hola, ya he hecho eso y ya me hace bien la función que debe hacer. El problema ahora es que no me sale el botón que llama al modal a continuación del select correspondiente.

#13 Tendré en cuenta eso.

Ahora estoy viendo como recargar la pagina padre cuando cierro el modal.

#14 aunque lo de #15 funciona, ¿necesitas realmente recargar la página? ¿No puedes tirar de Ajax y actualizar dinámicamente? Es lo suyo.

#17 AJAX es lo más tonto del mundo, lo complicado es hacer que tu web actúe después (lo que viene a ser la lógica de negocio).

Si tienes jQuery es tan simple como usar $.ajax poniendo la URL de destino y los datos a mandar, y hacer lo que sea en las funciones de success y error.

http://api.jquery.com/jQuery.ajax/ Échale un vistazo aunque sea para un proyecto futuro porque es simple y queda resultón.

Como dijo elkaoD pretendo usar Ajax para cargar cuando cierre mi modal los datos del select correspondiente. Os muestro lo que he hecho para ver si me pueden ayudar, ya que no me hace la recarga.

{include file="includes/header.tpl"} 

<form class="form-horizontal" id="adddispositivo" action="{$ruta}dispositivo_controller/addDispositivo" method="POST">
	<fieldset>
		<legend>Nuevo dispositivo</legend>
		<div class="control-group">
			<label class="control-label" for="tipo_dispositivo">Tipo de dispositivo</label>
			<div class="controls">
				<select name="tipo_dispositivo" id="tipo_dispositivo">
					<option value=""></option>
					{section name=fila loop=$tipo}
						<option value="{$tipo[fila]['id']}">{$tipo[fila]['nombre']}</option>
					{/section}
				</select>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="marca_dispositivo">Marca</label>
			<div class="controls">
				<select name="marca_dispositivo" id="marca_dispositivo">
					
			</select>
		</div>
	</div>
	<div class="control-group">
		<label class="control-label" for="modelo_dispositivo">Modelo</label>
		<div class="controls">
			<select name="modelo_dispositivo" id="modelo_dispositivo">
			</select>
		</div>
	</div>
	<div class="form-actions">
		<button type="submit" class="btn btn-primary">Guardar</button>
		<button class="btn">Borrar Formulario</button>
	</div>
</fieldset>
</form>

<!--Modal 1-->
	<a class="btn" id="modal1" data-toggle="modal" href="#myModal1" rel="tooltip" title="Añade tipo de dispositivo"><i class="icon-plus"></i></a>

<div class="modal hide fade in" id="myModal1" style="display: none;">
	<div id="thanks">
		<div class="modal-header">
			<a href="" class="close" data-dismiss="modal">×</a>
			<h3>Ingresar nueva Tipo de dispositivo</h3>
		</div>
		<div class="modal-body">
			<form class="FormTipo">
				<fieldset>
					<div class="modal-body">
						<ul class="nav nav-list">
						<li class="nav-header">Nombre</li>
						<li><input class="input-xlarge" value="" type="text" name="nombre" id="nombre"></li>
						</ul> 
					</div>
				</fieldset>
			</form>
		</div>
		<div class="modal-footer">
			<a class="btn" data-dismiss="modal">Close</a>
			<button class="btn btn-primary" id="submit1">Guardar</button>
		</div>
	</div>
</div>
<!--Cierro Modal 1-->

{literal}
<script>
    $(function () {
        $('#modal1').tooltip();
    });
</script>
<script>
	$(document).ready(function(){
		// Parametros para el tipo_dispositivo
		$("#tipo_dispositivo").change(function () {
			$("#tipo_dispositivo option:selected").each(function () {
				//alert($(this).val());
					elegido=$(this).val();
					$.post("tipo_dispositivo", { elegido: elegido }, function(data){
					$("#marca_dispositivo").html(data);
					$("#modelo_dispositivo").html("");
				});
			});
		})
		// Parametros para el marca_dispositivo
		$("#marca_dispositivo").change(function () {
			$("#marca_dispositivo option:selected").each(function () {
				//alert($(this).val());
					elegido=$(this).val();
					$.post("marca_dispositivo", { elegido: elegido }, function(data){
					$("#modelo_dispositivo").html(data);
				});
			});
		})
	});
</script>
<script>
	$(function() {
	    $("button#submit1").click(function(){
	        $.ajax({
		        type: "POST",
		        url: "http://localhost/pfcdata/dispositivo_controller/addTipoDispositivoModal",
		        data: $('form.FormTipo').serialize(),
		        success: function(msg){
		        	$("#thanks").html(msg)
		            $("#modal1").modal('hide');
		            $("#tipo_dispositivo").load(); //esta linea es la que pretendo usar para recargar el Select tipo_dispositivo que es el que añado a través del modal.
		        },
		        error: function(){
		            alert("failure");
		        }
	        });
	    });
	});
</script>

{/literal}


{include file="includes/footer.tpl"} 

#21 .load() según he leído en la documentación es un método que me devuelve en mi código html en el elemento que le especifico (tipo_dispositivo) los datos del servidor.

#23 Vale, le volveré a echar un vistazo

#25 Y ese codigo que me has puesto debo de colocarlo cuando mi función $.ajax de éxito no?

$(function() {
            $("button#submit1").click(function(){
                $.ajax({
                        type: "POST",
                        url: "http://localhost/pfcdata/dispositiv...tivoModal",
                        data: $('form.FormTipo').serialize(),
                        success: function(msg){
                                $("#thanks").html(msg)
                            $("#modal1").modal('hide');
                            $elemento.load("http://...", $('form.FormTipo').serialize())
                        },
                        error: function(){
                            alert("failure");
                        }
                });
            });
        });

Con respecto al tema de las url relativas o absolutas es que he tenido problemas a la hora de llamar a otras librerías y por eso las uso absolutas. Se que lo mas correcto es usarlas relativas, pero de momento estoy colocándolas absolutas. En cuanto termine unas cuantas cosas de la aplicación veré si hay forma de cambiar las urls. Muchas gracias elkaoD

#27 Entonces me debo de crear una nueva función jquery tal que me cargue $("div#elemento").

Es decir el siguiente fragmento:

<script>
	$(function(){
		$("div#elemento").load("http://localhost/pfcdata/dispositivo_controller/alta_dispositivo", $('form.FormTipo').serialize());
	});
</script>

utiliza si no $.post, sería algo así

$.post(url, { form: $('form.FormTipo').serialize() }, function(res){
   // aquí el código que quieras (equivale a lo que metes en el 'success' de $.ajax)
});

Y en el php, tendrás en la variable $_POST['form'] el formulario serializado

Lo único que no tiene callback de error