css won't load after jquery ajax call in partial view

Question

I'm trying to change the content of the menu whenever the user clicks a button. The CSS loads fine initially, but once i press the button to initiate the ajax call, the menu bar returns, but none of the CSS is applied. All of the code is in an MVC 4 partial view.

Before I hit the button

After I hit the button

Here's my JS

$(document).ready(function () {

    $("#menu").wijmenu({
        orientation: 'vertical'
    });

    $("#TDButtons a").click(function () {
        var href = $(this).attr("href");
        $('#menuAjax').fadeOut('slow', LoadAjaxContent(href));
        return false;
    });

    function LoadAjaxContent(href) {

        $.ajax(
            {
                url: href,
                success: function (data) {
                    $("#menuAjax").html(data).fadeIn('slow');
                }
            });

    }
});

Here's the nav tag

   <nav id="menuAjax">
        <ul id="menu">
            <li><a href="#">Breaking News</a>
                <ul>
                  ...

Here's the HTML for the buttons to initiate the AJAX

   <div class="navDiv">
        <div id="TDButtons">
            <a href="@Url.Action("_menu", "Home", new { TakeoutDelivery = "TakeOut" }, null)">
                <img class="headerLogo" src="../../Content/Images/TakeoutButton.jpg" alt="Take Out" /></a>
            <a href="@Url.Action("_menu", "Home", new { TakeoutDelivery = "Delivery" }, null)">
                <img class="headerLogo" src="../../Content/Images/DeliveryButton.jpg" alt="Delivery" /></a>
        </div>

Please let me know if you need anything else.

Robin Rieger · Accepted Answer · 2012-10-17 04:05:19Z

3

Put this on the page.

function pageLoad(sender, args) {
 $('#OutsideDiv').trigger('create');
}

This will re attach the css on page load. The problem I presume is that it is only a partial post and hence you are lossing the style sheets. I had a very similar problem with my mobile site in jquery-mobile when making partial postback calls. This fixed it re partial postbacks.....

Note: there is a very small delay for it to render... Not sure if this will be a problem for you....

Hope it helps

Cheers Robin

answered Oct 17, 2012 at 4:05

Robin Rieger

1,2041 gold badge17 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

code-jaff · Accepted Answer · 2012-10-17 04:46:00Z

0

I needed to add

$("#menu").wijmenu({
    orientation: 'vertical'
});

into the LoadAjaxContent function.

function LoadAjaxContent(href) {
    $.ajax({
        url: href,
        success: function(data) {
            $("#menuAjax").html(data).fadeIn('slow');
            $("#menu").wijmenu({
                orientation: 'vertical'
            });
        }
    });
}

edited Oct 17, 2012 at 4:46

code-jaff

9,3284 gold badges38 silver badges56 bronze badges

answered Oct 17, 2012 at 4:36

dright

6531 gold badge9 silver badges21 bronze badges

Collectives™ on Stack Overflow

css won't load after jquery ajax call in partial view

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related