HTML created by PHP is created out of sequence <p>I have a PHP file which outputs some HTML.</p> <p>For ease of configuration I have a <code>second</code> PHP file that is included in the <code>first</code> PHP file. This included file simply contains an array definition as follows:</p> <pre><code>&lt;? $myArray = array("key1"=&gt;"value 1","key2"=&gt;"value 2","key3"=&gt;"value 3"); ?&gt; </code></pre> <p>In my first PHP file I have the following</p> <pre><code>&lt;? include("second.php"); ?&gt; &lt;label&gt;Select here: &lt;select id='mySelect'&gt; &lt;? foreach ($myArray as $keyString=&gt;$valueString) { ?&gt; &lt;option value='&lt;?= $keyString; ?&gt;'&gt;&lt;?= $valueString; ?&gt;&lt;/option&gt; &lt;? } ?&gt; &lt;/select&gt; &lt;/label&gt; </code></pre> <p>However the HTML output is generated as follows:</p> <pre><code>&lt;label&gt;Select here: &lt;select id='mySelect'&gt; &lt;/select&gt; &lt;option value='key1'&gt;value 1&lt;/option&gt; &lt;option value='key2'&gt;value 2&lt;/option&gt; &lt;option value='key3'&gt;value 3&lt;/option&gt; &lt;/label&gt; </code></pre> <p>which renders as an empty select dropdown with the text of the options shown below it!</p> <p>I'm sure this is something stupid and simple as I'm sure I have done this many times before without problems...</p> <hr> <p>[Update]</p> <p>After investigation it turns out that this is only happening when I display the <code>first</code> PHP page within FancyBox - when I load it directly the options are included in the <code>&lt;select&gt;</code> as you would expect.</p> <p>The FancyBox is opened via JavaScript via the onClick event of an image as follows (the image is on the background page that the FancyBox opens on, it is not part of first.php or second.php):</p> <pre><code>&lt;img src="myImage.png" alt="my image" onClick="openFirstPHP();"&gt; </code></pre> <p>in my JavaScript I have (in <code>first.js</code> which is included in <code>first.php</code> with the usual <code>&lt;SCRIPT&gt;</code> tags):</p> <pre><code>function openFirstPHP() { $.fancybox({ href: "/first.php", type: "ajax", afterShow: function() { // do some setting of some radio buttons' states - which works fine } }); } </code></pre> <p>For info, the reason I call <code>first.php</code> this way rather than in an iFrame or whatever is that it interacts with the calling page as well and so avoid me having to reference a different document object (I think).</p> <p>Basically everything else works without problems in <code>first.php</code> - the reading and settings of cookies, the interaction with the calling PHP page variables etc. The only thing that is not working is the insertion of these <code>&lt;options&gt;</code> tags out of sequence with the <code>&lt;select&gt;</code> tags.</p>