weixin_33749131 2016-06-26 13:13 采纳率: 0%
浏览 34

AJAX打印样式文字

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;
}
  • 写回答

2条回答 默认 最新

  • weixin_33701294 2016-06-26 13:15
    关注

    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.

    评论

报告相同问题？