Page 1 of 2 12 LastLast
Results 1 to 10 of 11

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

  1. #1
    Join Date
    Aug 2006
    Location
    Spain
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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:

    Code:
    	    <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:

    Code:
    	    <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:
    Code:
        <!-- </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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2006
    Location
    Spain
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2006
    Location
    Spain
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:

    HTML Code:
    	    <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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Aug 2006
    Location
    Spain
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello.

    I changed my code with this:

    HTML Code:
    <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.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    table.producto_comprar table.producto_comprar {
    border:none;
    width:100%;
    }
    You may also need some styles for the:

    Code:
    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:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Aug 2006
    Location
    Spain
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!
    Last edited by jalbam; 02-12-2008 at 12:48 PM.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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!
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •