Добрый День форумчане!
Сразу скажу, что в скриптах почти не разбираюсь но все же)
Есть сайт на Modx revolution , к нему установил дополнение Онлайн консультант (не путать со фреймом со сторонних сайтов),
Работает он следующим образом:
Посетитель заходит в нужный раздел на сайте. Если он заходит первый раз — его просят представиться (только имя). После этого создается ресурс в дереве MODX в заранее указанном контейнере, куда пишется вся беседа.
Пользователь пишет вопросы, консультант — ответы. Каждый сидит на своем разделе сайта, страницу консультанта можно закрыть средствами самого MODX (назначит группу юзеров) или тупо по ip в настройках сниппета.
Переписка обновляется при отправке нового сообщения, или по таймауту, через каждые 15 секунд (можно изменить).
Если вы отправили сообщение — таймаут переставляется опять на 15 секунд. То есть, при активной беседе у вас все будет обновляться и без таймаута.
У консультанта, помимо переписки, обновляется еще и окно бесед. Появляются новые и переносятся наверх неактивные беседы, в которых посетитель что то написал.
Как сделать чтобы при создании новой беседы(или при получении сообшения) звучал звуковой или флеш файл на стороне консультанта?
работает это дело на jqury и form.jqury + страница приветствия и сама обработка:
$(document).ready(function() {
$('#wellcome input[type="text"]:first').focus();
$('#wellcome').submit(function() {
$(this).ajaxSubmit({
replaceTarget: true,
beforeSubmit: function() {
if ($('#wellcome input[name="name"]').val() == '') {
alert ('Напишите свое имя!');
$('#wellcome input[name="name"]').focus();
return false;
}
},
target: '#wellcome_box'
})
return false;
})
})
$(document).ready(function() {
refresh = setInterval(function() {
updateConversation()
}, time+'000'
)
$('#outgoing .input').focus();
Scroll('conversation');
$('#outgoing .input').keydown(function(event) {
if (event.which == 13 && !event.shiftKey ) {
$('#outgoing').submit();
return false;
}
});
$('#outgoing').live('submit', function() {
$(this).ajaxSubmit({
target: '#conversation',
success: function() {
$('#outgoing .input').val('');
Scroll('conversation');
clearInterval(refresh);
refresh = setInterval(function() {
updateConversation()
}, time+'000'
)
}
})
return false;
})
$('#conversation').ajaxStart(function() {
$(this).addClass('loading');
})
$('#conversation').ajaxStop(function() {
$(this).removeClass('loading');
})
$('#conversations li').live('click', function() {
$('#conversations li').removeClass('active');
$(this).removeClass('new').addClass('active');
var uid = $(this).data('uid');
$.post(url, {action: 'getConversation', uid: uid}, function(data) {
$('#conversation').html(data);
Scroll('conversation');
$('#outgoing .message').focus();
})
})
})
function Scroll(elem) {
height = document.getElementById(elem).scrollHeight;
$('#' + elem).animate({scrollTop: height + 'px'}, 1200);
}
function updateConversation() {
if ($('div').is('#conversations')) {
updateConversations();
}
$.post(url, {action: 'getMessages'}, function(data) {
if (data == false) {
document.location = document.location;
}
else {
$('#conversation').html(data);
Scroll('conversation');
}
})
}
function updateConversations() {
$.post(url, {action: 'getConversations'}, function(data) {
$('#conversations').html(data);
})
}
Страница консультанта:
<script type='text/javascript'>
url = '[[++site_url]][[~[[*id]]]]';
time = [[+refresh]];
$(document).ready(function() {
$('#conversations li:first').trigger('click');
})
</script>
<div id="[[+element]]">
<table>
<tr>
<td><div id="conversation">[[+conversation]]</div></td>
<td><div id="conversations"><ul>[[+conversations]]</ul></div></td>
</tr>
</table>
<div id="messages">
<form action="/[[~[[*id]]]]" method="post" id="outgoing">
<input type="hidden" name="action" value="submitMessage" />
<table>
<tr>
<td><textarea name="message" class="input"></textarea></td>
<td><input class="button" type="submit" value="Отправить" />
</td>
</tr>
</table>
</form>
</div>
</div>
Приветствие и Страница клиента:
<div id="wellcome_box">
<script type="text/javascript" src="[[+snippet_url]]js/wellcome.js"></script>
<h2>Для начала беседы, представьтесь, пожалуйста.</h2>
<form action="/[[~[[*id]]]]" method="post" id="wellcome">
<input type="hidden" name="action" value="createConversation" />
<div class="name">Ваше имя <span class="required">*</span></div>
<input type="text" name="name" value="" /><input type="submit" class="button" value="Отправить" />
</form>
</div>
<script type='text/javascript'>
url = '[[++site_url]][[~[[*id]]]]';
time = [[+refresh]];
</script>
<div id="[[+element]]">
<table>
<tr>
<td><div id="conversation">[[+conversation]]</div></td>
</tr>
</table>
<div id="messages">
<form action="/[[~[[*id]]]]" method="post" id="outgoing">
<input type="hidden" name="action" value="submitMessage" />
<table>
<tr>
<td><textarea name="message" class="input"></textarea></td>
<td><input class="button" type="submit" value="Отправить" /></td>
</tr>
</table>
</form>
</div>
</div>
Посмотреть в работе можно здесь:
http://ibooknet.ru/oconsultation/
http://ibooknet.ru/vopros-online/
Еще при первом входе на страницу вопросов набираем текст, отправляем… но сообщение уходит в никуда и поле очищается. при повторной отправке и в дальнейшем все идет нормально
Сборка jqury:
jquery-1.5.1.min.js
jQuery Form Plugin:
version: 2.67