这是我的第一个问题,我有一个用Java和JavaScript/jQuery客户端制作的WebSocket服务器,服务器工作的很好,它发送JSON对象到客户端,客户端接收与它应该追加option
到第二select
与JSON对象的值,这里的JSP的代码:(JQUERY) - 通过WebSocket返回一个JSON对象并应用到select不起作用
<form method="POST" action="#" id="formAgendamento">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Dias Disponíveis</label>
<select name="dataagendamento" class="selectpicker" data-title="Escolha o dia" data-style="btn-default btn-block" data-menu-style="dropdown-blue">
<c:forEach var="dia" items="${dias}">
<option value="${dia.idDia}"><fmt:formatDate value="${dia.dataDia}" pattern="dd/MM/yyyy"/></option>
</c:forEach>
</select>
</div>
<div class="form-group">
<label>Horários Disponíveis</label>
<select name="horaagendamento" class="selectpicker" data-title="Escolha um horário" data-style="btn-default btn-block" data-menu-style="dropdown-blue" disabled>
</select>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-danger btn-fill btn-wd">Agendar</button>
<div id="log"></div> <!-- This is to see if WebSocket is working -->
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
// WebSocket here
if (!("WebSocket" in window)) {
sweetAlert('Oops, este navegador não suporta WebSocket!', '', 'warning');
} else {
connect();
function connect() {
var socket;
var host = "ws://${pageContext.request.serverName}:${pageContext.request.localPort}${pageContext.request.contextPath}/atualizahorario";
try {
var socket = new WebSocket(host);
message('<p class="event">Socket status: ' + socket.readyState + '</p>');
socket.onopen = function() {
message('<p class="event">Socket status: ' + socket.readyState + ' (Opened)</p>');
};
socket.onmessage = function (msg) {
//message('<p class="text-success">' + msg.data + '</p>');
criarSelectHorarios(converterEmObjeto(msg.data));
};
socket.onclose = function() {
message('<p class="event">Socket Status: ' + socket.readyState + ' (Closed)');
};
} catch (exception) {
message('<p class="text-danger">Erro: ' + exception + '</p>');
}
function message(msg) {
$('#log').append(msg + '<br/>');
}
function desconectar() {
socket.close();
}
function enviarAoServer(texto) {
socket.send(texto);
}
function converterEmObjeto(jsonObject) {
var DiaHorario = JSON.parse(jsonObject);
return DiaHorario;
}
function criarSelectHorarios(DiaHorario) {
var codigo = "";
for (var i = 0; i < DiaHorario.length; i++) {
var idHorario = DiaHorario[i].horario.idHorario;
var horarioInicioTermino = DiaHorario[i].horario.horarioInicioTermino;
codigo += '<option value="' + idHorario + '">' + horarioInicioTermino + '</option>';
}
$('.form-group .bootstrap-select').removeClass('disabled');
$('.form-group .bootstrap-select button').removeClass('disabled');
$('select[name="horaagendamento"]').removeAttr('disabled').append(codigo);
$('.selectpicker').selectpicker();
}
$('select[name="dataagendamento"]').change(function() {
enviarAoServer($(this).val());
});
}
}
});
</script>
当用户选择来自第一select
日期(这是从Servlet加载),第二个select
丢失它disabled
状态,但选项不被追加,这里是客户端收到的JSON:
[
{
"dia":{
"idDia":2,
"dataDia":"May 22, 2017 12:00:00 AM"
},
"horario":{
"idHorario":1,
"horarioInicioTermino":"08:00-08:30"
}
},
{
"dia":{
"idDia":2,
"dataDia":"May 22, 2017 12:00:00 AM"
},
"horario":{
"idHorario":2,
"horarioInicioTermino":"08:30-09:00"
}
}
]
更新:我意识到option
被追加,但他们中没有显示点击事件,可能是一些自举了。
解决:此代码:
$('select[name="horaagendamento"]').removeAttr('disabled').append(codigo);
$('.selectpicker').selectpicker();
改为:
$('select[name="horaagendamento"]').removeAttr('disabled').html(codigo);
$('select[name="horaagendamento"]').selectpicker();
Aparently引导周围产生选择divs
之类的东西,所以第一选项被替换,而不是追加,并且第二个selectpicker()
方法必须在选项已完成后手动调用。
所有功能都在代码中。 – DarkCeptor44
哇,抱歉老兄 - 我发誓这些功能不在那里!一定是在我的最后 –
任何控制台错误矩阵故障? – madalinivascu