AJAX load loses CSS - help

AJAX load loses CSS - help

I have page that has normal CSS that decorates buttons on page. I reload a section of the page via AJAX, but when it is loaded I lose my CSS reference and buttons turn to hyperlinks. Here is the code (note the comment of CSS appended):

  2. $(function() {
  3. var $div = $('.req_link');
  6. // this had to be inserted to decorate my buttons because
  7. // because when the ajax reloaded the CCS was ignored
  8. $('.req_link').button()
  9. .css({
  10. 'text-decoration' : 'none',
  11. 'background' : '#2C8586',
  12. 'color' : 'white',
  13. 'width' : '95px',
  14. 'font-size' : '0.7em'
  15. }).hover(function() {
  16. $(this).css({
  17. 'background' : '#2BA6CB',
  18. 'color' : 'white'
  19. });
  20. }).mouseleave(function() {
  21. $(this).css({
  22. 'background' : '#2C8586',
  23. 'color' : 'white'
  24. });
  25. });
  26. // end of insert
  29. $(".req_link").click(function() {
  30. if($("#tx_types").val() == '' ) {
  31. alert('You must select a Treatment Type first.');
  32. return false;
  33. }
  34. $availability_href = $(this).attr("href");
  35. $('#dialog').load($availability_href+"&js=1");
  36. $('#dialog').dialog("open");
  37. return false;
  38. });
  39. $("#dialog").dialog({
  40. title: 'Request Appointment',
  41. autoOpen: false,
  42. draggable: false,
  43. position: "center top+40 window",
  44. width: 400,
  45. resizable: false,
  46. modal: true,
  47. buttons: {
  48. Cancel: function() {
  49. $(this).dialog('close');
  50. },
  51. "Request Appointment": function() {
  52. $(".ui-dialog-buttonpane button:contains('Request Appointment')").button("disable");
  53. $.ajax({
  54. type: 'POST',
  55. url: 'ajax/rad_process.php?js=1',
  56. data: $('#dialog form').serialize(),
  57. cache: false,
  58. error: function(xml, status, error) {
  59. $('#dialog').html('<p><strong>Error Code:</strong> '+status+'</p><p><strong>Explanation:</strong> '+error+'</p>');
  60. },
  61. success: function(html) {
  62. var duration = $("#duration").val();
  63. $("#dialog").dialog('close');
  64. /*$("#conf_msg").html(html);*/
  65. $("#loading").html("<img src=\"/images/ajax-loader.gif\" height=\"14\">");
  66. $.ajax({
  67. type: 'POST',
  68. url: 'ajax/req_appt_success.php?js=1',
  69. data: $('#av_list_form').serialize(),
  70. cache: false,
  71. error: function(xml, status, error) {
  72. $("#loading").html("");
  73. $('.tblha').html('<tr><td colspan=\"8\"><p><strong>Error Code:</strong> '+status+'</p><p><strong>Explanation:</strong> '+error+'</p></td></tr>');
  74. },
  75. success: function(html) {
  76. $("#loading").html("");
  77. $(".tblha").html(html);
  79. if(duration == '') {
  80. var msg = '<font size="3"><br>Thank you for choosing the Teal Center!<br><br>We have a 24-hour Change/Cancellation Policy: If you need to change or cancel an appointments, please do so prior to 24 hours to avoid full charge.</font><br>';
  81. }else{
  82. var msg = '<font size="3"><br>Thank you for choosing the Teal Center!<br><br>The appointment you requested is longer or shorter than our default appointment time of 60 minute. Our staff is checking to see if we can adjust the times to accommodate your request. You will receive a follow up email.</font><br>';
  83. }
  85. $("<div>", {html:msg,
  86. title: 'SUCCESS: Your Appointment Was Sent To Our Staff'
  87. }).dialog(
  88. {
  89. draggable: false,
  90. position: "center top+40 window",
  91. width: 500,
  92. height: 375,
  93. resizable: false,
  94. modal: true,
  95. buttons: {
  96.     Close: function() {
  97. $( this ).dialog( "close" );
  98. }
  99.   }
  100. });
  101. }
  102. });
  103. $("#conf_msg").show();
  104. $(document).scrollTop( $("#conf_msg").offset().top );
  105. }
  106. });
  107. return false;
  108. }
  109. } 
  110. });


The style sheet include in my header is the following: 

<link rel="stylesheet" href="css/TC-style.css" type="text/css" />

Any help on this would be appreciated.