$.ajax({url:"y.php",success:function(result){
$("#content").html(result);
$('#mycarousel').jcarousel();
$("#naglowek_1").fadeIn(1500);
}});
Po naciśnięciu powinien przeładować się ten fragment strony i powinny uruchić się te funkcje i OK
problem polega na tym że działa to tylko raz i trzeba odświeżyć stronę bo funkcja uruchamia się $(doument).ready(function(){});
Próbowałem zrobić trzy takie bloki co pewnie nie jest dobrą praktyką ale żaden z nich nie działa...
$(document).ready(function(){
$(#btn_1).delegate(function(){
$("#button_1").click(function(){
$.ajax({url:"1.php",success:function(result){
$("#content").html(result);
$('#mycarousel').jcarousel();
$("#naglowek_1").fadeIn(1500);
}});
});
});
});
Zanlazłem w necie przykład delegowania nasłuchów przez jQ ale nie panuję nad tym (delegate i parametry do switcha skąd e
?)$(document).ready(function(){
$(?div.grid_4?).delegate(?a?, ?click?, menuHandler); //delegowanie nasluchu
});
function menuHandler(e) {
var Btn_Id = e.target.id; //id kliknietego przycisku
switch (Btn_Id) {
case ?button_1? :
$.ajax({url:"1.php",success:function(result){
$("#content").html(result);
$('#mycarousel').jcarousel();
$("#naglowek_1").fadeIn(1500);
}});
break;
case ?button_2? :
$.ajax({url:"2.php",success:function(result){
$("#content").html(result);
$('#mycarousel').jcarousel();
$("#naglowek_1").fadeIn(1500);
}});
break;
case ?button_3? :
$.ajax({url:"3.php",success:function(result){
$("#content").html(result);
$('#mycarousel').jcarousel();
$("#naglowek_1").fadeIn(1500);
}});
break;
default:
alert(?Nie zaimplementowano obsługi tego przycisku!!?);
}
}
Tak wygląda index.php a puki co treści wymieniane przez ajax (div id="content') różnią sie tylko kolejnośiami zdjęć
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<head>
<title>aaa</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="robots" content="all" />
<meta name="revisit-after" content="7 Days" />
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/960.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/skin.css" media="screen" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/mintAjax.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<img id="linia" src="images/linia.jpg" width="100%">
<div class="container_12">
<div class="grid_12">
<a id="logo" href="index.php"><img src="images/logo_white.jpg"></a>
</div>
<div id="content"> <!-- content -->
<div id ="btn_1"class="grid_4">
<a id="button_1" class="block-title" style="border: 2px solid black;">Serwisy</a>
</div>
<div id="btn_2" class="grid_4">
<a id="button_2" class="block-title"> Strony </a>
</div>
<div id="btn_3" class="grid_4">
<a id="button_3" class="block-title">Wizytówki</a>
</div>
<div class="grid_12">
<p id="naglowek_1" class="block-text" style="display:none;background-color:white; color:blue;">
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer
</p>
</div>
<div class="grid_12" style="margin-top:20px;">
<div id="wrap">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="images/bbb.jpg" /></li>
<li><img src="images/ccc.jpg" /></li>
<li><img src="images/fff.jpg" /></li>
<li><img src="images/bbb.jpg" /></li>
<li><img src="images/ccc.jpg" /></li>
<li><img src="images/fff.jpg" /></li>
<li><img src="images/bbb.jpg" /></li>
<li><img src="images/ccc.jpg" /></li>
<li><img src="images/fff.jpg" /></li>
</ul>
</div>
</div>
<div class="grid_12">
<p class="block-text" style="color:blue;">
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer
</p>
<div>
</div><!-- end content -->
</div>
</body>
</html>
Jeśli znalazła by sie jakaś zdolna dusza z chwilką wolnego czasu t obył bym wdzięczny.
