CODEWITHSUNDEEP
jquerycssajax
Dante
Dante

Reputation: 679

jQuery: Apply CSS on Ajax content

I like it that data gets called through jQuery ajax. Clean coding and it looks slick.

I'm wondering if the code below is the correct way to do this. It works (that's one thing), but i'm not sure if applying the css that way is the correct way :s.

I know some questions here apply to the same, but those questions are more specific to one problem. I want to know what is the best practice.

Thanks in advance!

$.ajax('db/getLatestAlbums.php').done(function(data) {
    //populate albums ul
    var items = [];
    obj = $.parseJSON(data.trim());
    $.each(obj, function(id, value) {
        items.push('<li data-category="' + value.category_name + '"><a href="#"><img alt="' + value.album_name + '" src="' + value.album_cover + '"></a><p><a href="#">' + value.album_name + '</a><span>' + value.category_name + '</span></li>');
    });
    $("ul#albums_list").html(items.join(''));
    $("ul#albums_list li").css({
        "background": "none repeat scroll 0 0 #252525",
        "border-radius": "3px 3px 3px 3px",
        "float": "left",
        "height": "300px",
        "margin": "10px 11px 10px 10px",
        "padding": "0",
        "width": "225px",
        "display": "inline-table"
    });
    $("ul#albums_list li a").css({
        "overflow": "hidden",
        "display": "block",
        "position": "relative"
    });
    $("ul#albums_list li a img").css({
        "display": "block",
        "position": "relative",
        "border-radius": "3px 3px 3px 3px",
        "height": "221px",
        "width": "221px",
        "margin": "2px",
        "border": "medium none"
    });
    $("ul#albums_list li p").css({
        "margin-top": "20px",
        "padding": "0 10px",
        "text-align": "center"
    })
});

Upvotes: 0

Views: 14820

Answers (3)

AbSoLution8
AbSoLution8

Reputation: 1213

Depends on what you are trying to achieve. IF you are just simply trying to apply styling to the newly loaded contents, then just like other comment says, simply put it in your css rules, it will automatically be applied when loaded.

However, if you would like to add logic to it, i.e. different css depending on what content is loaded, this will be one way to do it, but it will be better to define different classes in the css and simply use addClass() and removeClass().

Upvotes: 2

Amit Sharma
Amit Sharma

Reputation: 1212

Just move it to css file and the ajax content with the specific class names will be applied with the properties defined.

Upvotes: 2

Ven
Ven

Reputation: 19040

Any CSS will apply to the elements on the page, even if they were loaded through ajax. Just move it to your CSS file.

Upvotes: 4

Related Questions