Page 1 of 1

Mysterious FireFox DIVs

Posted: Sat Jul 31, 2010 5:31 pm
by avivm3
I've got a web application doing some basic AJAX stuff, but for some reason, when I view the source code in FireFox, the browser is showing a new DIV tag in the middle of two of mine, and then it puts in THREE closing DIV tags a whole element before I had programmed only one. Wtf? So here's what my code SHOULD be doing:

Code: Select all

<div id="FormDisplay_Inactive">One moment...</div>
The DIV above is hidden by the CSS by default. An AJAX function makes a call and then replaces the innerHTML of this DIV above with its response text, and changes the style of the DIV to display it.

This is what the response text is should be generating (inside the "formDisplay" DIV):

Code: Select all

<div id="CustForm_<?php echo $CustomerID; ?>"> <!--Note that the #### is dynamically generated by the PHP-->
    <div id="CustForm_header">
    	<span class="leftLabel">&nbsp;</span>Status:<br/>
        <span class="leftLabel">&nbsp;</span><input type="checkbox" name="Status[]" id="Status" tabindex="14" value="Active" <?php if($Status_chk){echo $Status_chk;}else{echo 'checked="checked"';} ?>/> 
        ACTIVE (uncheck to de-activate)
        
        <input name="CustomerID" type="hidden" id="CustomerID" size="5" maxlength="5" readonly="readonly" value="<?php echo $CustomerID; ?>"/>
        
    </div>
    
    <div id="CustForm_body">stuff...
    </div>

    <div id="CustForm_footer">
    </div>
</div> <!--close of the "CustForm_####"
The problem is that when I view the source (FireFox), the beginning actually looks like this:

Code: Select all

<div id="FormDisplay_Inactive">[color=#FF0000]<div>[/color]<div id="CustForm_1078">
    
    <div id="CustForm_header">
    	<span class="leftLabel">&nbsp;</span>Status:<br>
        <span class="leftLabel">&nbsp;</span><input name="Status[]" id="Status" tabindex="14" value="Active" checked="checked" type="checkbox"> 
        ACTIVE (uncheck to de-activate)
        
        [color=#FF0000]</div></div></div>[/color]<input name="CustomerID" id="CustomerID" size="5" maxlength="5" readonly="readonly" value="1078" type="hidden">
     
    <div id="CustForm_body">
The DIV tags in red are not supposed to be there at all (or the last one should be AFTER the input element). Does anyone know what FireFox would be adding these DIVs? The same code PHP code is used elsewhere (in between a uniquely named DIV) and those extra tags don't appear.

Thanks!

Re: Mysterious FireFod DIVs

Posted: Sat Jul 31, 2010 5:38 pm
by superdezign
What other browsers have you tested this in? Have you set a <!DOCTYPE>? Are you copying this from a raw "View Source" or Firefox's / Firebug's formatted source?

Re: Mysterious FireFox DIVs

Posted: Sat Jul 31, 2010 6:19 pm
by avivm3
The application is still under early development, and I'm using FireFox as by base to get it worked out first. I plan on going back and checking browser compatibility after it's done. So, none, is the answer to your first question.

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

The color formatting of the text was done by me to help highlight the ones to which I was referring; is that what you're asking?

Re: Mysterious FireFox DIVs

Posted: Sat Jul 31, 2010 6:26 pm
by superdezign
No. My suspicion is that your HTML isn't as well formatted as you think it is. The usual culprit is an opening tag where you meant to put a closing tag. It happens when you're a typing fast. :P

Try to properly indent all of the HTML in your original file to see if you can find some extra opening tags or missing closing tags. Firefox likes to show you the HTML that IT is using rather than the HTML that was provided, especially when it comes to closing tags.

Re: Mysterious FireFox DIVs

Posted: Sat Jul 31, 2010 8:26 pm
by Benjamin
Firefox does not display the actual source, it displays the interpreted source.

Re: Mysterious FireFox DIVs

Posted: Sat Jul 31, 2010 9:15 pm
by Eran
I'd suggest the following Firefox plugin for HTML validation - http://users.skynet.be/mgueury/mozilla/
It will probably show you where the problem is

Re: Mysterious FireFox DIVs

Posted: Sun Aug 01, 2010 2:33 pm
by avivm3
Sure, a missing tag makes sense. But I'm not having any luck finding it.

pytrin - I tried the plugin you suggested. Pretty slick (already found some errors in other places where the browser was just fixing it for me). But the content in question is created via AJAX, and the source code the plugin is showing seems to only be the content when the page was first loaded. Am I correct, or is there a way I can get it to "look again"?

Re: Mysterious FireFox DIVs

Posted: Sun Aug 01, 2010 3:26 pm
by Eran
If it's created by AJAX (somehow missed that), what do you expect to see by viewing the source? the source only reflects the state of the page as it was originally loaded. You should probably show us the Javascript code that adds the DIVs

Re: Mysterious FireFox DIVs

Posted: Sun Aug 01, 2010 3:39 pm
by superdezign
Also, as a Firefox user, you may be interested in downloading the Firebug extension. It shows you the interpreted HTML as is and updates live.

Re: Mysterious FireFox DIVs

Posted: Sun Aug 01, 2010 6:14 pm
by avivm3
Yup, I've got FireBug, though I suspect I could use it to greater benefit.

pytrin - I thought the response text would be accessible in some way because in FireFox, viewing the source shows the "new" code, right in the places where the JS put them. Granted, like y'all said before, I'm looking at an "interpreted" form of the original code. But still, an original exists. Same with the AJAX response, no? At some level, the browser is receiving this response text...

The response text is basically this:
<div id="CustForm_<?php echo $CustomerID; ?>"> <!--Note that the #### is dynamically generated by the PHP-->
<div id="CustForm_header">
<span class="leftLabel">&nbsp;</span>Status:<br/>
<span class="leftLabel">&nbsp;</span><input type="checkbox" name="Status[]" id="Status" tabindex="14" value="Active"/>
ACTIVE (uncheck to de-activate)

<input name="CustomerID" type="hidden" id="CustomerID" size="5" maxlength="5" readonly="readonly" value="<?php echo $CustomerID; ?>"/>

</div>

<div id="CustForm_body">stuff...
</div>

<div id="CustForm_footer">
</div>
</div>

I'm pretty sure everything here is closed properly, and it all goes inside <div id="formDisplay"></div>

Re: Mysterious FireFox DIVs

Posted: Sun Aug 01, 2010 8:31 pm
by avivm3
Bahh... found it. My DIV was in between the last row of a table, and the /table tag. I moved things to the right place and she works like a charm. Thanks for everyone's suggestions!