Style Is Not Applied After Loading Content

Question

I'm using jquery's ajax function to return a partial view from the server. In the success parti I'm appending it into a DIV using $.(html). But the content is loaded without any styling. I've tried different ways to append the style but got no results.

Here is the ajax, called after documentReady

        $.ajax({
        type: "GET",
        url: '@Url.Action("Accessories", "Tablo")',
        success: function (data) {
            $("#secimlerDetay").html(data);
        },
        }
    });

The return of the async call is a partial view, here:

 @model RenkliTablo.ViewModels.AccessoryViewModel

<div id="cerceveList">
    <span>Cerceveler</span>

    @foreach (var cerceve in Model.cerceveList)
    {
        <a class="cerceve" data-accessoryId="@cerceve.AccessoryId" href="/">
            <img class="accImg" alt="" src="../../Content/Images/kapcik.png" />
            <span class="accText">@cerceve.Thickness cm</span>
        </a>
    }
</div>

<div id="paspartuList"> 
    <span style="font-weight:bold;">Paspartular</span>       

    @foreach (var paspartu in Model.paspartuList)
    {
        <a class="paspartu" data-accessoryId="@paspartu.AccessoryId" href="/">
            <img class="accImg" alt="" src="../../Content/Images/kapcik.png" />
            <span class="accText" style="font-weight:bold;">@paspartu.Thickness cm</span>
        </a>
    }
</div>

As you can see, I specified a style="font-weight:bold" in the .cshtml file, but I don't see any bold text when jquery loads the partial view. The data is loaded OK, but the style is missing.

Show us the HTML/CSS output. That is all that matters in the end. — D'Arcy Rittich, Jun 27 '12 at 17:57
Ok, I found this line from Chrome's inspector. If you know a better way to fully extract the final output, I can do that. Here the style code is like, gone. `6 cm` — Halo, Jun 27 '12 at 18:02
What browser are you using? IE does not support css loaded via ajax: http://stackoverflow.com/questions/3134164/ie-doesnt-apply-css-loaded-through-ajax — tybro0103, Jun 27 '12 at 18:06
here's my initial rules in Site.css. By the way, this doesn't work but I just used .accText{} and it worked? `/* accessories **************************/ div#secimlerdetay { width:100%; height:70px; border:1px solid #000000; } div#secimlerdetay img.accImg { max-width:95%; max-height:80%; margin-left:auto; margin-right:auto; height:70%; width:auto; display:block; } div#secimlerdetay span.accText { display:block; text-align:center; height:25%; margin-top:2px; } /******************************************/` — Halo, Jun 27 '12 at 18:07
If I put this in Site.css, it works: `.accText { display:block; text-align:center; height:25%; margin-top:2px; }` — Halo, Jun 27 '12 at 18:10
Ok, I'll try to put a container DIV inside the partial view and point to that in Site.css — Halo, Jun 27 '12 at 18:12

score 1 · Answer 1 · answered Jun 27 '12 at 21:02

replace <span style="font-weight:bold;">Paspartular</span>

with

<strong>Paspartular</strong> 



<span class="accText" style="font-weight:bold;">@paspartu.Thickness cm</span>

with

<span class="accText"><strong>@paspartu.Thickness cm</strong></span>

Style Is Not Applied After Loading Content

1 Answers1