Databases
StackOverflow2013
Postsdbo
POIE8 jQuery HTML not displaying correctly
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIE8 jQuery HTML not displaying correctly
    text
    copied!<p>I have a dropdown box that populates a div using jquery .html function when the selection in the dropdown is changed.</p> <p>This works correctly in all browsers apart from when the site is viewed in IE8 it has some display issues.</p> <p>I have checked all of the markup in my Javascript and all the html elements are properly closed and nested. Here is my code:</p> <p>HTML:</p> <pre><code>&lt;form action="/" method="post" id="selectClub"&gt; &lt;p&gt;Thanks for thinking about joining FitSpace. Our five step joining process takes less than 5 minutes, and is quick, easy and all online. To get started, just choose the club you would like to join..&lt;/p&gt; &lt;label for="chooseClub"&gt;Choose Club&lt;/label&gt; &lt;select name="chooseClub"&gt; &lt;option value=""&gt;-- Please Select --&lt;/option&gt; &lt;?php foreach($this-&gt;clubs as $club) { ?&gt; &lt;option value="&lt;?php echo $club['GYMGUID']; ?&gt;"&gt;&lt;?php echo $club['GYMNAME']; ?&gt;&lt;/option&gt; &lt;?php } ?&gt; &lt;/select&gt; &lt;/form&gt; &lt;div id="ratesWrapper"&gt; &lt;/div&gt; </code></pre> <p>jQuery:</p> <pre><code>if (data.result = true) { var html = ""; jQuery.each(data.rates, function (i, v) { var link = "&lt;?php echo JRoute::_('index.php?option=com_signup&amp;view=memberForm1'); ?&gt;"; var imgLink = "&lt;?php echo addslashes($this-&gt;baseurl . '/templates/protostar/images/bg_pricing_join_now.png'); ?&gt;"; html += "&lt;a class='rate' href='" + link + "&amp;GYMGUID=" + v.GYMGUID + "&amp;RATEGUID=" + v.RATEGUID + "'&gt;"; html += "&lt;h4&gt;&lt;img src='" + imgLink + "' /&gt;" + v.RATENAME + "&lt;/h4&gt;"; if (v.RATENAME.indexOf('Value') &gt; -1) { html += "&lt;p class='time'&gt;Monthly&lt;/p&gt;"; } else if (v.RATENAME.indexOf('Flex') &gt; -1) { html += "&lt;p class='time'&gt;Monthly&lt;/p&gt;"; } else if (v.RATENAME.indexOf('Annual') &gt; -1) { html += "&lt;p class='time'&gt;Annual&lt;/p&gt;"; } if (v.RATENAME.indexOf('Annual') &gt; -1) { html += "&lt;p class='ratePrice'&gt;&amp;pound;" + v.RATE + " annual fee&lt;/p&gt;"; } else { html += "&lt;p class='ratePrice'&gt;&amp;pound;" + v.RATE + " per month&lt;/p&gt;"; } if (v.RATENAME.indexOf('Value') &gt; -1) { html += "&lt;p class='signUp'&gt;With a one-off &amp;pound;29 joining fee&lt;/p&gt;"; html += '&lt;p&gt;18 months minimum term&lt;br /&gt; Paid by Direct Debit monthly&lt;/p&gt;'; } else if (v.RATENAME.indexOf('Flex') &gt; -1) { html += '&lt;p class="signUp"&gt;With a one-off &amp;pound;29 joining fee&lt;/p&gt;'; html += "&lt;p&gt;No Contract, but you need to give us one month's notice to cancel.&lt;/p&gt;"; html += "&lt;p&gt;Paid by Direct Debit monthly&lt;/p&gt;"; } else if (v.RATENAME.indexOf('Annual') &gt; -1) { html += "&lt;p class='signUp'&gt;With NO joining Fee.&lt;/p&gt;"; html += '&lt;p&gt;12 months membership&lt;br /&gt; Paid by one-off Direct Debit&lt;/p&gt;'; } html += "&lt;p class='clickHere'&gt;Click here to join!&lt;/p&gt;"; html += "&lt;/a&gt;"; }); html += "&lt;ul class='signupBottomBoxes'&gt;"; html += "&lt;p&gt;All memberships include:&lt;/p&gt;"; html += "&lt;li&gt;Proximity Membership card which provides Unlimited Use&lt;/li&gt;"; html += "&lt;li&gt;Join One Club - use them all&lt;/li&gt;"; html += "&lt;li&gt;Free Induction&lt;/li&gt;"; html += "&lt;/ul&gt;"; } jQuery('#ratesWrapper').html(html); jQuery('#ratesWrapper').hide().fadeIn('slow'); } </code></pre> <p>When I check the markup using in IE8 IE web dev toolbar the generated markup shows as this:</p> <pre><code>&lt;div id="ratesWrapper"/&gt; </code></pre> <p>I am unsure as to why this is happening. Could anybody point me in the right direction? Thanks</p> <p>How it is supposed to look:</p> <p><img src="https://i.stack.imgur.com/skSQM.png" alt="enter image description here"></p> <p>How it looks in IE8</p> <p><img src="https://i.stack.imgur.com/2GDaD.png" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload