update css on AJAX loaded html

Question

I am loading in HTML from AJAX using JQuery. I am then triggering a click event on certain elements within the newly loaded HTML.

I am having a problem with setting the css on the newly loaded elements.

Here is the code...

function updateScreen(year, month) {
  $.ajax({
    url:'ajax_php/get_year_data.php',
    data: 'year=any',
    type: 'post',
    success: function(data) {
      $('.top-container').html(data);    

      // highlight year
      $("#" + year).click();

      // and month 
      $("#" + year + ' .' + month).click(); 

      $("#" + year + ' .' + month).css('background-color', convertHex('#9FC7F5', 20))
      console.log($("#" + year + ' .' + month).css('background-color'));
    } 
  });  
}

The console.log returns what I expect to see but the screen does not show the change in background color.

Can anyone tell me why?

cheers, George

Answer 1

Why are you doing a POST on a get_year_data.php?
Since it's a getter request, it would be more RESTful to do a GET.
You could try this, as it uses the more up-to-date syntax:

function updateScreen(year, month) {
  $.ajax({
    type: 'POST',
    url: '/ajax_php/get_year_data.php',
    data: {year: 'any'}
  }).done(function(data) {
    $('.top-container').html(data);
    $('#'+year+' .'+month).css('background_color', 'blue');
  });
}        

and update the backend accordingly.

Answer 2

You are missing the semicolon off of the end of the line

$("#" + year + ' .' + month).css('background-color', convertHex('#9FC7F5', 20))

You should also look into properly formatting your code - I edited it up in the OP to show what changes should be made to your formatting.