Arquivo Discussoes de Programacao e Tecnologia boa noite galera,
Estou fazendo um form com um campo cidade, mas queria que a partir de um clique em um botão fosse aberta uma janela menor com as cidades já cadastradas com opção de inclusão de novas cidades e que a cidade escolhida na listagem fosse setada no input do form.
Alguem pode me ajudar?
a aplicação é web? se sim, acho que css e javascript são suficientes.
o que você já tem pronto?
já tem idéia de como quer fazer isso?
a aplicação é web? se sim, acho que css e javascript são suficientes.o que você já tem pronto?
já tem idéia de como quer fazer isso?
WBDS
Sim estou fazendo com jsp e servlet, montei o layout e a validação em css…segue o codigo q eu ja tenho
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>..::Cadastro de Fornecedores::..</title>
<script language="javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script language="javaScript" src="jquery-validate/jquery.validate.js" type="text/javascript"></script>
<script language="javaScript" src="js/mascara.js" type="text/javascript"></script>
<script language="javaScript" src="js/mask.js" type="text/javascript"></script>
<script language="javaScript" src="js/validador.js" type="text/javascript"></script>
<link href="css/ris.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="610" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><form id="form" name="form" method="post" action="">
<table width="610" border="0" cellspacing="0" cellpadding="0" id="todoform">
<tr>
<td width="108"><div align="right"><label>Razão Social:</label></div></td>
<td width="502"><input name="tf_razao" type="text" size="30" maxlength="50" /></td>
</tr>
<tr>
<td><div align="right"><label>Nome Fantasia:</label></div></td>
<td><input name="tf_fantasia" type="text" size="30" maxlength="50" /></td>
</tr>
<tr>
<td><div align="right"><label>C.N.P.J:</label></div></td>
<td><input name="tf_cnpj" type="text" size="20" maxlength="20" alt="cnpj"/></td>
</tr>
<tr>
<td><div align="right"><label>I.E:</label></div></td>
<td><input name="tf_ie" type="text" size="20" maxlength="20" /></td>
</tr>
<tr>
<td><div align="right"><label>Tipo:</label></div></td>
<td><select name="select">
<option value="MT">Materiais</option>
<option value="MD">Medicamentos</option>
</select>
</td>
</tr>
<tr>
<td><div align="right"></div></td>
<td> </td>
</tr>
<tr>
<td><div align="right"><label>Endereço:</label></div></td>
<td><input type="text" name="tf_endereco" /></td>
</tr>
<tr>
<td><div align="right"><label>Complemento:</label></div></td>
<td><input type="text" name="tf_complemento" /></td>
</tr>
<tr>
<td><div align="right"><label>Bairro:</label></div></td>
<td><input type="text" name="tf_bairro" /></td>
</tr>
<tr>
<td><div align="right"><label>Cidade:</label></div></td>
<td><select name="sl_cidade">
</select>
</td>
</tr>
<tr>
<td><div align="right"><label>Cep:</label></div></td>
<td><input name="tf_cep" type="text" size="10" maxlength="15" alt="cep"/></td>
</tr>
<tr>
<td><div align="right"><label>Caixa Postal:</label></div></td>
<td><input name="tf_cxpostal" type="text" size="10" maxlength="10" /></td>
</tr>
<tr>
<td><div align="right"><label>Fone:</label></div></td>
<td><input name="tf_fone" type="text" size="15" maxlength="15" alt="phone"/></td>
</tr>
<tr>
<td><div align="right"><label>Celular:</label></div></td>
<td><input name="tf_celular" type="text" size="15" maxlength="15" alt="phone"/></td>
</tr>
<tr>
<td><div align="right"><label>Fax:</label></div></td>
<td><input name="tf_fax" type="text" size="15" maxlength="15" alt="phone"/></td>
</tr>
<tr>
<td><div align="right"><label>Site:</label></div></td>
<td><input name="tf_site" type="text" size="30" maxlength="50" /></td>
</tr>
<tr>
<td><div align="right"><label>E-mail:</label></div></td>
<td><input name="tf_email" type="text" size="40" maxlength="50" /></td>
</tr>
<tr>
<td><div align="right"><label>Obs:</label></div></td>
<td><textarea name="ta_obs" cols="40" rows="5"></textarea></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
CSS
#todoform {
background:#F1F4F8;
font:bold 12px arial, verdana, helvetica, sans-serif;
border-top:2px solid #cfcfcf;
border-left:2px solid #cfcfcf;
border-right:2px solid #696969;
border-bottom:2px solid #696969;
border-collapse:collapse;
color:#000033;
}
#todoform th {
background:#000000;
padding:3px;
font: bold 15px arial, verdana, helvetica, sans-serif;
border-bottom:1px solid #000033;
}
#todoform td {
padding:3px;
}
#todoform input {
background:#F5F5F5;
border:1px solid #000033;
font: 12px Verdana, Geneva, sans-serif;
color: #666666;
}
#todoform textarea {
border:1px solid #000033;
background:#F5F5F5;
font: 12px Verdana, Geneva, sans-serif;
color: #666666;
}
#todoform select {
border:1px solid #000033;
background:#F5F5F5;
font: 12px Verdana, Geneva, sans-serif;
color: #666666;
}
#todoform input.botao {
background:#000000;
color:#ffffff;
border:2px solid #ffffff;
}
Olá java_bariza
Você vai ter que ter um "mini" crud para fazer isso, não vejo outra maneira.
Ao clicar no botão "pesquisa" ou "..." abrir um modal com uma lista de cidades cadastradas e ao clicar em qualquer uma delas, recuperar o valor via jquery (vi que vc já está usando) e com a opção de incluir.
Uma biblioteca para modal -> http://www.ericmmartin.com/projects/simplemodal/.
Tente criar algo meio que genérico para abrir o modal, de modo que seja reaproveitado em outras partes do site.
ex.
functionQueAbreModal(url, largura, altura) {
var pagina = chamadaViaAjax(url)
biblioteca.abrirModal(pagina);
}
functionRecuperarValorDaGrid(id, nome) {
// a tabela teria al assim
// <a href='javascript:void(0);' onclick='functionRecuperarValorDaGrid(51, 'São Paulo')'>São Paulo</a>
var cidadeSelecionadaId = id;
var cidadeSelecionadaNome = nome;
// no campo cidade, não teria um select e sim um input hidden com id = cidade_id e um input text com id = cidade_nome
$('#cidade_id').val(id);
$('#cidade_nome').val(nome);
biblioteca.close();
}
A "url" que foi recuperada, teria um um input para a inserção de uma nova cidade (vc faz o post via ajax e no caso de sucesso, recarrega a lista de cidades e limpa o input cidade).
Espero ter ajudado
…
Uma biblioteca para modal -> http://www.ericmmartin.com/projects/simplemodal/.
…
o jQuery tem modal. acho desnecessário usar mais uma biblioteca.
andei pensando melhor e achei que seria mais interessante o usuario escolher um combo (select) com os estados e no outro combos(select) fossem carregadas as cidades que estão gravadas no bd com o estado escolhido. quero fazer isso usando mvc, estou usando dao e javabean para cadastrar meus dados. desde já agradeço