#javascript #php #html #ajax
#javascript #php #HTML #ajax
Вопрос:
Я работаю над окном чата, и оно работает нормально, но когда мы вводим текстовое сообщение и отправляем его после отправки сообщения, оно не очищается автоматически. Оно останется там даже после публикации текста, нам нужно очистить его вручную.
Я попытался изменить некоторый код, но не смог решить проблему.
Код, который я использую в этом.
<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;
};
});
Я ожидаю, что текстовое поле будет очищено после того, как кто-то отправит сообщение, но фактически текст останется в текстовом поле даже после отправки сообщения.
Комментарии:
1. Как вы отправляете текстовое сообщение? используя AJAX или форму?
2. Отправьте полный код, пожалуйста
3. Я использую AJAX для отправки сообщений
4. Глупый вопрос: у вас много кода. Есть ли какая-либо часть этого кода, которая даже пытается обработать очистку?
Ответ №1:
Я предполагаю, что это $(".emoji-wysiwyg-editor") ваш элемент для вашего контента. поскольку это тот, который вы вызвали
var content = $(".emoji-wysiwyg-editor").html();
Попробуйте очистить этот элемент после успешного выполнения с помощью этого кода, поскольку здесь вы используете jquery.
$(".emoji-wysiwyg-editor").html('');
Ответ №2:
Просто добавьте эту строку в начало вашей функции 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.resu<
$('#pm-write').empty(); //Clean the textarea
//Other code
}
});
Ответ №3:
Используя 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("");
})
})