[Giacomo SantinPartecipante]

Salve a tutti.
Sto costruendo un sito a scopo personale/didattico, premetto che di jquery sò pochissimo, quello che ho imparato l’ho appreso utilizzandolo per vari scopi.
nella pagina home il contenuto viene caricato tramite jquery ajax.
il codice caricato sono pagine php, che talvolta includono altre pagine php.
Utilizzo gia questa funzione per caricare i contenuti all’interno di un box, e funziona ogni volta che clicco sulle icone stabilite.
La stessa funzione la utilizzo per caricare questi contenuti (in pratica un altra pagina, ma dato che cambia solo il box centrale, carico solo quella)
La prima volta, funziona tutto egregiamente, ma una volta caricato il primo contenuto, non è piu possibile caricarne altri, lo script smette di funzionare.
Il menu che attiva lo script ed il caricamento è un file php incluso in tutte queste pagine/contenuto da caricare.
Non riesco a capire perchè funziona solo 1 volta.

<ul class="menu">
	<li class="contenuto" id="prossimamente">Prossimamente</li>
	<li class="contenuto" id="eventi">Eventi</li>
	<li class="contenuto" id="cine-club">Cine-club</li>
	<li class="contenuto" id="contatti">Contatti</li>
</ul>

$(function() {
	$('li.contenuto').click(function(){
	var page=$(this).attr('id');
	if(page == 'prossimamente')  //chiamata a prossimamente
	{
	delay(function() {
	$('#content').load('include/prossimamente.php');
	}, 300);
	$('#content').html('');
	}

L’if della funzione jquery è il primo in esempio, ne uso altri che richiamano pagine diverse. ovviamente queste pagine includono a loro volta il menu. che mi serve per richiamare altre pagine, o anche la stessa.

[jqueryitaliaAmministratore]

Se le pagine che includi includono a loro volta il menù non puoi utilizzare “click()”,
ma dovrai utilizzare “on()”, in quanto il menù non è presente nel DOM.

Dovrai quindi scrivere:

$(function() {
    $('.menu').on('click', '.contenuto', function(){
       ...
       ...
       ...
       ...
    });
});

Buon lavoro!

[Giacomo SantinPartecipante]

grazie mille, provo subito

Lo stesso problemi mi si presenta con un paragrafo con classe specifica per richiamare una funzione che personalizza lo scroll-bar
deduco che il problema sia lo stesso.
Però essendo una funzione di un plugin, non sò come modificarla per farla funzionare.

//funzione per scroll personalizzata
(function($){
$(window).load(function(){
$(“.scroll”).mCustomScrollbar();
});
})(jQuery);

posso utilizzare sempre.on e mettere .load dentro alla prentesi, come per il .click?

[jqueryitaliaAmministratore]

Modificare un plugin può non essere facile, soprattutto per chi come te ammette di non conoscere bene jQuery.

Ti consiglio quindi di modificare le singole pagine, in modo da caricare esclusivamente il contenuto delle stesse e creando un contenitore che includa l’header dell pagina con il menu (in modo da poter riutilizzare la funzione click) ed il footer con tutto il codice javascript 😉

[Giacomo SantinPartecipante]

in realtà è proprio cosi che ho strutturato il tutto.
le singole pagine contengono soltanto il codice dei contenuti, che viene inserito dentro ad un div tramite ajax.
la pagina madre rimane sempre index.php con header e tutto il javascript.
ma a quanto pare c’è qualche problema di comunicazione tra pagine incluse e il jquery.
ho provato ad usare il tuo suggerimento per un link che doveva riportarmi alla pagina di default, ma non riesco a farlo funzionare (forse sbaglio qualcosa)
ho dovuto rimettere href=”index.php” per riaggiornare la pagina e quindi visualizzare il contenuto di default. ma è una soluzione che non mi piace (renderebbe inutile tutto lo sforzo fatto fino ad ora per evitare caricamente di pagine intere)

cmq grazie per l’aiuto.
forze appena ho tempo, dovrei soffermarmi a studiare meglio i fondamenti di jquery.
mi son messo ad utilizzarlo per facilitarmi il lavoro e mi son fatto prendere la mano, senza studiarmelo a dovere

[jqueryitaliaAmministratore]

Ma le singole pagine cosa contengono? Solo un contenitore con il contenuto o tutta la struttura?
Perché altrimenti è solo un problema di codice.
Se vuoi posta qui il codice dell pagina index.php utilizzando le istruzioni che trovi qui sopra (quelle relative all’inserimento di codice nei post) in modo che ci possa dare un’occhiata 😉

[Giacomo SantinPartecipante]

nono, l’unica pagina ad avere la struttura completa è la index.
le altre sono tutte inclusioni di pezzi di codice, talvolta che includono altri pezzi di codice. ovviamente con php.

index.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=utf-8" />
<link rel="stylesheet" href="css/stile.css" type="text/css">
<link rel="stylesheet" href="css/reset.css" type="text/css">
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link href="script/scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
	<script src="script/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {//funzione per attivare pop-up del film
    $(".pop-up").hide(); //Nascondo tutti i contenuti
    $(".pop-up:first").show(); //Mostro il primo contenuto (contenuto del primo tab)
    $("ul.film_icon a").click(function() {
        $(".pop-up").hide(); //Nascondo tutti i contenuti
        var tabAttivo = $(this).attr("href"); //Prendo il valore dell'attributo href del tab per attivare il realtivo contenuto
        $(tabAttivo).fadeIn(); //Faccio un Fade in per mostrare il contenuto dell'ID appena trovato
        return false;
    });
});
</script>
<?php
	include_once "include/php/alert.php"; // menu
?>
	<div id="container">
	<div id="index">
		<ul id="social_button">
		<a href="//www.facebook.com"">
		<li class="social_button">
		</a>
		<a href="//www.twitter.com"">
		<li class="social_button">
		</a>
		<a href="//www.rss.com"">
		<li class="social_button">
		</a>
		<div style="clear:both"></div>
		<ul id="user_button">
		<li class="user_button">
		<li class="user_button">
		<li class="search_button">
		<div style="clear:both"></div>
		<?php
		include_once "include/menu.php"; // menu
		?>
		<div id="content">
		<?php
		include_once "include/home.php";//contenuto di default = scheda film + pop-up
		?>
		</div><!--fine content-->
	</div><!--fine index-->
	</div><!--fine container-->
<script>
var delay = (function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();
$(function() {
	$('li.contenuto').click(function(){
	var page=$(this).attr('id');
	if(page == 'dettagli_icon') //chiamata contenuto dettagli per home.php
	{
	delay(function() {
	$('#contenuto').load('include/scheda_film.php');
	}, 700);
	$('#contenuto').html('');
	}
	if(page == 'trailer_icon') //chiamata contenuto trailer per home.php
	{
	delay(function() {
	$('#contenuto').load('include/trailer.php');
	}, 700);
	$('#contenuto').html('');
	}
	if(page == 'prossimamente')  //chiamata a prossimamente
	{
	$('#content').load('include/prossimamente.php');
	}
	if(page == 'eventi')  //chiamata a pagina eventi
	{
	$('#content').load('include/eventi.php');
	}
	if(page == 'cine-club')  //chiamata a pagina cine.club
	{
	$('#content').load('include/cine-club.php');
	}
	if(page == 'contatti')  //chiamata a pagina contatti
	{
	$('#content').load('include/contatti.php');
	}
	if(page == 'in_sala')  //chiamata a pagina home
	{
	$('#content').load('include/home.php');
	}
	});
});
//funzione per scroll personalizzata
     (function($){
        $(window).load(function(){
            $(".scroll").mCustomScrollbar();
        });
    })(jQuery);
</script>
</body>
</html>

home.php
caricata di default, che include a sua volta dettagli(scheda_filmp.php) o trailer.php

<div class="main_box">
				<h2>In Sala</h2>
				<ul class="film_icon">
				<a href=""#orari""><li value="orari"></a>
				<a href=""#prezzi""><li value="prezzi"></a>
				<a href=""#commenti""><li value="commenti"></a>
				<li class="contenuto" id="dettagli_icon">
				<li class="contenuto" id="trailer_icon">
				<div id="contenuto">
				<?php
				include_once "scheda_film.php";
				?>
				</div>
			</div><!--fine main-box-->
			<div class="cont-pop-up">
			<div class="pop-up" id="orari">
				<div class="bg_info">
				<h4>Orari</h4>
				<p>luglio 2013</p>
				<div id="lista_orari">
					Lun 22<span>21.30</span>
					Mar 23<span>21.30</span>
					Mer 24<span>21.30</span>
					Gio 25<span>21.30</span>
					Ven 26<span>21.30</span>
					Sab 27<span>21.30</span>
					Dom 28<span>21.30</span>
				</div>
				</div>
			</div>
			<div class="pop-up" id="prezzi">
				<div class="bg_info">
				<h4>Prezzi</h4>
				<p>luglio 2013</p>
					<div id="lista_prezzi">
					Mercoledi:<span>5.00 €</span>
					</br>
					<h4>2d</h4>
					Intero:<span>7.50 €</span>
					Ridotto </br><span class="small">(under 12)</span>:<span>6.00 €</span>
					Ridotto </br><span class="small">(over 65)</span>:<span>4.50 €</span>
					</br>
					<h4>3d</h4>
					Intero:<span>8.50 €</span>
					Ridotto:<span>7.00 €</span>
				</div>
				</div>
			</div>
			<div class="pop-up" id="commenti">
				<div class="bg_info">
				<h4>Commenti</h4>
				<p>luglio 2013</p>
				</div>
			</div>
			</div><!-- cont-pop-up -->

scheda_film.php

<?php
include_once "php/config.php";
$sql="Select * FROM film WHERE sala='si'";
$risultato= mysql_query($sql, $connessione);
if(!$risultato)
	die("header('location: index.php?alert=1');");
$film = mysql_fetch_array($risultato);
$titolo=$film['titolo'];
$locandina=$film['locandina'];
$voto=$film['voto'];
$durata=$film['durata'];
$genere=$film['genere'];
$attori=$film['attori'];
$regista=$film['regista'];
$trama=$film['trama'];
$extra=$film['extra'];
?>

				<h1><?php echo $titolo; ?></h1>
				<ul class="voto">
				<?php
				for ($i = 1; $voto >= $i; ++$i)
				{
					echo '';
				}
				$dif = 5-$voto;
				$i=1;
				while ($i<=$dif)
				{
					echo '';
					$i=$i+1;
				}
				?>
				<ul class="dettagli">
				Durata:<span><?php echo $durata; ?> min</span>
				Genere:<span><?php echo $genere; ?></span>
				Attori:<span><?php echo $attori; ?></span>
				Regista:<span><?php echo $regista; ?></span>
				<p class="scroll">Trama:<span><?php echo $trama; ?></span></p>
				<a href=""<?php">" target="_blanck">Curiosità ></a>

il tag p di classe “scroll” di questo ultimo script,lo vedi in fondo, è quello con barra personalizzata, che funziona solo al refresh di index.php

[Giacomo SantinPartecipante]

perdonami, devo aver sbagliato qualcosa nel inserire codice. come mai non lo delimita?

[jqueryitaliaAmministratore]

Mancavano le chiusure dei tag pre, ma non preoccuparti: ho sistemato io.

Come primo consiglio: valida il codice HTML!!!
Ho visto a colpo d’occhio parecchi errori del tipo tag di chiusura mancanti e questo può comportare diversi problemi con jQuery…

In serata darò un’occhiata al codice e ti faccio sapere 😉

[Giacomo SantinPartecipante]

che strano. il mio codice và bene. ma qui mancano effettivamente un sacco di tag. addirittura la prima lista di index.php dove dovrebbero esserci i pulsanti dei social network, mancano addirittura le immagini all’interno degli che sono correttamente chiusi.
stesso problema nelle altre pagine. mancano le chiusure di li e il tag img completo.

forse c’è un problema con il quote dei codici?

[Autore]

Post