Question

I am creating html dynamically using perl, mysql and JS/Jquery … the basic structure of the pages is created in a perl loop to print multiple repeating lines – the essence of which is:

print "<div id='eventList'>";
print-loop {
   <div class="eventRow">
      <div class="eventHiddenType">$typeid</div>
      <div class="colE1">$datestring</div>
      <div class="colE2">$venue</div>
      <div class="colE3">$title</div>
   </div>
}
print '</div>'

The $vars are correctly extracted from the DB at runtime.

$typeid which is stored in a hidden div is for later use in the JS (see below)

The CSS is:

#eventList { width:900px; height: 454px; overflow-x:hidden; overflow-y:scroll; }
.eventRow { overflow: auto; height: 58px; }
.eventHiddenType { float:left; display:none; padding: 0px; margin: 0px; }  
.colE1 { float: left; width: 165px; color: #000; }
.colE2 { float: left; width: 290px; color: #000; }
.colE3 { float: left; width: 395px; color: #000; }

.EvDiv0 { background-color: #000000 !important; }   // Type 1
.EvDiv1 { background-color: #C6FFED !important; }   // Type 2
.EvDiv2 { background-color: #B3CCFF !important; }   // Type 3
.EvDiv3 { background-color: #DAB0FF !important; }   // Type 4

The html is written by calling perl from Jquery via $.ajax (with async: false)

I then stripe the rows with :

$(".eventRow:even").css('background-color', '#f3f3f3'); 

… which works as it should.

The problem lies in me attempting to then change the background color of the first cell in each row with .addClass() according to the value stored in hidden div with class of .eventHiddenType with:

$('.eventRow').each( function() {
   var hid = 'EvDiv' + $(this).children('.eventHiddenType').text();  
   $(this).children('.colE1').addClass(hid);
});

The source is correctly changed to

<div class="colE1 EvDiv3">blah blah blah</div>

… for every row … ie with the correct “EvDivX” class added (according to X = hidden type)

But the background isn’t rendered as such in the browser – it’s just as it was with the stripe all the way across.

I even tried adding a ‘!important’ to the class thinking it would force it through but it didn’t …

I know there are several other ways to achieve the effect I want but I can’t see why this one doesn’t work.

See it in action: http://jsfiddle.net/Upland/2KBPU/1/

Any ideas?

Answer 1

The problem is that you have invalid comment tags in your CSS, and that’s causing the CSS interpretation problem. // is not valid but /* ... */ is. And as I noted in my comment above, you’re also generating a class, EvDiv4, which doesn’t seem to be defined.

Updated jsFiddle example.