Problema de conflito com ajax

Otávio95 · Fevereiro 25, 2013

A questão e a seguinte eu criei um menu com Ajax no meu site e funcionou tranquilamente , logo eu resolvi colocar um slide show com Ajax, logo começou a dar problema nesta linha:

<div id="menu22"> <?php require_once("menu.php");?> </div> 

Quando eu acesso a pagina o menu funciona, mas o slide show só mostra a primeira foto e os links: anterior, próximo e 1,2,3 não mudam as fotos.

Agora, quando eu comento a linha da chamada do arquivo menu o slide show funciona normalmente : <div id="menu22"> <?php //require_once("menu.php");?> </div>  porém eu fico sem o menu.

Seguem os arquivos:

galeria_de_fotos.php

<!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=iso-8859-1" />

<title>Fotos</title>

<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/slides.css" rel="stylesheet" type="text/css" />
<link href="css/menu2.css" rel="stylesheet" type="text/css" />


<script src="js/lib/jquery.js" type="text/javascript"></script>
<script src="js/lib/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/lib/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/slides.js" type="text/javascript"></script>

</head>

<body>
<div class="wrapper">

<div class="header">header</div> 

<div id="menu22"> <?php require_once("menu.php");?> </div>

</div> 

<p class="p1">
<a href="#" id="anterior">Anterior</a>

<span id="pager"> </span>

<a href="#" id="proximo">Proximo</a>
</p>

</div>

<div class="footer">footer</div>

</div>

</body>

</html>

__________________________________________________________

layout.css

*{margin: 0px; padding:0 px; font-family: Arial, Helvetica, Sans-serif }

.wrapper{width: 880; min-height:700px; border:#800000 solid 1px; margin:0px auto 0px auto; padding: 0px; background-color: #FFF;}

.header{width: 868; height:80px; border:#800000 solid 1px; padding:5px; margin:0px 80px 0px 80px; background-color:#FFF;}

#menu22{width: 868; height:150px; border:#800000 solid 1px; margin-bottom: 0px; background-color:#FFF;
margin:0px 80px 0px 80px; }

.content{width: 478; height:1400px; border:#800000 solid 1px; background-color:#000;
margin:0px 80px 0px 80px;}

.footer{width: 868; height:40px; border:#800000 solid 1px; background-color:#FFF;
margin:0px 80px 0px 80px;}

______________________________________________________________

menu.css

.menu111{
width:868px;
height:auto;
margin:0;
float:left;

}
.menu111 ul{
list-style:none;
font-size:18px;
font-family:"Arial";
margin:0;
padding:0px;
height:40px;
overflow:hidden;
}
.menu111 ul li{
float:left;
}
.menu111 ul li a, .menu111 ul li span{
width:100px;
padding:10px 20px;
height:20px;
color:#FFFFFF;
background:url(../imgs/menu_1.gif) repeat-x;
text-decoration:none;
overflow:hidden; 
text-align:center;
}

.menu111 ul li span{
display:block;
cursor:pointer;
}

.menu111 ul li a{
float:left;
background:url(../imgs/menu_1.gif) repeat-x left bottom;
color:#000000;
}

______________________________________________________

slides.css

.slides{
width:451px;
height:297px;
margin: 100px auto 0px auto ;
overflow:hidden; 
}

p.p1{

text-align:center;
color:#00C;
}

a{
text-decoration:none;
color:#00C;
}

a:hover{color:#FFF;}

__________________________________________________

menu.js

$(document).ready(function(){

$('.menu111 ul li').prepend('<span></span>');
$('.menu111 ul li').each(function(){
var texto = $(this).find('a').text();
$(this).find('span').text(texto);
});

$('.menu111 ul li').hover(function(){
$(this).find('span').stop().animate({
marginTop:"-40px"
},400);
},function(){
$(this).find('span').stop().animate({
marginTop:"0px"
},300);
});

});

_____________________________________________________________

slide.js

$(function(){

$(".slides ul").cycle({
fx:'fade',
speed: 2000,
timeout: 3000,
prev: '#anterior',
next: '#proximo',
pager: '#pager'

})

})

___________________________________________________________________

menu.php

<!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=iso-8859-1" />
<title>Untitled Document</title>

<link href="css/menu.css" rel="stylesheet" type="text/css" />

<script src="js/lib/jquery.js" type="text/javascript"></script>
<script src="js/lib/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/lib/jquery.validate.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>

</head>

<body>
<div class="menu111">
<ul>
<li><a class="a1" href="#">Home</a></li>
<li><a class="a1" href="#">Serviços</a></li>
<li><a class="a1" href="#">Fotos</a></li>
<li><a class="a1" href="#">Contato</a></li>
</ul>

</div>

</body>
</html>

Desde já eu agradeço pela atenção!!

Otávio95 · Fevereiro 27, 2013

Consegui resolver o problema usando jQuery.noConflict();

o código do arquivo slide.js era assim:

$(function(){
  $(".slides ul").cycle({
    fx:'fade',
    speed: 2000,
    timeout: 3000,
	prev: '#anterior',
	next: '#proximo',
	pager: '#pager',

  })
})



usando o jQuery.noConflict(); ficou assim:

var $j = jQuery.noConflict();
 $j(function(){
   $j(".slides ul").cycle({
    fx:'fade',
    speed: 2000,
    timeout: 3000,
	prev: '#anterior',
	next: '#proximo',
	pager: '#pager',

  })
})

Obrigado à todos que tentaram me ajudar!! Abraços!!

Entrar

Arquivado

Problema de conflito com ajax

Recommended Posts

Otávio95 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Otávio95 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oriantação - Java Netbeans Componentes Template AdminLTE

Orientação - Codificação Caracteres Especiais em Java

Não consigo carregar imagem do captcha no meu formulário

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante