JQUERY Css not being applied until after refresh of page

Question

I am using JQuery in a separate js file in a RAZOR MVC application to dynamically build a html table from scratch using the APPEND method. This works fine, however when I use ADDCLASS it seems as though none of the css is applied until after I refresh the page. Sometimes not at all! This code is a simple table with 30 day header cells and another row below with one cell spanned all across. I also included my css.

$(document).ready(function () {
    var startDate = $.telerik.formatString('{0:d}', $("#Start").data("tDatePicker").value());
    var forCalendarStartDate = new Date(startDate);

    $('#CalendarWrapper').append('<table id="Master"></table>');
    $('#Master').append('<tr id="MasterDatesRow"></tr>');
    for (var i = 0; i < 31; i++) {
        var headerDate = new Date();
        var d = new Date(headerDate.setDate(forCalendarStartDate.getDate() + i));
        var s = $.datepicker.formatDate('mm-dd', d);

        $('#MasterDatesRow').append('<th>' + s + '</th>');
    }
    $('#Master').append('<tr id="Header1"></tr>');
    $('#HeaderUSARAF').append('<td colspan="31" id="HeaderCell">USARAF</td>');

    //Class
    $('#Master').addClass('CalendarTable');
    $('#MasterDatesRow').addClass('DateHeader');
    $('#HeaderCell').addClass('Header');
});

css

.CalendarTable
{
    border:1;
    width:100%;
     font-size:small;
}

.DateHeader
{
    background-color:Green;

}

.Header
{ 
    background-color:#DBACBC;
    text-align:center;
}

What does your question has to do with ASP.NET MVC3? Could you fix you tags? — Darin Dimitrov
– Darin Dimitrov, Commented May 22, 2012 at 8:43
Not sure. Thats why I asked. I was not sure if and when CSS was applied after the page loaded — Ryan Lege
– Ryan Lege, Commented May 22, 2012 at 9:09
Just make sure your html CalendarWrapper element is before $(document).ready(function() is getting called — Ashwin
– Ashwin, Commented May 22, 2012 at 10:16

Thach Mai · Accepted Answer · 2012-05-22 13:33:34Z

1

Since you're generating the HTML for the table directly, I'd suggest that you put the class="className" value directly into the HTML string rather than setting element class with code: http://jsfiddle.net/tNVGJ/

If you insist on setting the class with jQuery, could you try this and let me know how it turns out? http://jsfiddle.net/tNVGJ/1/

 setTimeout(function () {
          $('#Master').addClass('CalendarTable');
          $('#MasterDatesRow').addClass('DateHeader');
          $('#HeaderCell').addClass('Header');
 }, 1000);

answered May 22, 2012 at 13:33

Thach Mai

9551 gold badge6 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

JQUERY Css not being applied until after refresh of page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related