Attempt to Dynamically Change CSS with Javascript Failed. Why?

Question

I made a simple bulletin board system with a PHP-based server-side program that generates JSON responses.

For the client's side I chose to dynamically generate all HTML codes using jQuery.

<body>
<ol class="list" id="viewList"></ol>

$(document).ready(function () {
  $.getJSON("list.php", function (json) {
    var nPosts = json.length;
    for (i = 0; i < nPosts; i++) {
        $('<ol/>', {
            class: "viewPost",
            id: "post" + i
        }).appendTo("#viewList");
        $('<li/>', {
            class: "viewAuthor",
            id: "author" + i,
            text: json[i].authorName
        }).appendTo("#post" + i);
        $('<li/>', {
            class: "viewEmail",
            id: "email" + i,
            text: json[i].authorEmail
        }).appendTo("#post" + i);
    }
  });
  //Problem HERE:    
  var post0 = document.getElementById("post0");
  post0['style']['border-top-width'] = '0px';
});

What I'm doing HERE is, to erase the dashed line, just for the first list item (li).

Tried both jQuery way ( $("#post0")... ) and Javascript way (above) but both didn't take effect.

.list {
    border-style: solid; border-width: 1px;
    width: auto;
    padding: 0px;
}
.viewPost {
    border-style: none;
    border-top-style: dashed; border-top-width: 1px;
    padding: 0px;
}

When the time has come to generate much HTML through javascript/AJAX, it would be wise to use a library like knockout.js to do data-binding/templating much more easily. — Laurent S.
– Laurent S., Commented Nov 22, 2013 at 13:44
I'm just curious of why $('post0').css(...) didn't take effect... — Jeffrey Goines
– Jeffrey Goines, Commented Nov 22, 2013 at 13:47
the property class its not supose to be like "class" ? curious — Ricardo Binns
– Ricardo Binns, Commented Nov 22, 2013 at 13:47

Saurabh Sinha · Accepted Answer · 2013-11-22 13:46:04Z

2

problem is that when the document is loaded those element is not generated so the jquery dont have any record that these element exist.

So to solve this problem you have to use delegate methods in jquery like

$(document).on('click',"class_or_id_which_is_created_runtime", function(e){
    //your code here 
    });

or you can add the javascript function at the time of creation of these elements

$('<ol/>', {
        class: "viewPost",
        id: "post" + i onClick=blah();
    }).appendTo("#viewList");

answered Nov 22, 2013 at 13:46

Saurabh Sinha

1,8104 gold badges30 silver badges56 bronze badges

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

3 Comments

Saurabh Sinha Over a year ago

please tick the answer if it helped you solving your problem ;)

Jeffrey Goines Over a year ago

Strange that typeof document.getElementById("post0")=="undefined" returns false. If the element were not generated, that typeof value would be undefined, wouldn't it?

Saurabh Sinha Over a year ago

I think it will return false, as consider case of JAVA as the object which doesnot exist and we try to operate some function call on it throws nullpointer exception similarly how can we do typof of element which doesnot exist..

Laurent S. · Accepted Answer · 2013-11-22 13:47:39Z

2

Instead of doing it this way (with javascript), you may want to have a look at CSS pseudo class :first-child :

ol li {
/*CSS properties for all elements here*/
}

ol li:first-child {
/* Specific CSS properties for the first element here */
}

Note : see also :last-child and nth-child() that could be of use to you Note 2 : be aware this is only supported from IE9...

answered Nov 22, 2013 at 13:47

Laurent S.

6,9373 gold badges32 silver badges42 bronze badges

1 Comment

Jeffrey Goines Over a year ago

Looks very productive. But what if I had two different lists and I want them to have two different styles? And that's because I named every element using id. I thought if I named them properly I could later have access to them, just like I wrote "post0." If I change the style of li, then it will take effect on both lists, right?

adeneo · Accepted Answer · 2013-11-22 13:56:22Z

1

Create the collection in memory, and just check if the index is 0, and add the appropriate styles in the loop, and append everything once it's built :

$(document).ready(function () {
    $.getJSON("list.php", function (json) {
        var elems = $([]);

        $.each(json, function (index, value) { // assuming it's an array
            var ol = $('<ol />', {
                'class' : 'viewPost',
                id      : 'post' + index
            }),
            li1 = $('<li />', {
                'class' : 'viewAuthor',
                id      : 'author' + index,
                text    : value.authorName
            }),
            li2 = $('<li />', {
                'class' : 'viewEmail',
                id      : 'email' + index,
                text    : value.authorEmail
            });

            if (index === 0) ol.css('border-top-width', '0px');

            elems = elems.add(ol.append(li1, li2))
        });

        elems.appendTo('#viewList');
    });
});

answered Nov 22, 2013 at 13:56

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

Jeffrey Goines Over a year ago

This is the only answer working fine for now but I couldn't figure out why.

Collectives™ on Stack Overflow

Attempt to Dynamically Change CSS with Javascript Failed. Why?

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related