[Resolvido] Plugins jQuery só funcionam no primeiro acesso

allex_carvalho · Janeiro 5, 2012

Bom dia.

Estou tendo um problema com plugins jquery no meu site. Eles só funcionam uma vez. Por ex.: clico em artes quando abre o site, ai o plugin funciona. Se eu clicar em contato que é só um form e voltar em artes ele já não funciona novamente.

Vejam aqui.

O que gera esses conflitos?

Obrigado pela atenção.

Ted k' · Janeiro 5, 2012

Você já debugou? usa o console e alert para ver se chega nas funções.

allex_carvalho · Janeiro 5, 2012

Debugando ganho essa mensagem:

Error Line 149, Column 150: there is no attribute "onClick"

…eight: 24px;" href="contato.php" onClick="AparecerDiv();" title="CONTATOS"></a>

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

Isso influenciaria no problema?

E usando o alert no script:

<script type="text/javascript">
$(function(){
	alert('estou aqui');
	$(".slides").jCarouselLite({
		speed: 1000,
		btnPrev: ".anterior",
		btnNext: ".proximo",
		visible: 4
	});
});
</script>

Só imprimi uma vez, uma na hora que entra no site e no primeiro click em qualquer item do menu.

Certa vez li (acho que aqui) que jQuery não dá conflito com jQuery. Então... O que gera esses conflitos?

Obrigado.

William Bruno · Janeiro 5, 2012

clico em artes quando abre o site, ai o plugin funciona. Se eu clicar em contato que é só um form e voltar em artes ele já não funciona novamente.

leia:

http://wbruno.com.br/blog/2011/08/22/usando-lightbox-em-pagina-carregada-ajax/

oque acontece, é que qndo você vai para "contato", você tira o html da galeria. E então o plugin não volta a ser atrelado qndo você chama o artes de novo.

O meu post resolve o seu problema.

Não flood o fórum. Apenas aguarde uma resposta, e que tal ajudar outros membros enqnto isso ?

allex_carvalho · Janeiro 5, 2012

Boa tarde William.

Fazendo os testes aqui, consegui executar o plugin uma vez. Quando volto na pagina ela nem abre.

Veja aqui.

O efeito está em artes. Clique em artes, vá em contato e volte em artes. A pagina não abre.

Obrigado pela atenção.

William Bruno · Janeiro 5, 2012

Desculpe perguntar.. mas pq você não aplicou a sugestão do post do meu blog ?

allex_carvalho · Janeiro 5, 2012

Desculpe perguntar.. mas pq você não aplicou a sugestão do post do meu blog ?

Apliquei. O link artes agora chama o arquivo chamaArtes.php. Segue abaixo o conteudo do arquivo:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Valeria Oliveira</title>
<script type="text/javascript" src="@js/jquery.js"></script>
<script type="text/javascript" src="@js/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#content').load('artes.php',
		function(){
			$("#interiores2").jCarouselLite({
			speed: 1000,
			btnPrev: ".anterior",
			btnNext: ".proximo",
			visible: 4
			});
		}
	);
});
</script>
</head>

<body>
<div id="content"></div>
</body>
</html>

Obrigado pela atenção.

William Bruno · Janeiro 5, 2012

Ok, então você não entendeu oque eu sugeri.

a função que você deve alterar, é esta aqui:

<script type="text/javascript">
   $(document).ready(function(){
       $("#menu a").click(function( e ){
		var $this = $( this );
           e.preventDefault();
           var href = $( this ).attr('href');
           $("#contConteudo").load( href );
		$( '#menu a' ).css('backgroundPosition','0 0');
   		$( this ).css('backgroundPosition','0 -24px');
       });
   });
</script>

entendeu ?

allex_carvalho · Janeiro 5, 2012

Hum... Fiz o seguinte.

Criei um arquivo conteudo.php onde ele só tem a div contConteudo (que é a que recebe todo conteudo). para receber essa div criei a content e alterei o script. Veja:

<script type="text/javascript">
   $(document).ready(function(){
       $("#menu a").click(function( e ){
		$('#content').load('conteudo.php',
			function(){
		var $this = $( this );
           e.preventDefault();
           var href = $( this ).attr('href');
           $("#contConteudo").load( href );
		$( '#menu a' ).css('backgroundPosition','0 0');
   		$( this ).css('backgroundPosition','0 -24px');
			}
		);
	});
   });
</script>

Porém... Agora os links não estão abrindo dentro da div.

William Bruno · Janeiro 5, 2012

ta.. vamos com calma.. você está misturando tudo..

é bem mais simples doq oq você ta tentando.

<script type="text/javascript">
   $(document).ready(function(){
       $("#menu a").click(function( e ){
           e.preventDefault();

           var $this = $( this );
           var href = $this.attr('href');

           if( href=='artes.php' )
           {
               $("#contConteudo").load( href, 
                   function()
                   {
                       $("#interiores2").jCarouselLite({
                               speed: 1000,
                               btnPrev: ".anterior",
                               btnNext: ".proximo",
                               visible: 4
                        });
                   } 
               );
           }
           else
           {
               $("#contConteudo").load( href );
           }

           /* alterando menu */
           $( '#menu a' ).css('backgroundPosition','0 0');
           $this.css('backgroundPosition','0 -24px');
       });
   });
</script>

teste dessa forma.

allex_carvalho · Janeiro 5, 2012

Mesma coisa. Só funciona uma vez. Abre o carousel, ai clica em contato e volta em artes e para de vez.

William Bruno · Janeiro 5, 2012

vai corrigindo os erros que aparecem no console:

Erro: $(".slides").jCarouselLite is not a function

Arquivo-fonte: http://qamais.com/valeria/

Linha: 16

valide o HTML:(tem alguns erros bem absurdos ali)

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fqamais.com%2Fvaleria%2F

onClick -> onclick (em minusculo)

Junte todos os <scripts> js em uma unica tag <script>

E logo depois, jogue para um arquivo separado. Da forma que está, está bem complicado.

allex_carvalho · Janeiro 5, 2012

Juntei todos os scripts para uma única tag <script> e coloquei em um arquivo js.php, chamei ele na index (dentro da <head>) por require_once. E coloquei os onClick em minusculo.

Ainda estamos com o mesmo problema (agora mais organizado, rs).

Obrigado pela atenção.

William Bruno · Janeiro 5, 2012

Ok, vamos prosseguir.

Esse tipo de comentário:

<!-- Validar formulario de contato -->

é apenas do html.

js só aceita essas 2 sintaxes:

//uma linha

e^

/*
 varias linhas
*/

Retire os onclicks do menu, deixando apenas assim:

<a style="background: url('@img/contatos.png') no-repeat; cursor: pointer; width: 122px; height: 24px;" href="contato.php" title="CONTATOS"></a>

vamos fazer esse processo lá na nossa tag script.

Deixe assim, o código:

<script type="text/javascript">
$(document).ready(function(){
$("#menu a").click(function( e ){
	e.preventDefault();

	var $this = $( this );
	var href = $this.attr('href');

	if( href=='artes.php' )
	{
		$("#contConteudo").load( href, 
			function()
			{
				$(".slides").jCarouselLite({
						speed: 1000,
						btnPrev: ".anterior",
						btnNext: ".proximo",
						visible: 4
				 });
			} 
		);
	}
	else
	{
		$("#contConteudo").load( href );
	}

	/* alterando menu */
	$( '#menu a' ).css('backgroundPosition','0 0');
	$this.css('backgroundPosition','0 -24px');

	/* Display block na div conteudo */
	$('#conteudo').show();
});

/* alterando sub menu */
$( '.subMenu a' ).click(function(){
	$( '.subMenu a' ).css('backgroundPosition','0 0');
	$( this ).css('backgroundPosition','0 -11px');
});

/* diminuir top da div primeira */
var primeira = $("#primeira");
$('a').click(function(){
	var new_top = primeira.css('top')=='250px' ? "-=220px" : "=0px";			
	primeira.animate({'top': new_top}, 'slow');
});

/* Efeito Inicial do site */
var p = $('#textoIndex');
var s = $('#menu');
var r = $('#rodape');
p.fadeIn();
p.queue(function() {
		setTimeout(function() {
				p.dequeue();
		}, 5000);
});
s.queue(function() {
		setTimeout(function() {
				s.dequeue();
		}, 5000);
});
s.fadeIn();
r.queue(function() {
		setTimeout(function() {
				r.dequeue();
		}, 5000);
});
r.fadeIn();
p.animate({"marginLeft": "-=800px"}, "slow").fadeOut('slow');
s.animate({"marginLeft": "+=500px"}, "slow");
r.animate({"marginLeft": "+=0px"}, "slow");


});//fecha document.ready

/* Validar formulario de contato */
function validarCont(){
   var nome = document.getElementById("nome");
   var email = document.getElementById("email");
   var msg = document.getElementById("msg");

if (nome.value == '' || nome.value == 'NOME.:'){
	nome.value = 'NOME.:';
	nome.style.color = '#999';
	nome.style.fontWeight = 'bold';
	return false;
}
if (email.value == '' || email.value == 'EMAIL.:'){
	email.value = 'EMAIL.:';
	email.style.color = '#999';
	email.style.fontWeight = 'bold';
	return false;
}
if (msg.value == '' || msg.value == 'MENSAGEM.:'){
	msg.value = 'MENSAGEM.:';
	msg.style.color = '#999';
	msg.style.fontWeight = 'bold';
	return false;
}
}
</script>

allex_carvalho · Janeiro 6, 2012

Bom dia.

Fiz as alterações sugeridas. E o problema persiste. Mais agora ficou bem melhor de ver o codigo fonte :)

Obrigado...

William Bruno · Janeiro 6, 2012

altere:

$("#contConteudo").load( href,

para:

$("#contConteudo").load( href+' #pagina',

então, todas as seus arquivos de paginas internas, devem tere esse ID.

Por exemplo o contato.php:

</script></head>

<body>
<div id="pagina">
<div id="contato">
   <form id="frmContato" method="post" action="#">
       <input type="text" id="nome" name="nome" value="NOME.:" onfocus="zerarCont(this)" onblur="PreeCont(this, 'NOME.:')" />
       <input type="text" id="email" name="email" value="EMAIL.:" onfocus="zerarCont(this)" onblur="PreeCont(this, 'EMAIL.:')"/>
       <textarea id="msg" name="msg" onfocus="zerarCont(this)" onblur="PreeCont(this, 'MENSAGEM.:')">MENSAGEM.:</textarea>
       <input type="submit" id="enviar" value="ENVIAR" />
   </form>
   <div id="info">

       <span>MSN: atendimento@valeriaoliveira.com</span>
       <span>SKYPE: atendimento.valeriaoliveira</span>
       <span>FONE: 62 3214 5485</span>
   </div><!-- info -->
</div><!-- contato -->
</div><!-- pagina -->
</body>
</html>

entendeu ?

vamos precisar disso, pq você chama todo o head, e um monte de js, cada vez que tras o retorno do ajax.

allex_carvalho · Janeiro 6, 2012

Opaw William, acredito estar chegando ao fim da novela :)

Vamos ver se entendi certo. Agora é continuar aqui com else if para cada pagina?

if( href=='artes.php' )
               {
                       $("#contConteudo").load( href, 
                               function()
                               {
                                       $(".slides").jCarouselLite({
                                                       speed: 1000,
                                                       btnPrev: ".anterior",
                                                       btnNext: ".proximo",
                                                       visible: 4
                                        });
                               } 
                       );
               }
               else
               {
                       $("#contConteudo").load( href );
               }

Valeu mesmo :)

William Bruno · Janeiro 6, 2012

só vai ter um if para as paginas q tiverem algum plugin.

valide o restante do site:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fqamais.com%2Fvaleria%2Fartes.php

http://validator.w3.org/check?uri=http%3A%2F%2Fqamais.com%2Fvaleria%2Fcontato.php&charset=%28detect+automatically%29&doctype=Inline&group=0&verbose=1&user-agent=W3C_Validator%2F1.2

allex_carvalho · Janeiro 6, 2012

Fiz um if daquele para cada pagina de plugin e todas as paginas de plugin funcionam... Se navegar entre elas. Se eu for em perfil, news ou contato e voltar em projetos, publicações ou artes (que são as paginas do carousel) o plugin para de funcionar.

Perfil não tem plugin. Contato tem aquele script para validar os campos.

O que gera esse erro?

Obrigado.

William Bruno · Janeiro 6, 2012

eu acabei tirando 2 funções q o seu form de contato usavam.

adicione lá

function PreeCont()
{}

function zerarCont()
{}

e se é sempre a mesma chamada, você poderia otimizar assim:

                if( href=='artes.php' || href=='projetos.php')
               {
                       $("#contConteudo").load( href+' #pagina', 
                               function()
                               {
                                       $(".slides").jCarouselLite({
                                                       speed: 1000,
                                                       btnPrev: ".anterior",
                                                       btnNext: ".proximo",
                                                       visible: 4
                                        });
                               } 
                       );
               }

apenas adicionando OUs

Arquivado

[Resolvido] Plugins jQuery só funcionam no primeiro acesso

Recommended Posts

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501