1
I would like a help with this code:
I am sending information from a table for modal and this table will have data of the groups separated by comma and I would like it to be selected in the modal in Multiselect that neither the example of low that is users. The bottom Multiselect works perfectly but I do not know how to do in this first model.
Template was taken from this site http://loudev.com/
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://loudev.com/css/multi-select.css"/>
<script src="https://loudev.com/js/jquery.multi-select.js"></script>
</head>
<body>
<div class="row justify-content-center">
<div class="col-md-6 col-sm-12">
<table class="table">
<thead class="thead-dark">
<tr class="text-center">
<th class="d-none"></th>
<th>Página</th>
<th>Cód. Página</th>
<th>Tipo</th>
<th>Grupos</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="d-none">
<input type="radio" id="customRadio" name="customRadio" data-envia-id="1" data-envia-pagina="Nome Exemplo" data-envia-codpagina="Situação Exemplo" data-envia-tipo="Pagina" data-envia-grupo="Suporte, Comercial" data-envia-usuarios="usuario1, usuario2" data-envia-observacao="Observacao Exemplo">
</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">1</th>
<td class="d-none">
<input type="radio" id="customRadio" name="customRadio" data-envia-id="1" data-envia-pagina="Nome Exemplo" data-envia-codpagina="Situação Exemplo" data-envia-tipo="22" data-envia-grupo="Suporte, Comercial" data-envia-observacao="Observacao Exemplo">
</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /Modal para cadastro de contratos -->
<div class="modal fade" id="Modal-Editar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel"> Realizar Alterações</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="teste.php">
<div class="modal-body">
<div class="row justify-content-center">
<div class="col-md-9 col-sm-12 form-group has-feedback">
<input type="text" name="pagina" id="RecebPagina" class="form-control has-feedback-left" placeholder="Nome da Página" required>
<span class="fa fa-check-square-o form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-10 col-sm-12 form-group has-feedback">
<select id="RecebGrupo" class="custom-select text-center" multiple>
<option></option>
<option value="Suporte">Suporte</option>
<option value="Comercial">Comercial</option>
<option value="Agenda">Agenda</option>
<option value="Financeiro">Financeiro</option>
</select>
</div>
<div class="col-md-12 col-sm-12 form-group has-feedback">
<select id="RecebUsuarios2" class="custom-select" multiple>
<option></option>
<option value="usuario1">usuario1</option>
<option value="usuario2">usuario2</option>
<option value="usuario3">usuario3</option>
<option value="usuario3">usuario3</option>
</select>
</div>
</div>
</div>
<div class="modal-footer text-center">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
<button type="submit" class="btn btn-primary" name='btnValue' value='btnEdiPermissoes'>Editar</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$('.modal-content').resizable({
//alsoResize: ".modal-dialog",
minHeight: 300,
minWidth: 300
});
$('.modal-dialog').draggable();
$('#myModal').on('show.bs.modal', function() {
$(this).find('.modal-body').css({
'max-height': '100%'
});
});
</script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$('.modal-dialog').draggable();
$(document).ready(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});
//Função para marcar o checkbox ao clicar na linha: ondblclick
$("table tr").on("dblclick", function(){
$(this).children().children()[0].click();
$('#Modal-Editar').modal('show');
$.each($("input[name='customRadio']:checked"), function() {
VarId = $(this).data('envia-id');
VarPagina = $(this).data('envia-pagina');
VarCodpagina = $(this).data('envia-codpagina');
VarTipo = $(this).data('envia-tipo');
VarUsuarios = $(this).data('envia-usuarios');
VarGrupo = $(this).data('envia-grupo');
VarObservacao = $(this).data('envia-observacao');
$('#RecebId').val(VarId);
$('#RecebId2').html(VarId);
$('#RecebPagina').val(VarPagina);
$('#RecebCodpagina').val(VarCodpagina);
$('#RecebTipo').html(VarTipo);
$('#RecebUsuarios').html(VarUsuarios);
$('#RecebObservacao').val(VarObservacao);
$('#RecebGrupo option').each(function(index) {
var str = VarGrupo;
var substr = str.split(', ');
for (var i = 0; i < substr.length; i++) {
if (substr[i] == $(this).val()) {
//$("option:selected", this).attr();
$(this).attr('selected', 'selected');
//$(this).attr('selected', true);
//$(this).addClass('ms-elem-selectable ms-hover ms-selected').show();
//$(this).addClass('ms-hover').show();
//$(this).addClass('ms-selected').show();
//$(this).Attr('hidden');
//$(this).Attr('id', '-190140734-selection');
}
}
});
$('#RecebUsuarios2 option').each(function(index) {
var str = VarUsuarios;
var substr = str.split(', ');
for (var i = 0; i < substr.length; i++) {
if (substr[i] == $(this).val()) {
//$("option:selected", this).attr();
$(this).attr('selected', 'selected');
//$(this).attr('selected', true);
//$(this).addClass('ms-elem-selectable ms-hover ms-selected').show();
//$(this).addClass('ms-hover').show();
//$(this).addClass('ms-selected').show();
//$(this).Attr('hidden');
//$(this).Attr('id', '-190140734-selection');
}
}
});
});
});
</script>
<script type="text/javascript">
// MultiSelect Cadastro de Grupo
$('#Selected-GrupoCad').multiSelect();
// MultiSelect Editar Grupo
$('#RecebGrupo').multiSelect();
</script>
</body>
</html>