Mysterious FireFox DIVs

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
avivm3
Forum Commoner
Posts: 31
Joined: Mon Jul 12, 2010 5:29 pm

Mysterious FireFox DIVs

Post 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!
Last edited by Benjamin on Sat Jul 31, 2010 8:25 pm, edited 2 times in total.
Reason: Added [syntax=php] tags.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: Mysterious FireFod DIVs

Post 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?
avivm3
Forum Commoner
Posts: 31
Joined: Mon Jul 12, 2010 5:29 pm

Re: Mysterious FireFox DIVs

Post 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?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: Mysterious FireFox DIVs

Post 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.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: Mysterious FireFox DIVs

Post by Benjamin »

Firefox does not display the actual source, it displays the interpreted source.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Mysterious FireFox DIVs

Post 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
avivm3
Forum Commoner
Posts: 31
Joined: Mon Jul 12, 2010 5:29 pm

Re: Mysterious FireFox DIVs

Post 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"?
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Mysterious FireFox DIVs

Post 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
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: Mysterious FireFox DIVs

Post 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.
avivm3
Forum Commoner
Posts: 31
Joined: Mon Jul 12, 2010 5:29 pm

Re: Mysterious FireFox DIVs

Post 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>
avivm3
Forum Commoner
Posts: 31
Joined: Mon Jul 12, 2010 5:29 pm

Re: Mysterious FireFox DIVs

Post 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!
Post Reply