Contenido dinamico y formularios. Problema!

tomymolina · #1 (**permalink**) 10/02/2011, 01:49

Hola a todos, mi problema ahora es el siguiente:

Vi un script para enviar formularios sin recargar con AJAX. En una pagina independiente funciona sin problemas pero yo necesito que funcione en un documento incluido con jquery desde uno principal.

Les dejo la funcion para enviar el formulario:

Código HTML:

<script>
function nuevoAjax(){
    var xmlhttp=false;
    try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
    xmlhttp = false;
    }
    }

    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

function enviarFormulario(url, formid, divrespuesta){
        var Formulario = document.getElementById(formid);
        var longitudFormulario = Formulario.elements.length;
        var cadenaFormulario = "";
        var sepCampos;
        sepCampos = "";
        for (var i=0; i <= Formulario.elements.length-1;i++) {
            cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value);
            sepCampos="&";
    }
    peticion=nuevoAjax();
    peticion.open("POST", url, true);
    peticion.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=ISO-8859-1');
    peticion.send(cadenaFormulario);
    peticion.onreadystatechange = function() {
          if (peticion.readyState == 4 && (peticion.status == 200 || window.location.href.indexOf ("http") == - 1)){
                document.getElementById(divrespuesta).innerHTML = peticion.responseText;
          }
    }
}
</script>

. Ahora el index principal desde donde incluyo el archivo con el formulario.

Código:

<?php 
include ("files/functions/p_style.php");
include('files/news/db-cnx.php');
include("files/news/PHPcake.lib.php");
include ("files/settings/index.php");
include ("files/news/PHPBBcode.lib.php");
;
?>
<!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>
Cualquier titulo
</title>
<link rel="icon" type="image/png" href="files/pictures/ico/Network.ico" />
<link href="files/estilo.css" rel="stylesheet" type="text/css" media="all" />
<link type="text/css" href="files/jquery/ui/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
function nuevoAjax(){
    var xmlhttp=false;
    try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
    xmlhttp = false;
    }
    }

    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

function enviarFormulario(url, formid, divrespuesta){
        var Formulario = document.getElementById(formid);
        var longitudFormulario = Formulario.elements.length;
        var cadenaFormulario = "";
        var sepCampos;
        sepCampos = "";
        for (var i=0; i <= Formulario.elements.length-1;i++) {
            cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value);
            sepCampos="&";
    }
    peticion=nuevoAjax();
    peticion.open("POST", url, true);
    peticion.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=ISO-8859-1');
    peticion.send(cadenaFormulario);
    peticion.onreadystatechange = function() {
          if (peticion.readyState == 4 && (peticion.status == 200 || window.location.href.indexOf ("http") == - 1)){
                document.getElementById(divrespuesta).innerHTML = peticion.responseText;
          }
    }
}
</script> 

<script> 

var click = function(url){
		url_go = url;
		window.history.pushState("ekisde","OMG LOL", url_go);
		return false;

	};



function a(){
var auto_refresh = setTimeout(
function()
{
var urla = document.location.href;
// Nos quedamos con los parÃ¡metros
urla = urla.substring(urla.lastIndexOf('#')+1);
$('#content').load('includes.php?'+urla);
}, -1);	
}

onload = a();







</script>



<script type="text/javascript" src="files/news/PHPComents/JSInputAdd.js"></script> 
<script type="text/javascript" src="files/news/JSFormsDel.js"></script>
<script type="text/javascript" src="files/jquery/ui/js/jquery-ui-1.8.2.custom.min.js"></script>





</head>
<body>

<div class="page">



<div class="header"><?php include("files/nav/index.php");?></div>

<table width="100%" border="0">
  <tr valign="top">
    <td width="25%"><div class="menu"><?php include("files/menu/menu.php");?></div></td>
    <td width="75%"><div id="content" class="content"></div>
</td>
  </tr>
</table>





</div>



</body></center>
</html>

En donde esta el includes.php esta el formulario. El formulario en cuestión es este:

Código:

<form id="login" action="#">
        Por favor, identif&iacute;quese
        <input type="text" name="username" id="name" />
        <input type="password" name="passwd" id="pass" />
        <input type="button" value="Ingresar" 
                    onclick="enviarFormulario('login (2).php','login', 'contenido');"/>
                   
        </form>

Lo redacté rapido es que me tengo que ir a clases. Gracias de antemano.

caricatos · #2 (**permalink**) 10/02/2011, 02:14

Tema movido desde javascript

tomymolina · #3 (**permalink**) 11/02/2011, 01:32

nadie me puede ayudar?

Dany_s · #4 (**permalink**) 11/02/2011, 05:39

primero mirá evento submit el ejemplo
http://api.jquery.com/submit/

el método serialize para obtener el querystring nombre/valor de los campos
http://api.jquery.com/serialize/ en el ejemplo une serialize con el evento submit

despué el método ajax
http://api.jquery.com/jQuery.ajax/
fijate los parámetros que hay que pasarle

cuando veas eso luego podés unir todo y ya solucionas tu problema

supongo que el formulario lo cargas con ajax, si es asi para el evento submit podes usar el método live o delegate que sirve para gestionar eventos a elementos futuros

tomymolina · #5 (**permalink**) 11/02/2011, 14:35

@dany_s gracias me pongo a revisar esos links. El formulario esta cargado por el includes.php (este lo cargo con load de jquery.)

tomymolina · #6 (**permalink**) 13/02/2011, 10:31

Vale pero eso ya lo había provado para enviar formularios pero al hacer click en el boton de enviar no me funciona. No ocurre nada. O tengo que modificar tambien el include?

Dany_s · #7 (**permalink**) 14/02/2011, 05:20

si lo cargas con load lee lo último que puse

tomymolina · #8 (**permalink**) 14/02/2011, 15:03

Vale, gracias ya resolvi el problema. Use [URL="http://blog.timersys.com/jquery/como-enviar-un-formulario-via-ajax-con-jquery/"]esto[/URL]. Y ahora una pregunta general, yo le veo a este sistema todo ventajas:

* Mayor velocidad de carga.
* No se interrumpe el contenido que estes reproduciendo en divs "externas".

Porque casi nadie lo usa? Cuando digo casi nadie digo a que SMF, Wordpress, Blogger, Drupal... Bueno, gracias otra vez y un saludo.

tomymolina · #9 (**permalink**) 16/02/2011, 01:43

No, sige sin resolver, siempre aprece un problema nuevo. Ahora esta resuelto lo de los formularios, eso se produccion porque había un setinterval en el index que causaba que se refrescase y era imposible enviarlo.

Ahora uso setTimeout y cuando kiero k se refresque la div la llamo mediante un onlick. Ahora el problema llega en las redirecciones, no puedo usar un onclick.

Hay alguna funccion para que cuando cambie el hash automaticamente se refresque la div?
(No digo un setInterval.)

Yo estoy en #action=contacto y hago que redireccione con window.location.hash = "action=home"; y la url cambia a #action=home pero el contenido sige siendo el de contacto.

AYUDA!