Цитата:
|
Это не решит мою проблему
|
Мне нужно сделать чтоб по кнопке send не отправлялись пустые сообщения
|
вот код где они отправляются
var getMessageText, sendMessage, Message;
Message = function (arg) {
this.text = arg.text, this.message_side = arg.message_side;
this.draw = function (_this) {
return function () {
var $message;
var json = JSON.parse(_this.text);
alertChat();
return createMessage(json.text, json.name, json.photo, _this.message_side);
};
}(this);
return this;
};
getMessageText = function () {
var $message_input;
$message_input = $('.message_input');
return $message_input.val();
};
sendMessage = function (text, message_side) {
var $messages, message;
if (text.trim() === '') {
return;
}
$messages = $('.messages');
message = new Message({
text: text,
message_side: message_side
});
message.draw();
return $messages.animate({scrollTop: $messages.prop('scrollHeight')}, 300);
};
function createMessage(text, name, photo, message_side){
$message = $($('.message_template').clone().html());
if(message_side==="left"){
$message.find('.text_wrapper').removeClass("pull-left").addClass("pull-right");
$message.find('.text_wrapper').removeClass("alert-info").addClass("alert-warning");
$message.find('.name').removeClass("label-info").addClass("label-warning");
$message.find('.avatar').removeClass("pull-right").addClass("pull-left");
}
$message.find('.text').html(text);
$message.find('.name').html(name);
$message.find('.photo').attr('src', photo);
$('.messages').append($message);
$message.addClass('appeared');
}
а вот где кнопка не активна если в поле ввода нет сообщения
(function () {
var Message;
Message = function (arg) {
this.text = arg.text, this.message_side = arg.message_side;
this.draw = function (_this) {
return function () {
var $message;
$message = $($('.message_template').clone().html());
$message.addClass(_this.message_side).find('.text').html(_this.text);
$('.messages').append($message);
return setTimeout(function () {
return $message.addClass('appeared');
}, 0);
};
}(this);
return this;
};
$(function () {
var getMessageText, message_side, sendMessage;
message_side = 'right';
getMessageText = function () {
var $message_input;
$message_input = $('.message_input');
return $message_input.val();
};
sendMessage = function (text) {
var $messages, message;
if (text.trim() === '') {
return;
}
$('.message_input').val('');
$messages = $('.messages');
message_side = message_side === 'left' ? 'right' : 'left';
message = new Message({
text: text,
message_side: message_side
});
message.draw();
return $messages.animate({ scrollTop: $messages.prop('scrollHeight') }, 300);
};
$('.send_message').click(function (e) {
return sendMessage(getMessageText());
});
$('.message_input').keyup(function (e) {
if (e.which === 13) {
return sendMessage(getMessageText());
}
});
sendMessage('Hello ! :)');
});
}.call(this));
что мне из одного кода в другой вставить ? |
Не пониманию что куда все перепробовал
|
Не понятно каким образом кнопка становится недоступной, если только не скрывается посредством класса, а вообще для этого достаточно менять ее свойство disabled - true/false.
Сделайте вывод в консоль в контрольных точках, то есть значения аргументов функции, что они возвращают, найдете место конфликтное. |
Цитата:
teplov, у вас в коде никуда ничего не отправляется. Я вам уже писал, чтобы пустое сообщение не отправлялось, используйте атрибут required. В примере показано, как происходит отправка формы при помощи функции postChatMessage. Это единственный способ отправки. В функции проверяется, что сообщение было не пустым. Затем оно может быть оправлено. Здесь на самом деле возможно много вариантов и вариант, предложенный laimas (и который я закомментировал в коде), в котором блокируется кнопка, пока отправляется сообщение, является менее дружелюбным к пользователю.
<form action="" class="chat" method="post" onsubmit="postChatMessage(event);">
<img src="https://picsum.photos/id/129/491/325">
<input name="message" placeholder="Add a public reply..." required autocomplete="off">
<button>Send</button>
</form>
<script>
function disableForm(form, disabled = true) {
for(const node of document.querySelectorAll("input, select, button"))
node.disabled = disabled;
}
function postChatMessage(event) {
event.preventDefault();
const form = event.target;
const input = form.querySelector("input[name=message]");
const message = input.value.trim();
if(message === "") return;
alert(`Будет отправлено: ${message}`);
// disableForm(form);
// fetch(form.action, {
// method: form.method,
// body: `message=${encodeURIComponent(message)}`
// })
// .then(response => response.json())
// .then(data => {
// if(data.ok) {
// // только когда действительно сообщение было отправлено,
// // только тогда очищаем поле ввода
// input.value = "";
// } else {
// throw new Error("Ошибка обработки сообщения на сервере");
// }
// })
// .catch(error => {
// // произошла ошибка, поле не очищаем
// // можно вывести диалог, что сообщение не было отправлено
// })
// .then(() => disableForm(form, false))
// ;
}
</script>
<style>
@import url('https://fonts.googleapis.com/css?family=Material+Icons');
html {
background: gainsboro;
}
body {
margin: 0;
}
.chat {
background: white;
display: flex;
align-items: center;
padding: 10px;
transition: 300ms;
}
.chat:focus-within {
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
}
.chat img {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
margin-right: -55px;
margin-left: 5px;
z-index: 1;
transition: 300ms;
transform: scale(0.8);
}
.chat:not(:focus-within) img {
transform: scale(0.6);
}
.chat input[name="message"] {
flex: 1;
padding: 0px 60px;
height: 60px;
border: 0;
border-radius: 3px;
box-shadow: 0;
outline: none;
transition: 300ms;
}
.chat:focus-within input[name="message"] {
box-shadow: 0 3px 8px -2px;
}
.chat button {
border: 0;
background: none;
width: 50px;
height: 50px;
margin-left: -55px;
margin-right: 5px;
display: none;
text-transform: lowercase;
font: 2em "Material Icons";
color: #2196F3;
}
.chat input[name="message"]:valid ~ button {
display: block;
}
</style>
Вы можете эту идею взять за основу. А насчёт отправки, то не нужно ничего блокировать, как это предлагает laimas, достаточно сразу опубликовать сообщение в чате (а значит его нужно удалить из поля ввода), и уже в дальнейшем на самом сообщении будет указываться статус («Отправка...», «Доставлено», «Прочитано», «Не удалось отправить»), и, например, в случае, когда не удалось отправить сообщение, поскольку у вас была отключена сеть, на самом сообщении будет указан статус («Не удалось отправить»), и предоставлена на сообщении кнопка «Отправить заново». |
Цитата:
Цитата:
|
Цитата:
Цитата:
Цитата:
|
Цитата:
Если на это наплевать и заняться только "красивой стороной" вопроса, то грош цена всей вашей красоте. А вообще же активную/неактивную кнопку можно разукрасить как угодно, для этого есть :enabled/:disabled. |
| Часовой пояс GMT +3, время: 02:31. |