Текстовое сообщение не удаляется даже после отправки текста в чате

Question

Я работаю над окном чата, и оно работает нормально, но когда мы вводим текстовое сообщение и отправляем его после отправки сообщения, оно не очищается автоматически.Он останется там даже после публикации текста, нам нужно очистить его вручную.

Я пытался изменить какой-то код, но не смог решить проблему.

Код, который я использую в этом.

    <div class="row">
        <div class="pull-left">
            <h3><?php echo sprintf($this->lang->line("conv_with"), $user["username"]); ?></h3>
        </div>
    </div>

    <div class="row">
        <div class="main_container clearfix">
            <div class="ibox-content-no-bg">
                <div class="chat-discussion">
                    <?php
                    $last_conv = $last_conv->result_array();
                    $last_conv = array_reverse($last_conv);
                    foreach($last_conv as $message):
                    $activity_thumb = $message["thumb_url"];

                    if($message["thumb_url"] == "" || $message["photostatus"] == 0) {
                        $activity_thumb = base_url() . "images/avatar.png";
                    }
                    ?>

                    <?php
                    if($message["user_id"] == $this->session->userdata("user_id"))
                        $align_message = "left";
                    else
                        $align_message = "right";
                    ?>

                    <div class="chat-message clearfix <?php echo $align_message; ?>" data-id="<?php echo $message["id"]; ?>">
                        <?php
                        if($message["gender"] == 0) {
                            $gender_user_color = "male_color";
                        } else {
                            $gender_user_color = "female_color";
                        }
                        ?>
                        <a class="nailthumb-msg-container" href="<?php echo base_url("user/profile/".$message["user_id"]) ?>"><img width="62" alt="" src="<?php echo $activity_thumb; ?>" class="message-avatar"></a>
                         <div class="message">
                            <a class="message-author <?php echo $gender_user_color; ?>" href="<?php echo base_url("user/profile/".$message["user_id"]) ?>"><?php echo $message["username"] ?></a>
                            <span class="message-date text-muted pm-date" title="<?php echo $message["date"]; ?>Z"></span>

                            <span class="message-content">
                                <?php echo $message["content"]; ?>
                            </span>
                            <span class="message-date-mob text-muted pm-date" title="<?php echo $message["date"]; ?>Z"></span>

                        </div>      
                    </div>
                    <?php
                    endforeach;
                    ?>
                </div>

                <div class="chat-message-form">
                    <div class="form-group">
                        <p class="lead emoji-picker-container">
                        <textarea id="pm-write" class="form-control message-input pm-write-answer-textarea" placeholder="<?php echo $this->lang->line("enter_message_here_placeholder"); ?>" name="message"  data-emojiable="true"></textarea> 
                        </p>
                    </div>
                    <div class="btn-reply-placeholder">
                        <a class="btn btn-primary btn-send-reply" href="#" data-user-id="<?php echo $user["uid"]; ?>" data-conv-id="<?php echo $current_conv->id; ?>"><?php echo $this->lang->line("send_reply_btn"); ?></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

AJAX

$(document).ready(function() {
    $('.nailthumb-msg-container').nailthumb();
    $(".pm-date").timeago();
    $(".message").emoticonize();

    $(".chat-discussion").scrollTop(100000);

    window.setInterval(function(){
        var last_message_id = $(".chat-message:last").attr("data-id");

        // Live refresh
        $.ajax({
            url: base_url + "pm/refresh_conv",
            type: 'POST',
            data: {conv_id : conv_id, last_message_id: last_message_id},
            success: function(data) {

                $.each(data.last_messages, function(i, item) {
                    var message = item;

                    var avatar = "";

                    if(message.thumb_url == null || message.photostatus == 0) {
                        avatar = base_url + "images/avatar.png";
                    } else {
                        avatar = base_url + message.thumb_url;
                    }

                    if(message.gender == 0) {
                        var gender_user_color = "male_color";
                    } else {
                        var gender_user_color = "female_color";
                    }

                    if(message.user_id == user_id) {
                        var msg_dir = "left";
                    } else {
                        var msg_dir = "right";
                    }

                    var block_msg = '<div class="chat-message ' + msg_dir + '" data-id="' + message.mid + '">';
                    block_msg += '<a class="nailthumb-msg-container" href="' + base_url + 'user/profile/' + message.user_id + '"><img width="62" alt="" src="' + avatar + '" class="message-avatar" /></a>';
                    block_msg += '<div class="message">';
                    block_msg += '<a class="message-author ' + gender_user_color + '" href="' + base_url + 'user/profile/' + message.user_id + '">' + message.username + '</a>';
                    block_msg += '<span class="message-date text-muted pm-date" title="' + message.date + 'Z"></span>';
                    block_msg += '<span class="message-content">';
                    block_msg += message.content;
                    block_msg += '</span>';
                    block_msg += '</div>';
                    block_msg += '</div>';


                    $(".chat-message").last().after(block_msg);
                    $('.nailthumb-msg-container').nailthumb();
                    $(".pm-date").timeago();
                    $(".message").emoticonize();

                    $(".chat-discussion").scrollTop(100000);

                });
            }
        });
    }, 2000);

    $(".btn-send-reply").click(function(e) {
        e.preventDefault();

     $(':input[name="pmwrite"]').val(null);


        var conv_id = $(this).attr("data-conv-id");
        var user_id = $(this).attr("data-user-id");
        var content = $(".emoji-wysiwyg-editor").html();

        $(this).html('<i class="fa fa-circle-o-notch fa-spin"></i>');
        $(this).addClass("disabled");

        var that = $(this);


        $.ajax({
            url: base_url + "pm/send_reply",
            type: 'POST',
            data: {conv_id : conv_id, content: content, user_id : user_id},
            success: function(data) {
                var res = data.result;

                if(res == 999) {
                    alert(not_logged_in_str);

                    that.html(send_reply_str);
                    that.removeClass("disabled");
                } else if(res == 998) {
                    alert(write_something_str);

                    that.html(send_reply_str);
                    that.removeClass("disabled");
                } else if(res == 500) {
                    alert(cant_demo_mode_str);

                    that.html(send_reply_str);
                    that.removeClass("disabled");
                } else if(res == 997) {
                    alert(conv_not_exist_str);

                    that.html(send_reply_str);
                    that.removeClass("disabled");
                } else if(res == 996) {
                    alert(user_blocked_you_str);

                    that.html(send_reply_str);
                    that.removeClass("disabled");
                } else {                                        
                    var avatar = "";

                    if(data.user.thumb_url == null || data.user.photostatus == 0) {
                        avatar = base_url + "images/avatar.png";
                    } else {
                        avatar = base_url + data.user.thumb_url;
                    }

                    $(".pm-write-answer-textarea").val("");

                    if(data.user["gender"] == 0) {
                        var gender_user_color = "male_color";
                    } else {
                        var gender_user_color = "female_color";
                    }

                    $('.nailthumb-msg-container').nailthumb();
                    $(".pm-date").timeago();

                    that.html(send_reply_str);
                    that.removeClass("disabled");

                    $(".chat-discussion").scrollTop(100000);

                }
            }
        });
    });

    String.prototype.replaceArray = function(find, replace) {
      var replaceString = this;
      for (var i = 0; i < find.length; i++) {
        replaceString = replaceString.replace(find[i], replace[i]);
      }
      return replaceString;
    };
});

Я ожидаю, что текстовая область будет очищена после того, как кто-то отправит сообщение, но на самом деле текст останется в текстовой области даже после отправки сообщения.

Answer 1

Я предполагаю, что это $(".emoji-wysiwyg-editor") является вашим элементом для вашего контента. так как это тот, кого вы назвали в

var content = $(".emoji-wysiwyg-editor").html();

Попробуйте очистить этот элемент после успеха, используя этот код, так как здесь вы используете jquery.

$(".emoji-wysiwyg-editor").html('');

Answer 2

Используя javascript, вы можете легко добиться этого, установив прослушиватель событий в текстовой области, например,

document.addEventListener("DOMContentLoaded", function() {
    var submitBtn = document.getElementsByClassName("btn-send-reply")[0];  
    submitBtn.addEventListener("click", function(){
        document.getElementsByName("message")[0].value = "";
    });
});

или в jQuery

$(document).ready(function(){
    $('.btn-send-reply').click(function(){
        $( "input[name*='message']" ).val("");
    })
})

Answer 3

Просто добавьте эту строку в начале вашей функции AJAX success ()

$('#pm-write').empty();

Использование чистого Javascript

document.getElementById('pm-write').innerHTML = "";

Это будет выглядеть так

 $.ajax({
       url: base_url + "pm/send_reply",
       type: 'POST',
       data: {conv_id : conv_id, content: content, user_id : user_id},
       success: function(data) {
            var res = data.result;

            $('#pm-write').empty(); //Clean the textarea
            //Other code
       }
});