A lo largo de su vida, un desarrollador se encuentra a veces con problemas muy poco comunes y, normalmente, encontrar la soluci\u00f3n se convierte en un largo y tortuoso camino.<\/p>\n
El problema que trata este post es de uno de esos casos de comportamientos \"raros\" entre distintos navegadores. El escenario ser\u00eda el siguiente:<\/p>\n
Tenemos una p\u00e1gina PHP en la que tenemos un formulario HTML, cuyos campos son creados din\u00e1micamente utilizando una funci\u00f3n AJAX. El HTML resultante tendr\u00eda un aspecto similar a este:<\/p>\n
\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\" \"https:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\"><\/span><\/div>\n<html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"><\/span><\/div>\n<head><\/span><\/div>\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\" \/><\/span><\/div>\n<title>Test<\/title><\/span><\/div>\n<\/head><\/span><\/div>\n
\n<\/span><\/div>\n<body><\/span><\/div>\n<table><\/span><\/div>\n<form action=\"test.html\"><\/span><\/div>\n<tr><\/span><\/div>\n<td><\/span><\/div>\n<fieldset><\/span><\/div>\n<input type=\"text\" name=\"nombre1\" id=\"id1\" \/><\/span><\/div>\n<\/strong><input type=\"text\" name=\"nombre2\" id=\"id2\" \/><\/span><\/div>\n<\/fieldset><\/span><\/div>\n<\/td><\/span><\/div>\n<\/tr><\/span><\/div>\n<\/form><\/span><\/div>\n<\/table><\/span><\/div>\n<\/body><\/span><\/div>\n
\n<\/span><\/div>\n<\/html><\/span><\/div>\n<\/blockquote>\nDonde los elementos input son creados por AJAX. Hasta ah\u00ed todo perfecto, pero si hacemos un submit del formulario vemos que s\u00f3lo en Internet Explorer se pasan los valores. En Chrome y en Firefox es como si esos \"inputs\" no existieran.<\/p>\n
Despu\u00e9s de mucho comprobar el funcionamiento de nuestra funci\u00f3n AJAX o del PHP, observar\u00edamos que todo est\u00e1 correcto, pero seguimos sin poder recuperar los valores tras enviar el formulario.<\/p>\n
Sin embargo... el problema se encuentra en el HTML<\/strong>, concretamente en el orden de las etiquetas. Dependiendo del doctype<\/a> que teng\u00e1is definido en vuestro documento, se ha de formar un HTML que sea est\u00e1ndar para ese doctype.<\/p>\n
Para comprobar si nuestro HTML cumple los est\u00e1ndares, podemos utilizar la herramienta de validaci\u00f3n online<\/a> que nos proporciona w3.org. Por el contrario, si a\u00fan no tenemos nuestra p\u00e1gina online, podemos usar alguna de las extensiones que tenemos disponibles para Firefox o Chrome. Por ejemplo, la validaci\u00f3n en local es una de las herramientas que ofrece la extensi\u00f3n Web Developer para Firefox<\/a>.<\/p>\n
Si usamos alguna de estas herramientas para validar nuestro c\u00f3digo obtenemos el siguiente error:<\/p>\n
Line 10, Column 33: document type does not allow element \"form\" here<\/span><\/em><\/p>\n
Lo que significa que seg\u00fan los est\u00e1ndares no podemos colocar la etiqueta form donde la tenemos puesta. Si simplemente cambiamos el HTML y hacemos que el formulario englobe a la tabla, nos queda algo como esto:<\/span><\/p>\n
\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\" \"https:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\"><\/span><\/div>\n<html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"><\/span><\/div>\n<head><\/span><\/div>\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\" \/><\/span><\/div>\n<title>Test<\/title><\/span><\/div>\n<\/head><\/span><\/div>\n
\n<\/span><\/div>\n<body><\/span><\/div>\n<form action=\"test.html\"><\/strong><\/span><\/div>\n<table><\/strong><\/span><\/div>\n<tr><\/span><\/div>\n<td><\/span><\/div>\n<fieldset><\/span><\/div>\n<input type=\"text\" name=\"nombre1\" id=\"id1\" \/><\/span><\/div>\n<input type=\"text\" name=\"nombre2\" id=\"id2\" \/><\/span><\/div>\n<\/fieldset><\/span><\/div>\n<\/td><\/span><\/div>\n<\/tr><\/span><\/div>\n<\/table><\/strong><\/span><\/div>\n<\/form><\/strong><\/span><\/div>\n<\/body><\/span><\/div>\n
\n<\/span><\/div>\n<\/html><\/span><\/div>\n<\/blockquote>\nSi ahora pasamos el validador, obtendremos el feliz mensaje de:<\/span><\/p>\n
This document was successfully checked as XHTML 1.0 Strict!<\/span><\/em><\/span><\/p>\n
Lo cual quiere decir que nuestro HTML sigue los est\u00e1ndares. Pero no s\u00f3lo hemos logrado que sea est\u00e1ndar, si no que si ahora mandamos el formulario... \u00a1sorpresa! en Firefox y en Chrome ahora s\u00ed que se env\u00edan los datos<\/strong>. Por tanto, el problema no estaba en la parte compleja (AJAX o PHP) de nuestro desarrollo, si no en lo que, aparentemente, es m\u00e1s sencillo y ten\u00edamos totalmente controlado: el HTML.<\/span><\/p>\n
En conclusi\u00f3n, seguir unos patrones y mantener nuestro c\u00f3digo est\u00e1ndar nos puede ahorrar m\u00e1s de un disgusto y horas de b\u00fasqueda y desesperaci\u00f3n. Este tipo de errores \"raros\" son los peores, porque parece que no hay sentido para que se produzcan. <\/span><\/p>\n
Lo que, en principio, parec\u00eda un complejo problema de AJAX, ha resultado ser un sencillo problema de est\u00e1ndares HTML, y, en este caso, \u00a0seguirlos ha sido suficiente para solucionarlo. Quiz\u00e1 no siempre sea posible cumplirlos a rajatabla, pero lo mejor es hacerlo siempre que est\u00e9 en nuestra mano.<\/p>\n
Esperamos que con esta entrada pod\u00e1is tachar este error de vuestra lista de errores \"raros\" con distintos navegadores.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"A lo largo de su vida, un desarrollador se encuentra a veces con problemas muy poco comunes y, normalmente, encontrar la soluci\u00f3n se convierte en un largo y tortuoso camino. El problema que trata este post es de uno de esos casos de comportamientos \"raros\" entre distintos navegadores. El escenario ser\u00eda el siguiente: Tenemos una p\u00e1gina PHP en la que Seguir leyendo<\/a>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[119,43,39,6],"tags":[221,22,120,218],"class_list":["post-1379","post","type-post","status-publish","format-standard","hentry","category-ajax","category-html-css","category-php","category-wiki","tag-ajax","tag-desarrollo-web","tag-html","tag-php","cat-119-id","cat-43-id","cat-39-id","cat-6-id"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/hosting.airetech.es\/blog\/wp-json\/wp\/v2\/posts\/1379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosting.airetech.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosting.airetech.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosting.airetech.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hosting.airetech.es\/blog\/wp-json\/wp\/v2\/comments?post=1379"}],"version-history":[{"count":15,"href":"https:\/\/hosting.airetech.es\/blog\/wp-json\/wp\/v2\/posts\/1379\/revisions"}],"predecessor-version":[{"id":7151,"href":"https:\/\/hosting.airetech.es\/blog\/wp-json\/wp\/v2\/posts\/1379\/revisions\/7151"}],"wp:attachment":[{"href":"https:\/\/hosting.airetech.es\/blog\/wp-json\/wp\/v2\/media?parent=1379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosting.airetech.es\/blog\/wp-json\/wp\/v2\/categories?post=1379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosting.airetech.es\/blog\/wp-json\/wp\/v2\/tags?post=1379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}