como faco pra quando cliakr em add requisicao aparecer outro campo , enquanto o usuario clikar criar um novo campo…
como pegar essas valores no java desses campos criados?
grato pela atencao
[AJUDA] Como fazer isso dinamicamente?
L
7 Respostas
Você obtém esse comportamento via JavaScript.
O que você sabe de JavaScript?
L
conheco legal…como seria mais ou menos a ideia?
Vc precisa manipular o DOM do documento, inserindo os componentes que você quer e gerenciar isso de alguma forma, criando uma representação do estado da interface gráfica em um Array por exemplo.
L
tem algum exemplo…?
Tenho sim.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Testes</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
var requisicoes = [];
var contReq = 1;
$( document ).ready( function(){
$( "#btnAdReq" ).click( function() {
var requisicao = {
prefixoCmp: "req" + contReq,
numero: contReq,
label: "Requisição " + contReq,
valor: ""
}
criarComponentes( requisicao );
requisicoes[ requisicao.prefixoCmp ] = requisicao;
contReq++;
});
$( "#btnEnviar" ).click( function() {
enviar();
});
});
function criarComponentes( requisicao ) {
var html = "<div id='" + requisicao.prefixoCmp + "'>";
html += "<label>" + requisicao.label + ": </label>";
html += "<input id='" + requisicao.prefixoCmp + "txt' type='text' value='" + requisicao.valor + "'/>";
html += "<input type='button' value='Remover' onclick='removerRequisicao(\"" + requisicao.prefixoCmp + "\")'/>";
html += "</div>";
$( "#container" ).append( html );
}
function removerRequisicao( idRequisicao ) {
$( "#" + idRequisicao ).remove();
delete requisicoes[ idRequisicao ];
}
function enviar() {
var dados = "";
for ( var req in requisicoes ) {
req = requisicoes[ req ];
var valor = $( "#" + req.prefixoCmp + "txt" ).val();
dados += "Requisições: " + req.numero + " Valor: " + valor + "\n";
}
alert( dados );
}
</script>
</head>
<body>
<div id="container"></div>
<div id="controles">
<input id="btnAdReq" type="button" value="Adicionar Requisição"/>
<input id="btnEnviar" type="button" value="Enviar"/>
</div>
</body>
</html>
L
vou testar…
L
nao funciona mano...eu testei aki e deu certo com html puro...mas uso jsf e richfaces...dae naum funciona...
<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns:jsp="http://java.sun.com/jsp/page"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:fn="http://java.sun.com/jstl/core">
<body>
<script language="JavaScript" type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
var requisicoes = [];
var contReq = 1;
$( document ).ready( function(){
$( "#btnAdReq" ).click( function() {
var requisicao = {
prefixoCmp: "req" + contReq,
numero: contReq,
label: "Requisição " + contReq,
valor: ""
}
criarComponentes( requisicao );
requisicoes[ requisicao.prefixoCmp ] = requisicao;
contReq++;
});
$( "#btnEnviar" ).click( function() {
enviar();
});
});
function criarComponentes( requisicao ) {
var html = "<div id='" + requisicao.prefixoCmp + "'>";
html += "<label>" + requisicao.label + ": </label>";
html += "<input id='" + requisicao.prefixoCmp + "txt' type='text' value='" + requisicao.valor + "'/>";
html += "<input type='button' value='Remover' onclick='removerRequisicao(\"" + requisicao.prefixoCmp + "\")'/>";
html += "</div>";
$( "#container" ).append( html );
}
function removerRequisicao( idRequisicao ) {
$( "#" + idRequisicao ).remove();
delete requisicoes[ idRequisicao ];
}
function enviar() {
var dados = "";
for ( var req in requisicoes ) {
req = requisicoes[ req ];
var valor = $( "#" + req.prefixoCmp + "txt" ).val();
dados += "Requisições: " + req.numero + " Valor: " + valor + "\n";
}
alert( dados );
}
</script>
<f:view>
<ui:composition template="../template/template.jspx">
<ui:define name="conteudo">
<h:form>
<rich:panel id="form" style="width : 90%;">
<f:facet name="header">
<h:outputText value="Cadastrar Requisições" />
</f:facet>
<span class="texto_negrito">Descricao: </span>
<h:inputText id="descricao" value="#{loginBean.loginForm.usuario}" styleClass="senha" style=" width : 296px;">
</h:inputText><br/><br/>
<h:commandButton value="Voltar" id="cmdEmitir1"
action="#{textoBean.cmdEmitir_action}">
<a4j:support event="onclick" reRender="coisa1,coisa2" />
</h:commandButton>
<h:commandButton value="Cadastrar Cotação" id="cmdEmitir2"
action="#{textoBean.cmdEmitir_action}">
<a4j:support event="onclick" reRender="coisa1,coisa2" />
</h:commandButton>
</rich:panel>
</h:form>
</ui:define>
</ui:composition>
</f:view>
</body>
</html>
Criado 7 de janeiro de 2011
Ultima resposta 8 de jan. de 2011
Respostas 7
Participantes 2