0

I have a dropdown box that populates a div using jquery .html function when the selection in the dropdown is changed.

This works correctly in all browsers apart from when the site is viewed in IE8 it has some display issues.

I have checked all of the markup in my Javascript and all the html elements are properly closed and nested. Here is my code:

HTML:

<form action="/" method="post" id="selectClub">     
    <p>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..</p>
    <label for="chooseClub">Choose Club</label>
    <select name="chooseClub">      
        <option value="">-- Please Select --</option>
        <?php foreach($this->clubs as $club) { ?>
            <option value="<?php echo $club['GYMGUID']; ?>"><?php echo $club['GYMNAME']; ?></option>
        <?php } ?>
    </select>
</form>
<div id="ratesWrapper">

</div>

jQuery:

if (data.result = true) {
 var html = "";
 jQuery.each(data.rates, function (i, v) {
     var link = "<?php echo JRoute::_('index.php?option=com_signup&view=memberForm1'); ?>";
     var imgLink = "<?php echo addslashes($this->baseurl . '/templates/protostar/images/bg_pricing_join_now.png'); ?>";
     html += "<a class='rate' href='" + link + "&GYMGUID=" + v.GYMGUID + "&RATEGUID=" + v.RATEGUID + "'>";
     html += "<h4><img src='" + imgLink + "' />" + v.RATENAME + "</h4>";
     if (v.RATENAME.indexOf('Value') > -1) {
         html += "<p class='time'>Monthly</p>";
     } else if (v.RATENAME.indexOf('Flex') > -1) {
         html += "<p class='time'>Monthly</p>";
     } else if (v.RATENAME.indexOf('Annual') > -1) {
         html += "<p class='time'>Annual</p>";
     }
     if (v.RATENAME.indexOf('Annual') > -1) {
         html += "<p class='ratePrice'>&pound;" + v.RATE + " annual fee</p>";
     } else {
         html += "<p class='ratePrice'>&pound;" + v.RATE + " per month</p>";
     }
     if (v.RATENAME.indexOf('Value') > -1) {
         html += "<p class='signUp'>With a one-off &pound;29 joining fee</p>";
         html += '<p>18 months minimum term<br /> Paid by Direct Debit monthly</p>';
     } else if (v.RATENAME.indexOf('Flex') > -1) {
         html += '<p class="signUp">With a one-off &pound;29 joining fee</p>';
         html += "<p>No Contract, but you need to give us one month's notice to cancel.</p>";
         html += "<p>Paid by Direct Debit monthly</p>";
     } else if (v.RATENAME.indexOf('Annual') > -1) {
         html += "<p class='signUp'>With NO joining Fee.</p>";
         html += '<p>12 months membership<br /> Paid by one-off Direct Debit</p>';
     }
     html += "<p class='clickHere'>Click here to join!</p>";
     html += "</a>";
 });
 html += "<ul class='signupBottomBoxes'>";
 html += "<p>All memberships include:</p>";
 html += "<li>Proximity Membership card which provides Unlimited Use</li>";
 html += "<li>Join One Club - use them all</li>";
 html += "<li>Free Induction</li>";
 html += "</ul>";
}

jQuery('#ratesWrapper').html(html);
jQuery('#ratesWrapper').hide().fadeIn('slow');

}

When I check the markup using in IE8 IE web dev toolbar the generated markup shows as this:

<div id="ratesWrapper"/>

I am unsure as to why this is happening. Could anybody point me in the right direction? Thanks

How it is supposed to look:

enter image description here

How it looks in IE8

enter image description here

4
  • The #ratesWrapper div is just self closed in the IE inspector - which is fine as it has no elements within it. Why exactly does it not appear correctly in IE8? Jul 26, 2013 at 9:49
  • Yeah it's strange as I don't know why it is self closed. I will add screenshots to show the difference.
    – James
    Jul 26, 2013 at 9:50
  • what jquery version are you using? Do you get any errors in the Ie8 console?
    – Spudley
    Jul 26, 2013 at 10:08
  • I am using v1.8.1. I don't get any warnings.
    – James
    Jul 26, 2013 at 10:21

1 Answer 1

0

Ok I have found the problem. I am using CSS3 selectors for the styling which unfortunately don't work in IE8. Hope this helps anyone in future.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.