Uma implementação feita por mim para que abra em modal um form e o mesmo adicione o valor na combobox. Util para evitar que o usuário tenha que sair da página para adicionar um campo na combo.
Foi utilizado:
PHP, Jquery, JqueryUI.
O próprio jqueryUI possui uma area para modal-form, se encontra na parte de dialog mas não vi exemplo trabalhando junto com as combos, então resolvi postar.
[exemplo online]
[download dos arquivos]
$(function() {
var name = $("#nome"),allFields = $([]).add(name),tips = $("#validateTips");
var id = null;
function updateTips(t) {
tips.text(t).effect("highlight",{},1500);
}
function checkLength(o) {
if ( o.val().length <= 0){
o.addClass('ui-state-error');
updateTips("Preencha o campo abaixo");
return false;
} else {
return true;
}
}
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 200,
modal: true,
buttons: {
'Gravar': function() {
var bValid = true;
allFields.removeClass('ui-state-error');
bValid = bValid && checkLength(name);
if (bValid) {
/* atualiza valor na combo */
$.post(
'atualiza.php',
{ valor : name.val() },
function(resposta){
$('#'+id).append(resposta);
}
);
//$.post('../../php/jq_busca_estados.php',{ pais : $(this).val() },function(resposta){$('#estado').html(resposta);});
/* */
$(this).dialog('close');
}
},
'Cancelar': function() {
$(this).dialog('close');
}
},
close: function() {
allFields.val('').removeClass('ui-state-error');
}
});
/** Abre o dialog do formulario */
$('.adicionar').click(function() {
id = $(this).attr('combo');
$('#dialog').dialog('open');
})
.hover(
function(){
$(this).addClass("ui-state-hover");
},
function(){
$(this).removeClass("ui-state-hover");
}
).mousedown(function(){
$(this).addClass("ui-state-active");
})
.mouseup(function(){
$(this).removeClass("ui-state-active");
});
});
No caso do php eu fiz apenas um option, mas pode ser aproveitado o post para gravar em banco o valor inserido pelo form no modal.
<option value="teste" selected="selected"><?php echo $_POST['valor']; ?></option>
Tags: Javascript, Jquery, JqueryUI