php - AJAX print text with style

Question

I'm using AJAX in order to create chat.

when I reload the replies the texts printed without the css style.

how can I print text with ajax that will include the style?

Thanks

$(document).on('submit','#addReply',function(e) {       

    var text = $('#addReply textarea[name=text]').val();
    var chatID =  $("#addReply button").attr("data-ref");
    var lastRefreshReplies = $('#lastRefreshReplies').val();

    var data =  "chatID="+ chatID + "&text=" +text + "&lastRefreshReplies=" +lastRefreshReplies;
    var data = data + "&act=addReply";

     $.ajax({
        type: "POST",
        url: "ajax/chatsAjax.php",
        data: data,
        cache: false,
        success: function(res){
            if (res != "0")
            {
                $( "#replyRow" ).after(res);

            }

       }
     });

    e.preventDefault();
    return false;   

});

chatsAJAX.php file

$msgs = add_chat_reply ($_POST, $msgs);
if (empty($msgs['error']))
{
    // print previous reply + the newest reply
    refresh_replies ($_POST['chatID'], $_POST['lastRefreshReplies']);
}

FUNC - refresh replies

function refresh_replies ($chatID, $lastRefreshReplies)
{

    $sql = "SELECT * 
            FROM `chats_replies` 
            WHERE (chatID = ".$_POST['chatID'].") AND
                    (createDate > '".$_POST['lastRefreshReplies']."')

    $mainQuery = mysql_query($sql);     
    while($mainIndex = mysql_fetch_array($mainQuery))
    {
        $userName = convert_id_2_value ("users", "name", $mainIndex['userID']);

        $sysName = convert_id_2_value ("users", "name", $mainIndex['system']);  
        $createDate = date('d-m-Y H:i:s', strtotime($mainIndex['createDate']));

        ?>
        <li class="clear">
            <div class="message-data <?PHP echo $msgAlign?> ">
                <span class="message-data-name  <?PHP echo $msgFloat ?>" ><?PHP echo $userName ?> </span> &nbsp; &nbsp;
                <span class="message-data-time" ><?PHP echo $createDate ?></span> &nbsp; &nbsp;
            </div>
        </li>           
        <?PHP

    }   
}

CSS:

.chatReplies .chat-dialog {
  padding: 30px 30px 20px;
  border-bottom: 2px solid white;
}
.chatReplies .chat-dialog .message-data {
  margin-bottom: 15px;
}
.chatReplies .chat-dialog .message-data-time {
  color: #a8aab1;
  padding-left: 6px;
}
.chatReplies .chat-dialog .message {
  color: white;
  padding: 18px 20px;
  line-height: 26px;
  font-size: 16px;
  border-radius: 7px;
  margin-bottom: 30px;
  width: 90%;
  position: relative;
}
.chatReplies .chat-dialog .message:after {
  bottom: 100%;
  left: 7%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: #86BB71;
  border-width: 10px;
  margin-left: -10px;
}
.chatReplies .chat-dialog .my-message {
  background: #86BB71;
}
.chatReplies .chat-dialog .other-message {
  background: #94C2ED;
}

Answer 1

You could for example do it like this:

    $.ajax({
        url: "ajax/items.php",
        type: "POST",
        data: data,
        success: function(response){
            $(".result").html(response);
        }
    }); 

But you have to give some more details if it has to be adjusted more to your needs.

In this example your results will be written to the class result. You can add css to this class and it will be applied as soon as the ajax data is loaded.