Problem using Ajax and Firefox when I send different HTML tags (with <form>)

[jalbam]

Hello,

I have a problem using Ajax with Firefox 2.0 and Firefox 1.0.3 (I don't try other versions).

This code below works fine on Firefox, Opera, Konqueror, Safari, Explorer, etc. without using Ajax:

	    <table border="0" cellspacing="0" cellpadding="6" class="producto_comprar">
            <form method="get" action="cesta.php" class="producto">
            <tr><td align="left" class="producto_comprar">
            <input type="hidden" name="tipo" value="cantidad">
            <b>Quantity</b>:
            <input type="text" name="cantidad" value="" size="3" maxlength="3" class="texto">
            </td><td align="left" class="producto_comprar">
            <input type="submit" name="agregar" value="Add" class="boton">
            </td></tr>
            </form>
	    </table>

But when I use Ajax to send this same code and write it on a <div>, doesn't works on Firefox. In the rest of browsers works well.

If I change order of the line with <form> tag, like this:

	    <table border="0" cellspacing="0" cellpadding="6" class="producto_comprar">
            <tr><td align="left" class="producto_comprar">
            <form method="get" action="cesta.php" class="producto">
            <input type="hidden" name="tipo" value="cantidad">
            <b>Quantity</b>:
            <input type="text" name="cantidad" value="" size="3" maxlength="3" class="texto">
            </td><td align="left" class="producto_comprar">
            <input type="submit" name="agregar" value="Add" class="boton">
            </form>
            </td></tr>
	    </table>

...it works on Firefox but do a break line!

The only way to prevent the break line that I found is commenting this line:

    <!-- </td><td align="left" class="producto_comprar"> -->

I think Firefox with Ajax uses an HTML syntax correction or something like this. But I don't know.

If you are curious, I'm using this wrong order tags for old browsers (with display:inline; for the new) for reasons that don't need to comment (isn't theme of this thread).

Do anyone can help me, please? Thanks

Sorry for my english.

[jscheuer1]

This is the valid (according to standards) way to write that HTML code:

<form method="get" action="cesta.php" class="producto">
<table border="0" cellspacing="0" cellpadding="6" class="producto_comprar">
<tr><td align="left" class="producto_comprar">
<input type="hidden" name="tipo" value="cantidad">
<b>Quantity</b>:
<input type="text" name="cantidad" value="" size="3" maxlength="3" class="texto">
</td><td align="left" class="producto_comprar">
<input type="submit" name="agregar" value="Add" class="boton">
</td></tr>
</table>
</form>

If it doesn't layout the way you like after that, adjust the style for the elements involved. Particularly top and bottom margins and padding for the table and/or the form.

[jalbam]

Thansk for your reply.

Are your sure that your code runs on Firefox with Ajax?

My problem is differente because I need more than one <form> inside one table. I write that example before with an unique form only for simplify, sorry.

Any idea?

[jscheuer1]

I have tested similar code in FF with AJAX. Generally if the code is valid, it will still be when AJAX is done with it. If it isn't valid to begin with, but still 'works' without AJAX, that is because the browser error corrected it for you. Once passed through AJAX, error correction becomes more complicated for the browser. Since each browser error corrects differently, anything can happen. There are no standards for error correction.

The correct way to put more than one form in a table is simply to do that. If the from itself also needs a table inside of it, so be it. What you cannot do with a table is to put other elements outside of its cells (<td>'s).

[jalbam]

What you cannot do with a table is to put other elements outside of its cells (<td>'s).

But the code I wrote before doesn't have any thing outside <TD>'s:

	    <table border="0" cellspacing="0" cellpadding="6" class="producto_comprar">
            <tr><td align="left" class="producto_comprar">
            <form method="get" action="cesta.php" class="producto">
            <input type="hidden" name="tipo" value="cantidad">
            <b>Quantity</b>:
            <input type="text" name="cantidad" value="" size="3" maxlength="3" class="texto">
            </td><td align="left" class="producto_comprar">
            <input type="submit" name="agregar" value="Add" class="boton">
            </form>
            </td></tr>
	    </table>

What's wrong with it?

Thank you again

[jscheuer1]

It does though, the form is outside the td's. It starts in one but doesn't end there, so although there are no tags outside the td's, a portion of the form is outside of the cells. If you need a form with tabular organization within a table, you need to do something like so:

<table border="0" cellspacing="0" cellpadding="6">
<tr><td>
<form method="get" action="cesta.php" class="producto">
<table border="0" cellspacing="0" cellpadding="6" class="producto_comprar">
<tr><td align="left" class="producto_comprar">
<input type="hidden" name="tipo" value="cantidad">
<b>Quantity</b>:
<input type="text" name="cantidad" value="" size="3" maxlength="3" class="texto">
</td><td align="left" class="producto_comprar">
<input type="submit" name="agregar" value="Add" class="boton">
</td></tr>
</table>
</form>
</td></tr>
</table>

[jalbam]

Hello.

I changed my code with this:

<table border="0" cellspacing="0" cellpadding="6" class="producto_comprar">
	<tr>
		<td align="left" valign="middle" class="producto_comprar">
			<form method="get" action="cesta.php" name="producto_comprar_metros_6" id="producto_comprar_metros_6" class="producto" onSubmit="return validarComprarCantidad(6, 5, 100);">
			<table border="0" cellspacing="0" cellpadding="6" class="producto_comprar">
				<tr>
					<td align="left" valign="middle" class="producto_comprar">
						<input type="hidden" name="albapatch_session" value="79d299e16012fcdfc6b51d34b56961b3">
						<table border="0" cellspacing="0" cellpadding="4">
							<tr>
								<td align="center" class="producto_comprar2">
									<center>
									<input type="hidden" name="tipo" value="metros"><b>Cent&iacute;metros</b>: <div id="cantidad_errores_6" style="display:none; text-align:left; color:#660000;"></div>
									</center>
								</td>
								<td align="center">
									<center>
										<input type="text" name="cantidad" id="cantidad_6" value="100" size="3" maxlength="3" class="texto">
									</center>
								</td>
								<td align="center">
									<center>
									<table border="0" cellspacing="0" cellpadding="2" align="center">
										<tr>
											<td align="center">
												<center>
												<img src="img/web/productos/mas.gif" alt="+" title="Incrementar cent&iacute;metros" style="cursor:pointer; cursor:hand;" onClick="incrementarCentimetros(6, 5, 100);">
											</td>
										</tr>
										<tr>
											<td align="center">
												<center>
											<img src="img/web/productos/menos.gif" alt="-" title="Decrementar cent&iacute;metros" style="cursor:pointer; cursor:hand;" onClick="decrementarCentimetros(6, 5, 100);">
											</td>
										</tr>
									</table>
									</center>
								</td>
							</tr>
						</table>
					</td>
					<td valign="middle" class="producto_comprar" align="left">
						<input type="submit" name="agregar" value="Agregar" class="boton">
					</td>
				</tr>
			</table>
			</form>
		</td>
	</tr>
	<tr>
		<td align="left" class="producto_comprar">
			<form method="get" action="cesta.php" class="producto">
				<table border="0" cellspacing="0" cellpadding="6" class="producto_comprar">
					<tr>
						<td align="left" valign="middle" class="producto_comprar">
							<input type="hidden" name="albapatch_session" value="79d299e16012fcdfc6b51d34b56961b3">
							<input type="hidden" name="tipo" value="pieza_entera"><b>Pieza entera</b>
						</td>
						<td align="left" class="producto_comprar">
							<input type="submit" name="agregar" value="Agregar" class="boton">
						</td>
					</tr>
				</table>
			</form>
		</td>
	</tr>
	<tr>
		<td align="left" class="producto_comprar">
			<form method="get" action="cesta.php" class="producto">
				<table border="0" cellspacing="0" cellpadding="6" class="producto_comprar">
					<tr>
						<td align="left" valign="middle" class="producto_comprar">
							<input type="hidden" name="albapatch_session" value="79d299e16012fcdfc6b51d34b56961b3">
							<input type="hidden" name="tipo" value="pieza_media"><b>Media pieza</b>
						</td>
						<td align="left" class="producto_comprar">
							<input type="submit" name="agregar" value="Agregar" class="boton">
						</td>
					</tr>
				</table>
			</form>
		</td>
	</tr>
	<tr>
		<td align="left" class="producto_comprar">
			<form method="get" action="cesta.php" class="producto">
				<table border="0" cellspacing="0" cellpadding="6" class="producto_comprar">
					<tr>
						<td align="left" valign="middle" class="producto_comprar">
							<input type="hidden" name="albapatch_session" value="79d299e16012fcdfc6b51d34b56961b3">
							<input type="hidden" name="tipo" value="pieza_cuarto"><b>Cuarto de pieza</b>
						</td>
						<td align="left" class="producto_comprar">
							<input type="submit" name="agregar" value="Agregar" class="boton">
						</td>
					</tr>
				</table>
			</form>
		</td>
	</tr>
</table>

Now works with Ajax under Firefox but doesn't looks like I want. I want an aspect like this:



But now appers like this:



Its full of troubles!

Please, note that I want four differente forms.

[jscheuer1]

You need to remove the border from the inner tables, and set some other styles differently than the container table. Something like so in your stylesheet:

table.producto_comprar table.producto_comprar {
border:none;
width:100%;
}

You may also need some styles for the:

table.producto_comprar table.producto_comprar td {
styles go here
}

selector.

Also, it would be a good idea to have a separate class for the inner tables. That way it would be easier to collapse the outer table's border:

border-collapse:collapse;

while leaving room for the borders of the cells of the inner tables.

I cannot be more specific without a link to your page or the full code for the page and its images.

Please post a link to the page on your site that contains the problematic code so we can check it out.

[jalbam]

Now works fine

It was a problem with "HTML correction" of Firefox using AJAX.

I don't like use percent values instead absolute on width properties because exists old browsers that doesn't support this feature, but I will fix it with PHP code.

Thank you very much again

See you soon!

[jscheuer1]

That's good. Just as a note, I don't believe percent width will hurt any browser that recognizes style from a style sheet, as long as it is for a nested element with the container element having a width set for it in fixed units. That is what I was thinking about doing here, but I wasn't even sure about that, because I had not seen the existing styles.

But, as I say, if it is working now, Great!