Multiple jCarousels in IE7

Question

Hi,

I’m working on an MVC app using the jCarousel plugin where I have one carousel on a view and a second carousel on a partial view returned as a dialog when a link is clicked.

My issue is that on the second carousel the each function below (from jquery.jcarousel.js) is not hit in IE7 so the carousel doesn’t load.

$.fn.jcarousel = function(o) {
    return this.each(function() {
        new $jc(this, o);
    });
};

My code for loading the dialog (ConfectionaryDialog is just a div):

function ShowConfectionaryPopup() {
    $.get('/Home/ConfectionaryOption', {}, function(data) {
        $('#ConfectionaryDialog').dialog('option', 'buttons', {
            "Continue": function() {
                $('#ConfectionaryDialog').dialog("close");
                window.location = "/Order/Confirm";
            }
        });
        $('#ConfectionaryDialog').empty().html(data).dialog('open');
        LoadCarousel(true);
    });

Controller action:

    public ActionResult ConfectionaryOption()
    {
        if (Request.IsAjaxRequest())
        {
            IQueryable<ItemType> itemTypes;

            SessionOrders order = (SessionOrders)Session["BasketItems"];
            order.HasBeenToConfectionary = true;
            itemTypes = this._itemTypeService.FindAllItemTypes().Where(i => i.ItemTypeID == 7 || i.ItemTypeID == 8);

            return PartialView("ConfectionaryForm", new ProductFormViewModel(itemTypes));
        }
        else
        {
            return View("NotFound");
        }
    }

Code for loading the appropriate carousel:

function LoadCarousel(upsell) {
  if (upsell) {
    onUpsellPopup = true;

    // Initiate the jCarousel on the partial view dialog
    $('#upsell > #upsellLeft > #ingredients > #ingredientOptions').jcarousel({
        scroll: 7,
        visible: 7,
        animation: 'slow',
        initCallback: function(c, s) { jcInstance = c; },
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
  }
  else {
    onUpsellPopup = false;

    // Initiate the jCarousel on the view
    $('#ingredientOptions').jcarousel({
        scroll: 7,
        visible: 7,
        animation: 'slow',
        initCallback: function(c, s) { jcInstance = c; },
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
  }

Has anyone else had a similar issue?