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>
<span class="message-data-time" ><?PHP echo $createDate ?></span>
</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;
}
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.
When you are requesting JSON from your server, it has not format (except for the JSON structure, of course) as JSON is not a human-readable format but nice for computers. To highlight your JSON you must use a JSON beautifier. If you just want to see your JSON pretty right now you can use tools such as JSONLint that will prettify your JSON.
If you want to do it problematically you must search for a "JSON Beautifier" framework (I do not know one right now). Or, if indention is enough, you can use basic JavaScript:
JSON.stringify(yourObject, null, '\t')
whereas the latter argument is a string of characters that are used for intention.
The second argument is a 'replacer' function that may be used to whitelist some properties. Please lookup the documentation of JSON.strinigfy.