Chamada a função JQuery Errada!
Eu não estou conseguindo chamar uma alerta a partir de um HTML.
Obs. o commandBuntton contém o mesmo id do javaScript (myElement).
Como eu faço para chamar a partir do HTML usando Jquery Object?
No html do JSF:
<h:commandButton id="myElement" value="Click me" />
>>>>>> Este comando está certo? O que está errado?
Dentro do Java Script(exemplo Simple Modal Dialog):
$("myElement").addEvent("click", function(){
var SM = new SimpleModal({"btn_ok":"Ok"});
SM.show({
"title":"my title",
"contents":"my msg"
});
});
Obs. o commandBuntton contém o mesmo id do javaScript (myElement).
Como eu faço para chamar a partir do HTML usando Jquery Object?
No html do JSF:
<h:commandButton id="myElement" value="Click me" />
>>>>>> Este comando está certo? O que está errado?
Dentro do Java Script(exemplo Simple Modal Dialog):
$("myElement").addEvent("click", function(){
var SM = new SimpleModal({"btn_ok":"Ok"});
SM.show({
"title":"my title",
"contents":"my msg"
});
});
Régis Santos
Curtidas 0
Respostas
Joel Rodrigues
20/09/2012
Faltou o # para identificar o elemento: $("#myElement"). Teste aí.
GOSTEI 0
Régis Santos
20/09/2012
Eu fiz testes e continua não chamando.
Obs:Nos exemplos oferecidos pelo Simple Modal Dialog, definido abaixo a chamada ao alerta funciona normalmente, mas eu
gostaria de chamar a partir de um botão de comando do JSF.
>>>>>>Exemplo do Simple Modal Dialog que funciona. Abaixo existem este e outros exemplos do SIMPLE MODAL DIALOG que funcionam.
<li class="example-item" id="alert">
<img src="minhasimagens/example-1.jpg" width="196" height="147" alt="Example 1"/>
<a href="javascript;">Alert</a>
</li>
>>>>>>>>>>>>>>HTML usando JSF:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
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">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Simple Modal Dialog</title>
<link href="estilos/simplemodal.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="meuestilos/reset.css" type="text/css" media="screen" title="no title" />
<link rel="stylesheet" href="meuestilos/demo.css" type="text/css" media="screen" title="no title" />
<link rel="stylesheet" href="meuestilos/simplemodal.css" type="text/css" media="screen" title="no title" />
<script src="meujs/mootools-core-1.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="meujs/mootools-more-1.3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="meujs/simple-modal.js" type="text/javascript" charset="utf-8"></script>
<script src="meujs/demo.js" type="text/javascript" charset="utf-8"></script>
<script src="js/funcoesGenericas.js" type="text/javascript" charset="utf-8"></script>
>>>>>>>>>>>>>>>> NÃO DEFINI O ARQUIVO do JavaScript do Jquery: jquery-1.2.6.js, pois no exemplo do Simple Modal Dialog este arquivo também não é definido >>>>>>>>>>>>>>>>>>>>>>>
<link rel="shortcut icon" type="image/png" href="http://simplemodal.plasm.it/apple-touch-icon.png" />
</head>
<body>
<div class="header">
<div class="window"></div>
<div class="simple-modal-title"></div>
</div>
<div class="wrapper">
<ul>
>>>>>>>> EXEMPLOS QUE FUNCIONAM, EXTRAÍDOS DO SIMPLE MODAL DIALOG
<li class="example-item" id="alert">
<img src="minhasimagens/example-1.jpg" width="196" height="147" alt="Example 1"/>
<a href="javascript;">Alert</a>
</li>
<li class="example-item" id="confirm">
<img src="minhasimagens/example-2.jpg" width="196" height="147" alt="Example 2"/>
<a href="#">Confirm</a>
</li>
<li class="example-item" id="modal">
<img src="minhasimagens/example-3.jpg" width="196" height="147" alt="Example 3"/>
<a href="#">Modal</a>
</li>
<li class="example-item" id="modal-ajax">
<img src="minhasimagens/example-4.jpg" width="196" height="147" alt="Example 4"/>
<a href="#">Modal Ajax</a>
</li>
<li class="example-item" id="modal-image">
<img src="minhasimagens/example-5.jpg" width="196" height="147" alt="Example 5"/>
<a href="#">Modal Image</a>
</li>
<li class="example-item" id="alert-noheader">
<img src="minhasimagens/example-6.jpg" width="196" height="147" alt="Example 6"/>
<a href="#">No header</a>
</li>
<li class="example-item" id="modal-nofooter">
<img src="minhasimagens/example-7.jpg" width="196" height="147" alt="Example 7"/>
<a href="#">Video embed</a>
</li>
<li class="example-item" id="example-eheh">
<img src="minhasimagens/example-8.jpg" width="196" height="147" alt="?"/>
<a href="#">?</a>
</li>
>>>>>>>>>>>> ESTE É O CÓDIGO QUE CHAMA O ALERTA QUE NÃO ESTÁ FUNCIONANDO >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<h:commandButton id="myElement" value="Click me" />
</ul>
<div class="clear"></div>
<p class="credits">© 2011 <a title="Plasm" href="http://www.plasm.it">Plasm</a>. All Rights Reserved.</p>
</div>
<div class="clear"></div>
</body>
</html>
>>>>>>>>>>>>>>>>>>>>>Meu JavaScript (js/funcoesGenericas.js):>>>>>>>>>>>>>>>>>>>>
/**
* função que avalia se o idioma foi selecionado pelo usuário
* @param idiomaSelecionado
* @returns
*/
function avaliarIdioma(idiomaSelecionado, idioma, indicaPermiteCookie){
var resultado = false;
if (idiomaSelecionado == 'false'){
var msg = 'Por favor, selecione o Idioma desejado! / Please, select your favorite language!';
window.alert(msg);
}else{
if (indicaPermiteCookie == 'false'){
var msg = '';
if (idioma == 'pt_BR'){
msg = 'O Régis E-Commerce exige que esteja configurado no browser a possibilidade de Criar Cookies!';
} else{
msg = 'The Régis E-Commerce demands that be set on browser the permission of creating Cookies!';
}
window.alert(msg);
}else{
resultado=true;
}
}
return resultado;
}
/**
* função que exibe uma mensagem passada como parâmetro em uma janela.
* @param mensagem
* @returns
*/
function emitirMensagem(mensagem){
var msg = mensagem;
window.alert(msg);
var resultado = true;
return resultado;
}
/**
* função que avalia se o cartão de crédito é um cartão novo.
* @param isCartaoNovo - indica se o cartão é novo
* @param msg - contém a mensagem a ser exibida na janela
* @returns
*/
function avaliarCartaoCredito(isCartaoNovo, msg){
var resultado = false;
if (isCartaoNovo == 'true'){
window.alert(msg);
}else{
resultado = true;
}
return resultado;
}
/**
* função que pergunta algo e retorna falso ou verdadeiro
* @param msg - contém a mensagem a ser exibida na janela
* @returns
*/
function perguntarAlgo(msg){
var resultado = false;
resultado = confirm(msg);
return resultado;
}
/**
* função que pergunta algo com 2 parâmetros e retorna falso ou verdadeiro
* @param msg - contém a mensagem a ser exibida na janela
* @returns
*/
function perguntarAlgoAprovar(msg, msg2){
var resultado = false;
resultado = confirm(msg);
if (resultado == true){
alert(msg2);
}
return resultado;
}
/**
* função que seleciona o específico componente fornecido pelo usuário
* @param componente fornecido pelo usuário
*/
function selecioneComponente(form) {
setInterval(document.getElementById(form).style.top=document.body.scrollTop+10+'px', 50);
}
/**
* função que atualiza a página corrente.
*/
function refreshPagina(){
setTimeout("location.reload(true);",1500);
}
function chamarBarraProgressao(){
var i =0;
for (i=0; i<5; i++)
{
println('imprimindo o número: ' + i.toString());
}
}
>>>>>>>>>>>>>>>>>>>>>>> FUNÇÃO ALERTA CHAMADA A PARTIR DO HTML QUE NÃO ESTÁ FUNCIONANDO >>>>>>>>>>>>>>>>>>>>>>>>>>>>.
OBS: ALTEREI O $("myElement") PARA $("#myElement"). Janela não é apresentada!
$("#myElement").addEvent("click", function(){
var SM = new SimpleModal({"btn_ok":"Ok"});
SM.show({
"title":"title",
"contents":"msg"
});
});
Obs:Nos exemplos oferecidos pelo Simple Modal Dialog, definido abaixo a chamada ao alerta funciona normalmente, mas eu
gostaria de chamar a partir de um botão de comando do JSF.
>>>>>>Exemplo do Simple Modal Dialog que funciona. Abaixo existem este e outros exemplos do SIMPLE MODAL DIALOG que funcionam.
<li class="example-item" id="alert">
<img src="minhasimagens/example-1.jpg" width="196" height="147" alt="Example 1"/>
<a href="javascript;">Alert</a>
</li>
>>>>>>>>>>>>>>HTML usando JSF:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
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">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Simple Modal Dialog</title>
<link href="estilos/simplemodal.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="meuestilos/reset.css" type="text/css" media="screen" title="no title" />
<link rel="stylesheet" href="meuestilos/demo.css" type="text/css" media="screen" title="no title" />
<link rel="stylesheet" href="meuestilos/simplemodal.css" type="text/css" media="screen" title="no title" />
<script src="meujs/mootools-core-1.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="meujs/mootools-more-1.3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="meujs/simple-modal.js" type="text/javascript" charset="utf-8"></script>
<script src="meujs/demo.js" type="text/javascript" charset="utf-8"></script>
<script src="js/funcoesGenericas.js" type="text/javascript" charset="utf-8"></script>
>>>>>>>>>>>>>>>> NÃO DEFINI O ARQUIVO do JavaScript do Jquery: jquery-1.2.6.js, pois no exemplo do Simple Modal Dialog este arquivo também não é definido >>>>>>>>>>>>>>>>>>>>>>>
<link rel="shortcut icon" type="image/png" href="http://simplemodal.plasm.it/apple-touch-icon.png" />
</head>
<body>
<div class="header">
<div class="window"></div>
<div class="simple-modal-title"></div>
</div>
<div class="wrapper">
<ul>
>>>>>>>> EXEMPLOS QUE FUNCIONAM, EXTRAÍDOS DO SIMPLE MODAL DIALOG
<li class="example-item" id="alert">
<img src="minhasimagens/example-1.jpg" width="196" height="147" alt="Example 1"/>
<a href="javascript;">Alert</a>
</li>
<li class="example-item" id="confirm">
<img src="minhasimagens/example-2.jpg" width="196" height="147" alt="Example 2"/>
<a href="#">Confirm</a>
</li>
<li class="example-item" id="modal">
<img src="minhasimagens/example-3.jpg" width="196" height="147" alt="Example 3"/>
<a href="#">Modal</a>
</li>
<li class="example-item" id="modal-ajax">
<img src="minhasimagens/example-4.jpg" width="196" height="147" alt="Example 4"/>
<a href="#">Modal Ajax</a>
</li>
<li class="example-item" id="modal-image">
<img src="minhasimagens/example-5.jpg" width="196" height="147" alt="Example 5"/>
<a href="#">Modal Image</a>
</li>
<li class="example-item" id="alert-noheader">
<img src="minhasimagens/example-6.jpg" width="196" height="147" alt="Example 6"/>
<a href="#">No header</a>
</li>
<li class="example-item" id="modal-nofooter">
<img src="minhasimagens/example-7.jpg" width="196" height="147" alt="Example 7"/>
<a href="#">Video embed</a>
</li>
<li class="example-item" id="example-eheh">
<img src="minhasimagens/example-8.jpg" width="196" height="147" alt="?"/>
<a href="#">?</a>
</li>
>>>>>>>>>>>> ESTE É O CÓDIGO QUE CHAMA O ALERTA QUE NÃO ESTÁ FUNCIONANDO >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<h:commandButton id="myElement" value="Click me" />
</ul>
<div class="clear"></div>
<p class="credits">© 2011 <a title="Plasm" href="http://www.plasm.it">Plasm</a>. All Rights Reserved.</p>
</div>
<div class="clear"></div>
</body>
</html>
>>>>>>>>>>>>>>>>>>>>>Meu JavaScript (js/funcoesGenericas.js):>>>>>>>>>>>>>>>>>>>>
/**
* função que avalia se o idioma foi selecionado pelo usuário
* @param idiomaSelecionado
* @returns
*/
function avaliarIdioma(idiomaSelecionado, idioma, indicaPermiteCookie){
var resultado = false;
if (idiomaSelecionado == 'false'){
var msg = 'Por favor, selecione o Idioma desejado! / Please, select your favorite language!';
window.alert(msg);
}else{
if (indicaPermiteCookie == 'false'){
var msg = '';
if (idioma == 'pt_BR'){
msg = 'O Régis E-Commerce exige que esteja configurado no browser a possibilidade de Criar Cookies!';
} else{
msg = 'The Régis E-Commerce demands that be set on browser the permission of creating Cookies!';
}
window.alert(msg);
}else{
resultado=true;
}
}
return resultado;
}
/**
* função que exibe uma mensagem passada como parâmetro em uma janela.
* @param mensagem
* @returns
*/
function emitirMensagem(mensagem){
var msg = mensagem;
window.alert(msg);
var resultado = true;
return resultado;
}
/**
* função que avalia se o cartão de crédito é um cartão novo.
* @param isCartaoNovo - indica se o cartão é novo
* @param msg - contém a mensagem a ser exibida na janela
* @returns
*/
function avaliarCartaoCredito(isCartaoNovo, msg){
var resultado = false;
if (isCartaoNovo == 'true'){
window.alert(msg);
}else{
resultado = true;
}
return resultado;
}
/**
* função que pergunta algo e retorna falso ou verdadeiro
* @param msg - contém a mensagem a ser exibida na janela
* @returns
*/
function perguntarAlgo(msg){
var resultado = false;
resultado = confirm(msg);
return resultado;
}
/**
* função que pergunta algo com 2 parâmetros e retorna falso ou verdadeiro
* @param msg - contém a mensagem a ser exibida na janela
* @returns
*/
function perguntarAlgoAprovar(msg, msg2){
var resultado = false;
resultado = confirm(msg);
if (resultado == true){
alert(msg2);
}
return resultado;
}
/**
* função que seleciona o específico componente fornecido pelo usuário
* @param componente fornecido pelo usuário
*/
function selecioneComponente(form) {
setInterval(document.getElementById(form).style.top=document.body.scrollTop+10+'px', 50);
}
/**
* função que atualiza a página corrente.
*/
function refreshPagina(){
setTimeout("location.reload(true);",1500);
}
function chamarBarraProgressao(){
var i =0;
for (i=0; i<5; i++)
{
println('imprimindo o número: ' + i.toString());
}
}
>>>>>>>>>>>>>>>>>>>>>>> FUNÇÃO ALERTA CHAMADA A PARTIR DO HTML QUE NÃO ESTÁ FUNCIONANDO >>>>>>>>>>>>>>>>>>>>>>>>>>>>.
OBS: ALTEREI O $("myElement") PARA $("#myElement"). Janela não é apresentada!
$("#myElement").addEvent("click", function(){
var SM = new SimpleModal({"btn_ok":"Ok"});
SM.show({
"title":"title",
"contents":"msg"
});
});
GOSTEI 0
Danilo Gomes
20/09/2012
Tente por um alert("teste") na primeira linha do evento bindado. Veja se o evento é invocado.
GOSTEI 0
Joel Rodrigues
20/09/2012
Bem, você realmente não está fazendo referência à biblioteca jQuery, o que é necessário para poder utilizar essa sintaxe. Adicione a referência e teste novamente.
GOSTEI 0
Alisson Santos
20/09/2012
Foi testado novamente? conseguiu solucionar o seu problema?
GOSTEI 0
Régis Santos
20/09/2012
Eu já solucinei o problema!
Obrigado a todos!
Obrigado a todos!
GOSTEI 0
José
20/09/2012
obrigado pelo retorno.
Sendo assim, estou marcando este tópico como resolvido.
Sendo assim, estou marcando este tópico como resolvido.
GOSTEI 0