1
這是我的第一個問題，我有一個用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