How to apply CSS styling to dynamically generated list (within mCustomScrollbar container)?


Tags: jquery,css,list,getjson,mcustomscrollbar

Problem :

I'm dynamically generating a list from a MongoDB database using getJSON().

The HTML being generated is correct and the related CSS styles are also correct.

The <li>'s should have images as backgrounds, but they aren't being applied.

In Firebug, I hover over the image background URL for each <li> and the image is previewed so I can tell the path is correct, they are just not being displayed.

The solutions I have come across involve using listview('refresh') but that seems to be a jQuery Mobile solution and I am just using standard jQuery.

Another solution I have seen is to use addClass() to an element after the function has run, but the element already has the correct class applied in the HTML, the style is just not being displayed.

Is there a 'standard' way of re-applying CSS after a function has run, or another approach to ensure that CSS is applied to a dynamically generated list?

HTML

<ul class="my_ul_class"></ul>

jQuery (external js file)

$(document).ready(function() {
    loadListItems();
});

function loadListItems() {
    var href= "/url";
    $.getJSON("/path_to_python_script", {cid: href, format: 'json'}, function(results){
        $.each(results.my_key, function(k,v) {
            $("ul.my_ul_class").append("<li data-thing1=\"" + v + "\" class=\"prefix_" + v + "\"><ul class=\"nested\"><li class=\"hidden_li\"><p class=\"my_p_class\">text</p></li></ul></li>");
        });
    })
}

Generated HTML

<li class="prefix_1" data-thing1="1"><ul class="nested"><li class="hidden_li"><p class="my_p_class">text</p></li></ul></li>


Solution :

Solution

The solution involved modifying the placement of the mCustomScrollbar function which was applied to the div container of the <ul>.

jQuery (external js file)

// wrap mCustomScrollbar in a custom function
function listScrollbar() {
$("#my_ul_container").mCustomScrollbar({
horizontalScroll:true,
set_width: false,
set_height: false,
scrollInertia:550,
advanced:{
updateOnBrowserResize:true,
updateOnContentResize:true,
autoExpandHorizontalScroll:false,
autoScrollOnFocus:true
}
})
}

// dynamically generate <li>'s
function loadListItems() {
var href= "/url";
$.getJSON("/path_to_python_script", {cid: href, format: 'json'}, function(results){
$.each(results.my_key, function(k,v) {
$("ul.my_ul_class").append("<li data-thing1=\"" + v + "\" class=\"prefix_" + v + "\"><ul class=\"nested\"><li class=\"hidden_li\"><p class=\"my_p_class\">text</p></li></ul></li>");
});
// call the mCustomScrollbar function
listScrollbar()
})
}

// call loadListItems
$(document).ready(function() {
loadListItems();
});

    CSS Howto..

    How to write a:hover in inline CSS?

    ng-bind-html adds owns css class 'ng-binding' which brokes all nested css, how get rid of it?

    How to override facebook share button css

    How to increase rotate value

    Infuriating gap: How do you get rid of a gap between IMG and surrounding content

    How to show/hide content on click with CSS

    How to make a dropdown float with CSS

    CSS: How to select first element in each row?

    How do I wrap a overflowed span in fixed div

    Rails: Stylesheet/view issue? Nothing is showing on the screen although there is source code when viewed in browser

    How to align lists to top right?

    How to include this basic html (CSS, JavaScript) template into a php file?

    how to make a div stay in a div

    How to make an image hover over another?

    How to add checkmarks and x's when validating in angularjs?

    How to override line-height and height css properties that are adding from external css using inline css?

    Conditional css showing limit items

    How to dynamically change the value of a CSS property inside a stylesheet?

    How to vertically align image in a td cell, without vertically-align

    How to display css multiple columns with dynamic height

    How to fit whole image in to div which have his dimensions

    How to write CSS code without using :not selector?

    How to apply information submitted in Code Mirror? [closed]

    How to position the arrow of this widget correctly?

    make the div (in css) to grow bottom-up? how?

    How to use imported css styles in GWT correctly

    How to remove the effect of all the parent containers on any child control

    How to create a dotted shadowy effect on an image with CSS?

    How to explain using browser.sleep in protractor

    How to get the current browser resolution in css?