Question

I’m working on a website that includes Facebox to load content for a basket process.

When adding something to the basket and clicking the green wishlist button I’m having trouble with it loading in IE8, it works on all the modern browsers. Can anyone see why it won’t load content in IE8 in the facebox?

I’m using this code on the wishlist button:

<div onclick="location.href='wishlist.php?basket=true'" rel="msgbox" id="mybasket">

Is it enough info to view source on the link to the site? If you need any more code then please ask.

On a Mac using Chrome – as you can see the facebox has opened fine when clicking on the green wishlist button.

On a PC using IE8 – when clicking on the green wishlist button the facebox opens but doesn’t load the content.

Answer 1

This is a problem with the returned data, You have an extra </div> at the end.

<div id="msgbox_title">Your Wish List<div id="closeme" onclick="jQuery(document).trigger('close.facebox')">x</div></div>
<form method="post" action="wishlist.php">
<div id="msgbox_body" style="max-height:400px;min-height:100px;overflow-y:auto;overflow-x:hidden;">
<input type="hidden" name="updatebasket" value="1" />
<table border="0" cellpadding="0" cellspacing="5" align="center" style="min-width:390px;border-collapse:separate!IMPORTANT;">
<tr><td colspan="5" style="text-align: left;"><strong style="font-size:14px;">Rotunda Vulsellum Forceps</strong></td></tr>  <tr>
        <td style="width: 50px;"><span style="color: #aaa;">Quote:</span></td>
        <td style="width: 50px;"><span style="color: #aaa;">Sample:</span></td>
        <td style="width: 350px;"><span style="color: #aaa;">Description:</span></td>

        <td style="width: 80px;"><span style="color: #aaa;">Pack size:</span></td>
        <td style="width: 40px;"><span style="color: #aaa;">Remove</span></td>
    </tr>

      <tr>
          <!-- <td style="padding:0px 2px;"><input type="textbox" class="textbox" value="3" name="54_59_131" /></td> -->
          <td align="center" valign="middle" style="background-color:#C3DCCD;"><input checked="checked" style="margin:5px;" type="checkbox" name="products-quote[]" value="835" /></td>
          <td align="center" valign="middle" style="background-color:#D3C4DF;"><input checked="checked" style="margin:5px;" type="checkbox" name="products-sample[]" value="835" /></td>

          <td style="font-size:11px;background-color:#efefef;"><p style="margin:0px 0px 5px 0px;padding:5px;"><span style="color:#663399;font-weight:bold;">VFR1001</span> Sterile Single-use Rotunda Vulsellum Forceps, double packed</p></td>
          <td style="font-size:11px;background-color:#efefef;"><p style="margin:0px 0px 5px 0px;padding:5px; font-weight:bold;">10 units</p></td>
          <td align="center"><b><a href="#" onclick="jQuery.facebox({ ajax: 'wishlist.php?basket=true&del=835' })">X</a></b></td>
      </tr>
        </table>
</div>
<script>
function quoteme() {
        $("#msgbox_body").html('<div id="contactform" style="margin-left:20px;margin-right:20px;margin-top:10px;"><form class="form" method="POST" action="http://www.dtrmedical.com"><table border="0"><tbody><tr><td><p class="name"><label for="name">Your Name<span style="color:red;">*</span>:</label></p></td><td>&nbsp;</td><td><input type="text" name="name" id="name" /></td></tr><tr><td><p class="hospital"><label for="hospital">Hospital/Institution:</label></p></td><td>&nbsp;</td><td><input type="text" name="hospital" id="hospital" /></td></tr><tr><td><p class="department"><label for="department">Department:</label></p></td><td>&nbsp;</td><td><input type="text" name="department" id="department" /></td></tr><tr><td><p class="email"><label for="email">E-mail<span style="color:red;">*</span>:</label></p></td><td>&nbsp;</td><td><input type="text" name="email" id="email" /></td></tr><tr><td><p class="tel"><label for="tel">Telephone<span style="color:red;">*</span>:</label></p></td><td>&nbsp;</td><td><input type="text" name="tel" id="tel" /></td></tr><tr><td colspan="3" align="center"><p class="submit"><input style=\"margin-left:27px;cursor:pointer;\" onclick="jQuery.facebox({ ajax: (\'wishlist.php?emailme=true&name=\' + this.form.name.value + \'&email=\' + this.form.email.value + \'&tel=\' + this.form.tel.value + \'&hospital=\' + this.form.hospital.value + \'&department=\' + this.form.department.value) }); return false;" type="submit" value="Send enquiry" name="submit" /></p></td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></form></div>');
        $("#msgbox_actions").html('<input onclick="jQuery.facebox({ ajax: \'wishlist.php?basket=true\' })" type="button" value="Back to Wishlist" />');
}

</script>
<div id="msgbox_actions"><input onclick="quoteme()" type="button" value="Request quote/sample" /> <a class="backtoproducts" href="http://www.dtrmedical.com/products" style="border-bottom-left-radius:5px 5px;border-bottom-right-radius:5px 5px;border-bottom-style:none;border-color:initial;border-left-style:none;border-right-style:none;border-top-left-radius:5px 5px;border-top-right-radius:5px 5px;border-top-style:none;border-width:initial;color:white;font-family:Arial;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;font-size:11px;">Back to products</a></div><!-- <input type="submit" value="Update" /> --><!-- <input onclick="jQuery.facebox({ ajax: 'wishlist.php?emailme=true' })" type="button" value="Save list for later" /> --> <!-- <input type="submit" value="Update Qty's" /> <input onclick="jQuery.facebox({ ajax: 'wishlist.php?basket=true&clearall=true' })" type="button" value="Clear list" /> --></div>
</form>

In the line of starting with <div id="msgbox_actions">, at the end of it after the comments, is the extra </div>

This is breaking your html, which IE doesn’t know how to fix, yet other browsers are able to.