[Resolvido] Disparar evento CHANGE com o evento CLICK

[mexicanox 7]

o que eu to precisando fazer é o seguinte:

estou fazendo algumas modificações em um sistema mas nao tenho acesso total, algumas coisas são criadas atraves de tags do sistema que geram um conteudo.

 

Como o sistema era originalmente:

ele possuia 2 selects 1 para o tamanho e outro para a cor, de acordo com o tamanho e cor selecionado é feita uma requisicao ajax que troca as imagens do produto.

 

Como eu preciso que funcione:

A partir dos 2 selects criar 2 listas com os respectivos valores(iguais ao dos selects) - OK ja fiz esta parte

 

Como eu nao tenho acesso a parte que faz as requisicoes ajax o que eu fiz foi, ao clicar no elemento da lista "tamanho" eu troco o valor do select "tamanho" para o mesmo do select, a mesma coisa com a cor.

 

para tal estou usando este codigo que funciona perfeitamente no FireFox, mas nao no IE

tem um pouco de JQuery no meio, mas nada que atrapalhe muito

 

       fireOnThis = document.getElementById($(skuSelect).attr("id")); //id so select (tamanho ou cor)
       $(skuSelect).val( $(skuLi).attr("value") ); //seta o valor do select de acordo com o li clicado
   	if ( isIE() ){
   	    // dispara o evento no IE - nao funciona
   		evObj = document.createEventObject();
   		fireOnThis.fireEvent("on"+eventName,evObj);
   	}else{
   		// dispara o evento no firefox e outros - OK
   		evObj = document.createEvent('HTMLEvents');
   		evObj.initEvent( eventName, true, true );
   		fireOnThis.dispatchEvent(evObj);
   	}

 

para quem quiser entender melhor esta o link da pagina, se escolher verde e 35 a foto muda para verde

http://webstore.rogerstenis.vtexlab.com.br/Produto-Exemplo-1/p?&utmi_p=_&utmi_pc=Destaque&utmi_cp=Destaque

 

Ja tentei de varias maneiras e ainda nao funcionou no IE

 

flws !!

[Bruno Augusto 417]

Se você já está usando a jQuery, faça tudo com ela. Seria mais simples, não?

[mexicanox 7]

eu ate faria e realmente seria mais simples, mas nao encontrei como se faz isso que eu preciso com JQuery.

 

flws

[Bruno Augusto 417]

Bom, suponho que seja você que está desenvolvendo apenas a UI do site, certo? Já que disse que não tem acesso à URL remota.

 

Ao meu ver, você pode manter o mesmo esquema sem a necessidade dos select's, que diga-se de passagem só consegui fazer funcionar uma vez, as possíveis alterações de opção não rolaram (só com refresh).

 

Você tem os quadradinhos com as opções de cor e cada um tem como ID a própria cor.

 

Você tem outros quadradinhos com os tamanhos e também devem ter nos ID's tamanhos, mas se não me engano o atributo ID não pode começar com números, então teria de contornar isso.

 

Percebi que a ação da imagem ser trocada ocorre ao clicar no quadradinho do número, então a ação ocorreria no evento click() deles. Para você não ter de definir todos os ID's dos números, você pode usar uma classe, com isso temos:

 

$( document ).ready( function() {

   // Para todos os elementos dos números, quando clicados...

   $( 'ul#sizes li' ).click( function() {

       // ... pegamos o ID da cor selecionada

       var color = $( 'ul#colors li' ).hasClass( 'selected' );

       // E junto com o ID do quadradinho clicado...

       var size = $( this ).attr( 'id' ).replace( 'size-', '' );

       // Temos as informações que você enviará por AJAX e obterá os dados da imagem

       alert( color );
       alert( size );
   });

   /**
    * Aqui vamos adicionar a classe 'selected' na cor clicada,
    * para que o evento acima encontre algo e atribua à variável color
    *
    * Mas isso depois de remover a mesma classe dos outros elementos
    * que compartilham a mesma classe.
    */
   $( 'ul#colors li' ).click( function() {

       $( this ).removeClass( 'selected' ).addClass( 'selected' );
   });
});

Eu não testei mas,, num primeiro mmento e considerando o fragemtnod e HTML abaixo:

 

<ul id="colors">
   <li id="red">Red</li>
   <li id="green">Green</li>
   <li id="blue">Blue</li>
</ul>

<br /><br />

<ul id="sizes">
   <li id="size-34">34</li>
   <li id="size-35">35</li>
   <li id="size-36">36</li>
</ul>

Deve alertar, respectivamente, após clicar no Green e no 35, os valores green e 35 (nãããão juuuura!)

 

Veja se resolve, ou se pelo menos abre um caminho iluminado para ti. :thumbsup:

[mexicanox 7]

Percebi que a ação da imagem ser trocada ocorre ao clicar no quadradinho do número, então a ação ocorreria no evento click() deles. Para você não ter de definir todos os ID's dos números, você pode usar uma classe, com isso temos:

 

Na verdade nao é bem assim, a troca da imagem é feita de acordo com a cor e o tamanho selecionado, se voce selecionar primeiro o tamanho e depois a cor vai funcionar do mesmo jeito.

 

A função que faz a requisicao ajax e troca as cores é feita no evento change dos selects, eu ate deixei os selects la para exemplificar melhor, por exemplo se voce selecionar o select do tamanho com o valor 35 vai perceber que no select da cor a cor vermelho vai estar bloqueada logo voce so pode selecionar a cor verde e ai troca a foto.

 

O que eu fiz foi disparar o evento change do select cor ou tamanho no evento click dos quadradinhos cor ou tamanho, mais uma coisa eu tambem nao tenho acesso a função que chama o ajax logo eu nao posso passar valor nenhum para função como voce sugeriu.

 

isso tudo esta funcionando, ate a cor do item clicado muda para verde, isso no firefox chrome e opera, o problema é a função document.createEvent('HTMLEvents') que nao funciona no IE, nele precisa ser o document.createEventObject(), ou se tiver como fazer com jquery tambem serve, o importante é fazer funcionar no ie, por que nos outros ja esta funcionando.

 

flws !!

[Bruno Augusto 417]

Vamos deixar bem claro então:

 

As ações serão executadas nos selects's e não nos quadradinhos certo?

 

Posta um possível retorno da requisição AJAX, estou sem Firebug no momento.

[William Bruno 1501]

isso tudo esta funcionando, [..] o problema é a função document.createEvent('HTMLEvents') que nao funciona no IE, nele precisa ser o document.createEventObject()

okay.

 

vou me ater a este trecho.

 

if ( isIE() ){

pelo visto então essa tua funcão isIE() não está funcionando corretamente.

Poste a declaração dela. E debug para ver se entra nesse IF.

[mexicanox 7]

Vamos deixar bem claro então:

 

As ações serão executadas nos selects's e não nos quadradinhos certo?

 

Posta um possível retorno da requisição AJAX, estou sem Firebug no momento.

na verdade nos dois, ao clicar no quadradinho que tem um evento click, vai disparar o evento change do select respectivo. Ex: clica no quadradinho do tamanho, dispara o evento change do select do tamanho.

 

 

isso tudo esta funcionando, [..] o problema é a função document.createEvent('HTMLEvents') que nao funciona no IE, nele precisa ser o document.createEventObject()

okay.

 

vou me ater a este trecho.

 

if ( isIE() ){

pelo visto então essa tua funcão isIE() não está funcionando corretamente.

Poste a declaração dela. E debug para ver se entra nesse IF.

Aqui eu estou com IE 8 e funciona o problema e no createEventObject() que eu nao encontrei bem como funciona, mas ai vai o codigo

//FUNCAO ISIE() BEM BASICA
function isIE(){
var browserName=navigator.appName; 
if (browserName=="Microsoft Internet Explorer"){
	return true;
}else{
	return false;
}
}


//AQUI ESTA O MEU CARRASCO
fireOnThis = document.getElementById($(skuSelect).attr("id")); //select que vai disparar o evento change (cor ou tamanho)
$(skuSelect).val( $(skuLi).attr("value") ); //muda o valor do select de acordo com o que foi clicado no quadradinho (cor ou tamanho)

if ( isIE() ){
   	    // o IE nao suporta o createEvent(), para ele tem que ser esse bendito createEventObject() 
   		evObj = document.createEventObject();
   		fireOnThis.fireEvent("on"+eventName,evObj);
   	}else{
   		// essa parte funciona em todos navegadores, é aqui onde eu disparo o evento change do select, quando clica em algum quadradinho
   		evObj = document.createEvent('HTMLEvents');
   		evObj.initEvent( "onchange", true, true );
   		fireOnThis.dispatchEvent(evObj);
   	}

 

flws

[mexicanox 7]

QUE AS BUSCAS CESSEM !!!!!!!!

 

consegui descobrir, com jquery se usa o trigger(evento) para isso, ele dispara o evento passado por parametro e funciona beleza ate no IE

 

brigadao a todos ai

 

flws