Conflicto entre bootstrap y jquery

dieguito12 · #1 (**permalink**) 07/02/2014, 19:31

Buenas a todos, estoy teniendo el siguiente inconveniente, tengo un inicio de sesión, el cual he armado con bootstrap, ahora quiero agregar una ventana modal con jquery para el formulario de registro, el problema es que al dar al boton de registro se me habre la venta solo con el titulo.

Codigo:

Código HTML:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Mis tareas</title>
    
    <link type="text/css" href="estilos/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
    <link type="text/css" href="estilos/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen">
    <link type="text/css" href="estilos/signin.css" rel="stylesheet">
    <link type="text/css" href="estilos/estilo.css" rel="stylesheet">
    
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="js/jquery_ui/jquery-ui-1.10.4.custom.min.js"></script>
	<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>

	<script type="text/javascript" src="js/jquery-validation-1.11.1/dist/jquery.validate.min.js"></script>
	<script type="text/javascript" src="js/jquery-validation-1.11.1/lib/jquery.form.js"></script>
	<script type="text/javascript" src="js/jquery-validation-1.11.1/localization/messages_es.js"></script>
  </head>
  <script type="text/javascript">
	  $(function(){
		  //creación de ventana formulario
		  $('#formulario').dialog({
			  autoOpen:false,
			  modal:true,
			  width:305,
			height:'auto',
			resizable: false,
			close:function(){
				$('#formRegistro fieldset > span').removeClass('error').empty();
				$('#formRegistro input[type="text"]').val('');
			}
		});

		// funcionalidad del botón que abre el formulario
		$('#irnuevoUser').on("click",function(){
			$('#formulario').dialog("open");
		});

		// Validar Formulario
		$('#formRegistro').validate({
		    submitHandler: function(){
		        
		        var str = $('#formRegistro').serialize();

		        alert(str);

		        return false;

		    },
		    errorPlacement: function(error, element) {
		        error.appendTo(element.prev("span").append());
		    }
		});
		  });
  </script>
  <body>
	  <div class="hidden" id="formulario" Title="Registrarse">
			<form action="" method="POST" id="formRegistro" name="formRegistro" role="form">
				
			<fieldset id="datosUser">
				<div class="form-gorup">
					<label  for="nombres">Nombres</label>
					<span></span>
					<input type="text" id="nombres" name="nombres" placeholder="Nombres" class="form-control" required autofocus>
				</div>
				<div class="form-gorup">
					<label  for="apellidos">Apellidos</label>
					<span></span>
					<input type="text" id="apellidos" name="apellidos" placeholder="Apellidos" class="form-control " required>
				</div>
				<div class="form-gorup">
					<label  for="nick">Nombre de Usuario</label>
					<span></span>
					<input type="text" id="nick" name="nick" placeholder="Nombre Usuario" class="form-control " required>
				</div>
				<div class="form-gorup">
					<label  for="pass">Contrase&ntilde;a</label>			
					<span></span>
					<input type="password" id="pass" name="pass" placeholder="Contrase&ntilde;a" class="form-control " required>
				</div>
				<div class="form-gorup">
					<label  for="rpass">Repetir contrase&ntilde;a</label>
					<span></span>
					<input type="password" id="rpass" name="rpass" placeholder="Repetir contrase&ntilde;a" class="form-control " required>
				</div>
				<div class="form-gorup">
					<label  for="email">Email</label>
					<span></span>
					<input type="email" id="email" name="email" placeholder="Email" class="form-control" required>
				</div>
				<div class="form-gorup">
					<label  for="departamento">Departamento</label>
					<span></span>
					<input type="text" id="departamento" name="departamento" placeholder="Departamento" class="form-control " required>
				</div>
				</fieldset>
				<button class="btn btn-lg btn-primary btn-block" type="submit">Continuar</button>
					
				<!--<fieldset id="ajaxLoader" class="ajaxLoader hide">
					<img src="images/default-loader.gif">
					<span>Espere un momento...</span>
				</fieldset>			-->
					
			</form>
		</div>
	<div class="wrapper">
    <section class="container">
		
      <form class="form-signin" role="form" action="include/login.php" method="POST">
        <h2 class="form-signin-heading">Inciar sesi&oacute;n</h2>
        <input type="text" class="form-control" placeholder="Usuario" name="nick" id="nick" required autofocus>
        <input type="password" class="form-control" placeholder="Password" name="pass" id="pass" required>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Entrar</button>
       
      </form>
		 <div id="btnAddUser" class="center addUser">
			<button id="irnuevoUser" class="btn btn-default btn-block" role="button">Registrarse</button>
			</div>
		</section>
    </div>
  </body>
</html>

Imagen, se ve que aparece la ventana emergente pero solo con el nombre...

dieguito12 · #2 (**permalink**) 08/02/2014, 15:44

Bueno probando un poco, encontre que si quito el hidden del primer div me muestra el formulario...

Código HTML:

<!DOCTYPE html>
 
<html lang="es">
 
<head>
<title>:: jQuery AJAX para Consultas con PHP y MySQL ::</title>
<meta charset="utf-8" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<link type="text/css" href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="css/master.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery_ui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery_ui/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>

<script type="text/javascript" src="js/jquery-validation-1.10.0/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery-validation-1.10.0/lib/jquery.metadata.js"></script>
<script type="text/javascript" src="js/jquery-validation-1.10.0/localization/messages_es.js"></script>

</head>
<script type="text/javascript">
	$(function(){
		// creación de ventana con formulario con jquery ui
		$('#agregarUser').dialog({
			autoOpen: false,
			modal:true,
			width:305,
			height:'auto',
			resizable: false,
			close:function(){
				$('#formUsers fieldset > span').removeClass('error').empty();
				$('#formUsers input[type="text"]').val('');
		    	$('#formUsers select > option').removeAttr('selected');
			}
		});

		// funcionalidad del botón que abre el formulario
		$('#goNuevoUser').on('click',function(){
			$('#agregarUser').dialog('open');
		});

		// Validar Formulario
		$('#formUsers').validate({
		    submitHandler: function(){
		        
		        var str = $('#formUsers').serialize();

		        alert(str);

		        return false;

		    },
		    errorPlacement: function(error, element) {
		        error.appendTo(element.prev("span").append());
		    }
		});


	});
</script>
<body>
		<div id="agregarUser" Title="Agregar Usuario">
	    	<form action="" method="post" id="formUsers" name="formUsers">
	    		<fieldset id="ocultos">
	    			<input type="hidden" id="usr_accion" name="usr_accion" class="{required:true}"/>
	    		</fieldset>
				<fieldset id="datosUser">
					<p>Nombre</p>
					<span></span>
					<input type="text" id="usr_nombre" name="usr_nombre" placeholder="Nombre Completo" class="{required:true,maxlength:120} span3"/>
					<p>Puesto</p>
					<span></span>
					<input type="text" id="usr_puesto" name="usr_puesto" placeholder="puesto que desempeña" class="{required:true,maxlength:80} span3"/>
					<p>Nickname</p>
					<span></span>
					<input type="text" id="usr_nick" name="usr_nick" placeholder="nickname" class="{required:true,maxlength:25} span3"/>

					<p>Status</p>
					<span></span>
					<select id="usr_status" name="usr_status" class="{required:true} span3">
						<option value="">Seleccione Una Opción</option>
						<option value="Activo">Activo</option>
						<option value="Suspendido">suspendido</option>	        	
					</select>
				<fieldset id="btnAgregar" style="text-align:center;">
					<input type="submit" id="continuar" value="Continuar" />
				</fieldset>

				<fieldset id="ajaxLoader" class="ajaxLoader hide">
					<img src="images/default-loader.gif">
					<span>Espere un momento...</span>
				</fieldset>
			</form>
	    </div>
		<div id="wraper">
		    <section id="content">
		    	<div id="btnAddUser" class="center addUser">
		    		<button id="goNuevoUser" class="btn btn-inverse btn-small"><i class="icon-plus"></i> Agregar Usuario</button>
		    	</div>
				<div id="listaOrganizadores">
					<table id="listadoUsers" class="table table-striped table-bordered table-hover table-condensed">
						<thead>
							<tr>
								<th>Nombre</th>
								<th>Puesto</th>
								<th>Nickname</th>
								<th>Status</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Luis Fernando Cázares</td>
								<td>Desarrollo y Sistemas</td>
								<td>cazaresluis</td>
								<td class="centerTXT"><span class="btn btn-success btn-mini">Activo</span></td>
								<td class="centerTXT"><button class="btn btn-mini">Editar</button></td>
							<tr>
								<tr>
								<td>Luis Fernando Cázares</td>
								<td>Desarrollo y Sistemas</td>
								<td>cazaresluis</td>
								<td class="centerTXT"><span class="btn btn-warning btn-mini">Suspendido</span></td>
								<td class="centerTXT"><button class="btn btn-mini">Editar</button></td>
							<tr>
							<tr>
								<td>Luis Fernando Cázares</td>
								<td>Desarrollo y Sistemas</td>
								<td>cazaresluis</td>
								<td class="centerTXT"><span class="btn btn-success btn-mini">Activo</span></td>
								<td class="centerTXT"><button class="btn btn-mini">Editar</button></td>
							<tr>
						</tbody>
					</table>
				</div>

		    </section>
 		</div>
  		<footer>
	        Powered by Luis Fernando Cázares Bulbarela || 2012
		</footer>
</body>
</html>

Con ese codigo funciona la ventana emergente, ahora porque no me funciona la clase hidden de bootstrap y otra consulta, porque no aparece el icono de la x del tema smoothness de jquery, lo que me muestra con firebug es:

Código HTML:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-id-1" class="ui-dialog-title">Registrarse</span>
<button class="ui-dialog-titlebar-close" type="button"></button>
</div>

Espero alguien pueda darme una mano.

Saludos.

ricagonza · #3 (**permalink**) 04/04/2014, 13:11

Hola.

A mi me ha pasado lo mismo, y después de probar todo lo lógico al final lo he solucionado modificando el orden de carga de los archivos .css y js.
Primero cargo bootstrap.css, luego jquery-ui-1.10.4.custom.min.css, continuo con mis .css y luego cargo los js, Primero bootstrap.min.js, luego jquery-1.11.0.min.js y por ultimo jquery-ui-1.10.4.custom.min.js y ya me sale el botoncito….
Espero te sirva.

Saludos