Comunidad de diseño web y desarrollo en internet online

Por Favor ayudenme con Los DIV

Citar            
MensajeEscrito el 17 Dic 2010 03:23 pm
Hola Comunidad, ante todo disculpen si no va aqui este tema, por favor si puedieran indicarme donde deberia ponerlo.

Bueno, les explico el problema que tengo, estoy haciendo una aplicacion para el proyecto de mi instituto. la parte de la programacion (jsp) ya lo tengo casi terminado, sin embargo, el diseño no es mi fuerte, y tengo problemas a la hora de diseñar esta aplicacion web.

esta seria la portada:

http://tok-tok.co.cc/proyecto/index.html

porahora solo la pestaña "tramites", tiene funcionalidad.
use un div para cargar
http://tok-tok.co.cc/proyecto/tramites.html

en el cuerpo de la pagina,todo funciono muy bien, mi problema es que esa pagina de tramites tiene una validacion con jquery, que obliga a llenar todos los campos, si todo esta bien, recien se envia.

El problema es que esto solo funciona entrando directamente a
http://tok-tok.co.cc/proyecto/tramites.html

Pero cuando entro por la pagina principal
http://tok-tok.co.cc/proyecto/index.html

y por la pestaña "tramites", no solo no valida, sino que se envia directamente, y la informacion se muestra en toda la pantalla ( y yo creia que funcionaria como un iframe y se cargaria solo en el espacio que tiene el div )

por favor, si alguien tuviera la pasciencia de ayudarme con esto le estaria muy agradecido.

Gracias, y saludos.

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

 

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

opera
Citar            
MensajeEscrito el 17 Dic 2010 08:36 pm
lo que pasa es que cargar con ajax y el javascript para la validacion no carga bien.
lo que puedes hacer una solucion un poco burda es cambiar esto
<script type="text/javascript">
$(document).ready(function() {
$('#signup').validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true,
rangelength:[8,16]
},
confirm_password: {equalTo:'#password'},
spam: "required"
}, //end rules
messages: {
email: {
required: "Please supply an e-mail address.",
email: "This is not a valid email address."
},
password: {
required: 'Please type a password',
rangelength: 'Password must be between 8 and 16 characters long.'
},
confirm_password: {
equalTo: 'The two passwords do not match.'
}
},
errorPlacement: function(error, element) {
if ( element.is(":radio") || element.is(":checkbox")) {
error.appendTo( element.parent());
} else {
error.insertAfter(element);
}
}

}); // end validate
}); // end ready()
</script>

le quitas el document.ready

solo asi:
<script>
$('#signup').validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true,
rangelength:[8,16]
},
confirm_password: {equalTo:'#password'},
spam: "required"
}, //end rules
messages: {
email: {
required: "Please supply an e-mail address.",
email: "This is not a valid email address."
},
password: {
required: 'Please type a password',
rangelength: 'Password must be between 8 and 16 characters long.'
},
confirm_password: {
equalTo: 'The two passwords do not match.'
}
},
errorPlacement: function(error, element) {
if ( element.is(":radio") || element.is(":checkbox")) {
error.appendTo( element.parent());
} else {
error.insertAfter(element);
}
}

}); // end validate
</script>

y lo pegas despues del tag del form, lo quitas del header

Por coolf

25 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Dic 2010 09:07 pm
Hola !, gracias por responder tan rapidamente.
hice lo que me planteaste, y mi archivo tramites.html me quedo asi:

Código HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Two Columns Layout Using CSS</title>
    <link rel="stylesheet" type="text/css" href="css/css.css" />
   <link href="css/complete_form.css" rel="stylesheet" type="text/css">
    
    <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>


</head> 
  <body>
  
    <div id="pagina">
      <div class="navegador_cabecera" id="navegador_cabecera">
      
      <ul>
      <li><img src="images/home.png" width="24" height="24" alt="inicio" border="0" /><a href="http://www.google.com">inicio</a></li>
      <li><img src="images/refresh.png"width="24"height="24"alt="actualizacion de datos"border="0"/><a href="">Actualizaci&oacute;n de Datos</a></li>
      <li><img src="images/pencil.png" width="24" height="24" alt="registro de solicitud" border="0" /><a href="">Registrar Solicitud</a></li>
      <li><img src="images/search.png" width="24" height="24" alt="Consulta de Tramites"border="0"  /><a href="">Consulta de Tramites</a></li>
      <li><img src="images/monitor.png" width="24" height="24" alt="Reservar x"border="0"  /><a href="">Reservar x</a></li>
      <li class="sin_marco"><img src="images/coffee.png" width="24" height="24" alt="Otros"border="0"  /><a href="">Otros</a></li>
      </ul>

      </div>
      <div class="content" id="content">
        <h1>Signup Form1  </h1>
  <form action="process.html" method="post" name="signup" id="signup">
    <div>
      <label for="name" class="label">Name </label>
      <input name="name" type="text" class="required" id="name" title="Please type your name.">
    </div>
    <div>
      <label for="email" class="label">E-mail Address</label>
      <input name="email" type="text" id="email">
    </div>
    <div>
      <label for="password" class="label">Password</label>
      <input name="password" type="password" id="password">
    </div>
    <div>
      <label for="confirm_password" class="label">Confirm Password</label>
      <input name="confirm_password" type="password" id="confirm_password">
    </div>
<div><span class="label">Hobbies</span>
      <input name="hobby" type="checkbox" id="heliskiing" value="heliskiing" class="required" title="Please check at least 1 hobby.">
      <label for="heliskiing">Heli-skiing</label>
      <input name="hobby" type="checkbox" id="pickle" value="pickle">
      <label for="pickle">Pickle eating</label>
      <input name="hobby" type="checkbox" id="walnut" value="walnut">
      <label for="walnut">Making walnut butter</label>
    </div>
    <div>
      <label for="dob" class="label">Date of birth</label>
      <input name="dob" type="text" id="dob" class="date" title="Please type your date of birth using this format: 01/19/2000">
    </div>
    <div>
      <label for="planet" class="label">Planet of Birth</label>
      <select name="planet" id="planet" class="required" title="Please choose a planet.">
        <option value="">--Please select one--</option>
        <option value="earth">Earth</option>
        <option value="mars">Mars</option>
        <option value="alpha centauri">Alpha Centauri</option>
        <option value="forget about it">You've never heard of it</option>
      </select>
    </div>
    <div>
      <label for="comments" class="label">Comments</label>
      <textarea name="comments" cols="15" rows="5" id="comments"></textarea>
    </div>
    <div class="labelBlock">Would you like to receive annoying e-mail froM
       US?        </div>
    <div class="indent">
      <input  type="radio" name="spam" id="yes" value="yes" class="required" title="Please select an option">
      <label for="yes">Yes</label>
      <input type="radio" name="spam" id="definitely" value="definitely">
      <label for="definitely">Definitely</label>
      <input type="radio" name="spam" id="choice" value="choice">
      <label for="choice">Do I have a choice?</label>
     </div>
<div>
            <input type="submit" name="submit" id="submit" value="Submit">
    </div>
  </form>
  
<script type="text/javascript">
$('#signup').validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true,
rangelength:[8,16]
},
confirm_password: {equalTo:'#password'},
spam: "required"
}, //end rules
messages: {
email: {
required: "Please supply an e-mail address.",
email: "This is not a valid email address."
},
password: {
required: 'Please type a password',
rangelength: 'Password must be between 8 and 16 characters long.'
},
confirm_password: {
equalTo: 'The two passwords do not match.'
}
},
errorPlacement: function(error, element) { 
if ( element.is(":radio") || element.is(":checkbox")) {
error.appendTo( element.parent()); 
} else {
error.insertAfter(element);
} 
} 

}); // end validate 
</script>

</div>
    </div>
  </body>
</html>




sin embargo, el problema continua.
no me funciona la validacion, y la pagina se carga en toda la ventana (lo ke kiero hacer es que se cargue la pagina solo en el espacio que tiene el div, osea solo en el cuerpo/en la mitad)

entrando directamente a la pagina de tramites
http://tok-tok.co.cc/proyecto/tramites.html


todo funciona correcto.

pero esto no pasa cuand oentro atraves de mi index

http://tok-tok.co.cc/proyecto/index.html

por la pestaña tramites.

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

 

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

opera
Citar            
MensajeEscrito el 17 Dic 2010 09:16 pm
el div no funciona como iframe , con esto <form action="process.html" method="post" name="signup" id="signup">
se te va cargar en toda la pagina por que no es un frame, si quieres que solo se cargue en el div contenedor todo, lo tienes que hacer mediante ajax.
if(validacion){
$(""#contenedor").load("process.html");
}
o sea el action del form esta demas .

Por coolf

25 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Dic 2010 09:20 pm
guardas en una variable lo que te devuelva valid() que es true o false/
$("#submit").click(function(){

validacion=$("#signup").valid();
if(validacion){
// si valida aqui cargar el contenedor
$(""#contenedor").load("process.html");
}
return false;
}

Por coolf

25 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Dic 2010 10:18 pm
Hola coolf, gracias por todo.

hize lo que me dijiste, y mi codigo quedo asi:

Código HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Two Columns Layout Using CSS</title>
    <link rel="stylesheet" type="text/css" href="css/css.css" />
   <link href="css/complete_form.css" rel="stylesheet" type="text/css">
    
    <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>


</head> 
  <body>
  
    <div id="pagina">
      <div class="navegador_cabecera" id="navegador_cabecera">
      
      <ul>
      <li><img src="images/home.png" width="24" height="24" alt="inicio" border="0" /><a href="http://www.google.com">inicio</a></li>
      <li><img src="images/refresh.png"width="24"height="24"alt="actualizacion de datos"border="0"/><a href="">Actualizaci&oacute;n de Datos</a></li>
      <li><img src="images/pencil.png" width="24" height="24" alt="registro de solicitud" border="0" /><a href="">Registrar Solicitud</a></li>
      <li><img src="images/search.png" width="24" height="24" alt="Consulta de Tramites"border="0"  /><a href="">Consulta de Tramites</a></li>
      <li><img src="images/monitor.png" width="24" height="24" alt="Reservar x"border="0"  /><a href="">Reservar x</a></li>
      <li class="sin_marco"><img src="images/coffee.png" width="24" height="24" alt="Otros"border="0"  /><a href="">Otros</a></li>
      </ul>

      </div>
      <div class="content" id="content">
        <h1>Signup Form1  </h1>
  <form  method="post" name="signup" id="signup">
    <div>
      <label for="name" class="label">Name </label>
      <input name="name" type="text" class="required" id="name" title="Please type your name.">
    </div>
    <div>
      <label for="email" class="label">E-mail Address</label>
      <input name="email" type="text" id="email">
    </div>
    <div>
      <label for="password" class="label">Password</label>
      <input name="password" type="password" id="password">
    </div>
    <div>
      <label for="confirm_password" class="label">Confirm Password</label>
      <input name="confirm_password" type="password" id="confirm_password">
    </div>
<div><span class="label">Hobbies</span>
      <input name="hobby" type="checkbox" id="heliskiing" value="heliskiing" class="required" title="Please check at least 1 hobby.">
      <label for="heliskiing">Heli-skiing</label>
      <input name="hobby" type="checkbox" id="pickle" value="pickle">
      <label for="pickle">Pickle eating</label>
      <input name="hobby" type="checkbox" id="walnut" value="walnut">
      <label for="walnut">Making walnut butter</label>
    </div>
    <div>
      <label for="dob" class="label">Date of birth</label>
      <input name="dob" type="text" id="dob" class="date" title="Please type your date of birth using this format: 01/19/2000">
    </div>
    <div>
      <label for="planet" class="label">Planet of Birth</label>
      <select name="planet" id="planet" class="required" title="Please choose a planet.">
        <option value="">--Please select one--</option>
        <option value="earth">Earth</option>
        <option value="mars">Mars</option>
        <option value="alpha centauri">Alpha Centauri</option>
        <option value="forget about it">You've never heard of it</option>
      </select>
    </div>
    <div>
      <label for="comments" class="label">Comments</label>
      <textarea name="comments" cols="15" rows="5" id="comments"></textarea>
    </div>
    <div class="labelBlock">Would you like to receive annoying e-mail froM
       US?        </div>
    <div class="indent">
      <input  type="radio" name="spam" id="yes" value="yes" class="required" title="Please select an option">
      <label for="yes">Yes</label>
      <input type="radio" name="spam" id="definitely" value="definitely">
      <label for="definitely">Definitely</label>
      <input type="radio" name="spam" id="choice" value="choice">
      <label for="choice">Do I have a choice?</label>
     </div>
<div>
            <input type="submit" name="submit" id="submit" value="Submit">
    </div>
  </form>
  
<script>
$('#signup').validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true,
rangelength:[8,16]
},
confirm_password: {equalTo:'#password'},
spam: "required"
}, //end rules
messages: {
email: {
required: "Please supply an e-mail address.",
email: "This is not a valid email address."
},
password: {
required: 'Please type a password',
rangelength: 'Password must be between 8 and 16 characters long.'
},
confirm_password: {
equalTo: 'The two passwords do not match.'
}
},
errorPlacement: function(error, element) { 
if ( element.is(":radio") || element.is(":checkbox")) {
error.appendTo( element.parent()); 
} else {
error.insertAfter(element);
} return true;
} 


}); // end validate 
</script>

<script>
$("#submit").click(function(){

validacion=$("#signup").validate();
if(validacion){
// si valida aqui cargar el contenedor 
$("#navegador_cabecera").load("process.html");
}
return false;
});
</script>
</div>
    </div>
  </body>
</html>


para probar hice que mi metodo validate retornara true.

y funciona perfecto.

sin embargo, solo funciona para la pagina tramites.html.

mas no entrando desde mi index.




Quiero ser realista, sabes si esto es posible?, o necesito usar un iframe :S. quizas haz visto algo similar en algun lado?

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

 

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

opera
Citar            
MensajeEscrito el 17 Dic 2010 10:52 pm
se puede hacer, es un problema comun, subilo tu proyecto como lo tienes, mas tarde lo reviso a ver cual es el problema

Por coolf

25 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Dic 2010 11:30 pm
Gracias coolf aquie puedes descargar un comprimido:

http://tok-tok.co.cc/proyecto/proyecto.rar

Espero puedas ayudarme.tengo mi manual de javascript, pero solo me se cosas muy basicas.

Gracias por todo.

Saludos desde Perú .

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

 

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

opera
Citar            
MensajeEscrito el 18 Dic 2010 02:12 am
cambia esto :
$('#contenedor').load(url + ' #pagina');
por esto
$('#contenedor').load(url);

por eso no carga el script te tramites.html, y en tramites.html solo necesitas el html necesario no toda la pagina solo esto:

<div id="pagina">
<div class="navegador_cabecera" id="navegador_cabecera">

<ul>
<li><img src="images/home.png" width="24" height="24" alt="inicio" border="0" /><a href="http://www.google.com">inicio</a></li>
<li><img src="images/refresh.png"width="24"height="24"alt="actualizacion de datos"border="0"/><a href="">Actualizaci&oacute;n de Datos</a></li>
<li><img src="images/pencil.png" width="24" height="24" alt="registro de solicitud" border="0" /><a href="">Registrar Solicitud</a></li>
<li><img src="images/search.png" width="24" height="24" alt="Consulta de Tramites"border="0" /><a href="">Consulta de Tramites</a></li>
<li><img src="images/monitor.png" width="24" height="24" alt="Reservar x"border="0" /><a href="">Reservar x</a></li>
<li class="sin_marco"><img src="images/coffee.png" width="24" height="24" alt="Otros"border="0" /><a href="">Otros</a></li>
</ul>

</div>
<div class="content" id="content">
<h1>Signup Form1 </h1>
<form method="post" name="signup" id="signup">
<div>
<label for="name" class="label">Name </label>
<input name="name" type="text" class="required" id="name" title="Please type your name.">
</div>
<div>
<label for="email" class="label">E-mail Address</label>
<input name="email" type="text" id="email">
</div>
<div>
<label for="password" class="label">Password</label>
<input name="password" type="password" id="password">
</div>
<div>
<label for="confirm_password" class="label">Confirm Password</label>
<input name="confirm_password" type="password" id="confirm_password">
</div>
<div><span class="label">Hobbies</span>
<input name="hobby" type="checkbox" id="heliskiing" value="heliskiing" class="required" title="Please check at least 1 hobby.">
<label for="heliskiing">Heli-skiing</label>
<input name="hobby" type="checkbox" id="pickle" value="pickle">
<label for="pickle">Pickle eating</label>
<input name="hobby" type="checkbox" id="walnut" value="walnut">
<label for="walnut">Making walnut butter</label>
</div>
<div>
<label for="dob" class="label">Date of birth</label>
<input name="dob" type="text" id="dob" class="date" title="Please type your date of birth using this format: 01/19/2000">
</div>
<div>
<label for="planet" class="label">Planet of Birth</label>
<select name="planet" id="planet" class="required" title="Please choose a planet.">
<option value="">--Please select one--</option>
<option value="earth">Earth</option>
<option value="mars">Mars</option>
<option value="alpha centauri">Alpha Centauri</option>
<option value="forget about it">You've never heard of it</option>
</select>
</div>
<div>
<label for="comments" class="label">Comments</label>
<textarea name="comments" cols="15" rows="5" id="comments"></textarea>
</div>
<div class="labelBlock">Would you like to receive annoying e-mail froM
US? </div>
<div class="indent">
<input type="radio" name="spam" id="yes" value="yes" class="required" title="Please select an option">
<label for="yes">Yes</label>
<input type="radio" name="spam" id="definitely" value="definitely">
<label for="definitely">Definitely</label>
<input type="radio" name="spam" id="choice" value="choice">
<label for="choice">Do I have a choice?</label>
</div>
<div>
<input type="submit" name="submit" id="submit" value="Submit">
</div>
</form>

<script>

//alert(00);

$('#signup').validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true,
rangelength:[8,16]
},
confirm_password: {equalTo:'#password'},
spam: "required"
}, //end rules
messages: {
email: {
required: "Please supply an e-mail address.",
email: "This is not a valid email address."
},
password: {
required: 'Please type a password',
rangelength: 'Password must be between 8 and 16 characters long.'
},
confirm_password: {
equalTo: 'The two passwords do not match.'
}
},
errorPlacement: function(error, element) {
if ( element.is(":radio") || element.is(":checkbox")) {
error.appendTo( element.parent());
} else {
error.insertAfter(element);
} return true;
}


}); // end validate

$("#submit").click(function(){

validacion=$("#signup").valid();
console.log(validacion);
if(validacion){
// si valida aqui cargar el contenedor
$("#contenedor").load("process.html");
}
return false;
});

</script>
</div>
</div>

*********************************
y por ultimo validacion=$("#signup").validate() por validacion=$("#signup").valid();
y luego funciona
tu script de validacion funciona raro, ese tienes que revisar

Por coolf

25 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Dic 2010 02:51 am
Coolf que capo que eres hombre. haz solucionado todo en un dos por tres.
hice las correcciones y boila!, me anda de lujo.

Gracias por tu tiempo. te estoy muy agradecido.

Saludos.

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

 

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

opera
Citar            
MensajeEscrito el 18 Dic 2010 02:55 am
de nada

Por coolf

25 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.