问题描述
当我在没有 fullcalendar 的情况下编辑事件时,我在模态中创建了这两个单选按钮。
$('#calendar').fullCalendar({
defaultview: 'month',header: {
language: 'PT',left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay,listWeek',},defaultDate: dia,editable: true,eventLimit: true,// allow "more" link when too many events
selectable: true,selectHelper: true,events: [
<?PHP foreach($events as $event): ?>
{
id: '<?PHP echo $event['id']; ?>',title: '<?PHP echo $event['nome']; ?>',radio_one: '<?PHP echo ($event['contatou']=="Sim") ? "checked" : "" ; ?>',radio_two: '<?PHP echo ($event['contatou']=="Não") ? "checked" : "" ; ?>',<?PHP endforeach; ?>
]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="MoDaledit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="./updatevisitaLar1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">ALteraR VISITA</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="titlee" class="col-sm-4 control-label">NOME UTENTE</label>
<div class="col-sm-8">
<select name="titlee" class="form-control" id="titlee">
<option value=""></option>
<?PHP
$sql = "SELECT * FROM raddb.Utente WHERE ativo = '1' ORDER BY nome ASC";
$qr = MysqLi_query($conn,$sql);
while($ln = MysqLi_fetch_assoc($qr)){
echo '<option value="'.$ln['codigo'].'">'.$ln['nome'].'</option>';
}
?>
</select>
</div>
</div>
<div id="isolamento">
<div class="form-group">
<label for="switch_one" class="col-sm-4 control-label">CONTATOU VISITANTE</label>
<div class="switch-field">
<input type="radio" id="radio_one" name="switch_one" value="Sim" />
<label for="radio_one">SIM</label>
<input type="radio" id="radio_two" name="switch_one" value="Não" />
<label for="radio_two">NÃO</label>
</div>
</div>
<div class="form-group">
<label for="switch_two" class="col-sm-4 control-label">ALteraÇÂO DA VISITA</label>
<div class="switch-field">
<input type="radio" id="radio_three" name="switch_two" value="Alt" />
<label for="radio_three">ALteraÇÂO DE DATA</label>
<input type="radio" id="radio_four" name="switch_two" value="Canc" />
<label for="radio_four">CANCELOU VISITA</label>
</div>
</div>
</div>
<ul class="flex-outer">
<div class="form-check">
<label class="toggle">
<input type="checkBox" name="delete"> <span class="label-text text-danger"> ELIMINAR TAREFA</span>
</label>
</div>
</ul>
<input type="hidden" name="id" class="form-control" id="id">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
<button type="button" style="float: right" onclick="inserir_alter()" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>
当我返回数据库选项按钮的值时,我希望选择从数据库返回的值。要做到这一点,我是这样做的,正如我上面所说:
radio_one: '<?PHP echo ($event['contatou']=="Sim") ? "checked" : "" ; ?>',
但是它不起作用。 我打算让用户在modal中查询事件时,根据数据库返回的值出现选中的radio
我这样打开模态:
eventRender: function(event,element) {
element.bind('dblclick',function() {
console.log(event.cancelou);
$('#MoDaledit #id').val(event.id);
$('#MoDaledit #titlee').val(event.titlee);
$('#MoDaledit #response').val(event.response);
$('#MoDaledit #contacte').val(event.contacte);
$('#MoDaledit #title1e').val(event.title1);
$('#MoDaledit #contact1e').val(event.contact1);
$('#MoDaledit #start1').val(moment(event.start).format('YYYY-MM-DD HH:mm:ss'));
$('#MoDaledit #end1').val(moment(event.end).format('YYYY-MM-DD HH:mm:ss'));
$('#MoDaledit #DataRegisto').val(event.DataRegisto);
$('#MoDaledit #Colaborador').val(event.Colaborador);
$('#MoDaledit').modal('show');
});
解决方法
您没有使用在 fullCalendar 事件中设置的值来实际执行任何操作。并且拥有两个单独的 radio_one 和 radio_two 值也没有多大意义。
这是一种应该有效的方法:
events: [
<?php foreach($events as $event): ?>
{
id: '<?php echo $event['id']; ?>',title: '<?php echo $event['nome']; ?>',switch_one: '<?php echo $event['contatou']; ?>'
},<?php endforeach; ?>
]
和
$("input[name='switch_one'][value='" + event.switch_one + ']").prop("checked",true);
这将使用您字段中的实际值在单选按钮组中查找具有匹配值的单选按钮,并将其“已检查”属性设置为 true,从而使其被选中。该概念取自 this answer 中的示例。