Paginazione PHP in jQuery UI Tabs

[JtothaX]

Amici, trattandosi di un topic misto spero di averlo postato nella sezione più adeguata.
Cercherò di essere sintetico. Ipotizziamo una sezione Portfolio per mettere in vetrina i propri lavori. Suddivido le tipologie di lavoro svolto, sito dinamico, loghi, grafiche varie etc con i jQuery UI Tabs. Settaggi fatti. Procedo.

Ogni tab conterrà il tot di rispettivi lavori. Siccome sono tanti, li faccio sistemare a botte di 4 per volta chiamandoli dal database e facendogli fare una semplice paginazione automatica. Il problema è che nel tab aperto poi non scorre le pagine.
Mi sono dimenticato di settare qualcosa? C'è un errore mio di fondo o altro?

In caso se occorre vi posto i frammenti del codice.
Grazie ancora, siete i più giusti!!

 

[JtothaX]

Nessuno, nessuno, nessuno?!
Non sono ancora riuscito a venirne fuori, uff..

 

[flameseeker]

Ciao, JtothaX.

Per capire meglio, faccio un riepilogo:

• hai creato una sezione portfolio del tuo sito con le tabs di JqueryUI;
• in ogni tab c'è una galleria composta da X elementi che poi scorri tramite dei link che ti conducono alla pagina scelta;
• le tab di JqueryUI funzionano ma poi non riesci a navigare le pagine della galleria aperta in una qualsiasi tab.

E' corretto ? Se si, la galleria si apre in un iframe, tramite AJAX o dovrebbe ricaricare per intero la pagina del portfolio ? (Per capire il tipo di logica con cui stai elaborando la questione)

Se si apre in un iframe o ricarica la pagina del portfolio, dovresti controllare che risulti esatta sia la query, sia il calcolo della paginazione degli elementi.
Se si apre in un div, verifica tramite gli strumenti da sviluppatore (firebug, dragonfly etc) che l'evento assegnato ai link funzioni correttamente.

 

[JtothaX]

Che amaretto...

Ciao! Wa, qualcuno in mio soccorso.
La pagina è portfolio.php che ha al suo interno i jQuery UI Tabs.
Ogni tab (un div, niente frame, indicato poi come portfolio.php#tab-1 etc) contiene al suo interno una query per richiamare dal database i lavori dalla rispettiva tabella. Chiamati a botte di quattro per pagina. La prima pagina va, quando clicko sul 2 per scorrere la seconda pagina del tab aperto, non carica un beato niente!!

:crying::crying::crying:

 

[JtothaX]

Posto direttamente il frammento di codice che mi gestisce il singolo tab. Una volta aperto il tab in questione visualizza tramite Query i primi 4 risultati come richiesto, sotto compare anche il paginatore con i link alle altre pagine ma le pagine non le scorre. Manco refresha, per dire. Eppure con lo stesso meccanismo gestisco una piccola sezione di aggiornamenti che funziona in tutta tranquillità...

<?php
	// Query per il conteggio
	$sql_conta = "SELECT * FROM tabella";
	$query_conta = mysql_query($sql_conta);
	$conteggio = mysql_num_rows($query_conta);
						
	// Gestione del limite
	if (!isset($_GET['limit']) || $_GET['limit'] == '') {
		$limit = 0;
	}
	  
	else {
		$limit = $_GET['limit'];
	}
	 
	$end = 4;
	
	
	
	// Normale query per elencare le blog entry
	$sql = "SELECT * FROM tabella ORDER BY id_progetto DESC LIMIT $limit, $end";
	$query = mysql_query($sql);
	
	while($array = mysql_fetch_array($query)) {
		
		echo "<div class=\"progetti\">";
			echo "<img border=\"0\" align=\"left\" src=\"$array[img]\" width=\"165\" height=\"165\" />";
			echo "<div class=\"specifiche\">";
				echo "<h2 class=\"pontano\">$array[a]</h2>";
				echo "<a class=\"open\">$array[b]</a>";
				echo "<h3 class=\"pontano\">$array[c]</h3>";
				echo "<p class=\"open\">$array[d]</p>";
			echo "</div>";
		
		echo "</div>";
	}

?>


<!-- Paginatore -->		
<?php		
		
		// Paginazione
		$pagine = ($conteggio / $end);
				
		echo "<div class=\"bench\" id=\"paginatore\">Pagina <a href=\"index.php?modulo=portfolio#tabs-1\">&laquo;</a>";
		
		for ($i = 1; $i <= $pagine; $i++) {
			$pag = ($i * $end) - $end;
			echo "<a href=\"index.php?modulo=portfolio#tabs-1&limit=$pag\">$i</a>";
		}
		
		if ($conteggio % $end > 0) {
			$pag = ($i * $end) - $end;
			echo "<a href=\"index.php?modulo=portfolio#tabs-1&limit=$pag\">$i</a>";
		}
		
		echo "<a href=\"index.php?modulo=portfolio#tabs-1&limit=$pag&lastpag=ultima\">&raquo;</a></div>";
	
?>
<!-- fine Paginatore -->

 

[flameseeker]

Il motivo per cui non ricarica la proprio la pagina quando clicchi su di un link è per come li hai realizzati: scrivendo #tabs subito dopo modulo=portfolio stai comunicando al browser di puntare un elemento nella pagina corrente e non di navigarne una nuova.

Prova a sistemare i links spostando la parte col cancelletto alla fine, ad esempio:

echo "<a href=\"index.php?modulo=portfolio&limit=$pag#tabs-1\">$i</a>";

 

[JtothaX]

<3 <3 <3

Awww...

Grazie mille, Flame!
Sei il mio idolo, sei il capo!!

L'errore mio nello specifico dove stava? Perché io per generare i link di paginazione ragionavo così, tipo:
...sono in una index che ruota a moduli... index.php?modulo=portfolio ...
...il tabs sarà quello selezionato al momento... index.php?modulo=portfolio#tabs-1

Quando apro il tabs, dentro al tab, vado a fare le mie cosine con PHP e MySQL...etc, etc...
E quindi scrivevo il link in quel modo...voglio dire, la parentela che indico (se erro, scusate in anticipo) con il cancelletto # non comincia proprio col dirgli il tab selezionato nella pagina? E poi, da lì, fai la paginazione e il resto...

(Tanto per concludere il topic in modo completo se un giorno ci tornano altri)

 

[JtothaX]

Errata corrige di cui mi accorgo ora.
Scorre le pagine ma... se sono ad esempio alla pagina 2 di un dato tab e poi voglio cambiare, mi porta al tab nuovo ma parte dalla pagina 2, dove ero rimasto prima, solo che nel nuovo tab selezionato...

 

[flameseeker]

Il browser tratta la url e il cancelletto in due tempi differenti e, quando richiede la pagina al server, prende dal link fornito solo questa parte: index.php?modulo=portfolio#tabs.
Solo successivamente al ricevimento del responso utilizza la parte col cancelletto, di conseguenza se inserisci quella parte prima della fine della url il browser non invierà i dati che ti aspetti di trovare.

Se la pagina richiesta è già stata aperta, inoltre, la presenza del cancelletto ferma il browser dal fare altre richieste al server limitandosi a cercare l'elemento html identificato da quel valore nella pagina corrente (è questo il motivo per cui non ti si ricaricava in nessun modo al click).

 

[flameseeker]

Errata corrige di cui mi accorgo ora.
Scorre le pagine ma... se sono ad esempio alla pagina 2 di un dato tab e poi voglio cambiare, mi porta al tab nuovo ma parte dalla pagina 2, dove ero rimasto prima, solo che nel nuovo tab selezionato...

E' normale, perchè tutte le gallery si basano sugli stessi parametri che passi via get, la soluzione sarebbe quella di ricaricare la pagina con dei valori di reset quando cambi tab, per intenderci il link a tab-2 (ma anche per le altre) deve essere tipo..

<a href="index.php?modulo=portfolio&limit=0#tabs-2">Tab 2</a>

Devi inoltre introdurre un nuovo parametro per poter dire alle query di selezionare solo gli elementi appartenenti ad una specifica tab, di conseguenza sul database dovresti avere una colonna per poter identificare cosa mostrare in quale tab.

 

[JtothaX]

Avevo già provato anche in quel modo ma, non so perché, saltava tutta la baracca.
Praticamente facendo quello si sdoppiava lo slider che avevo messo in testata (Innerfade, per la cronaca), solo che questa seconda volta veniva a pezzi. Non so perché. Ho risolto il problema mandando jQuery a quel paese e giocandomela con pochi click insieme a PHP.

Visto che siamo quasi in tema ne approfitto: c'è possibilità di evitare il refresh ogni volta che aggiorna l'URL col link dinamico?
Evitare il refresh quando per esempio passa da #modulo&pagina=2 a #modulo&pagina=3 ...perché magari per l'utente medio manco se ne accorge. Ma per chi ha occhio forse è un poco fastidioso, passatemi il termine...


Grazie ancora

 

[flameseeker]

Avevo già provato anche in quel modo ma, non so perché, saltava tutta la baracca.
Praticamente facendo quello si sdoppiava lo slider che avevo messo in testata (Innerfade, per la cronaca), solo che questa seconda volta veniva a pezzi. Non so perché. Ho risolto il problema mandando jQuery a quel paese e giocandomela con pochi click insieme a PHP.

Visto che comunque dovevi ricaricare tutta la pagina è la soluzione migliore, così gestisci le tab da visualizzare direttamente con php.

Visto che siamo quasi in tema ne approfitto: c'è possibilità di evitare il refresh ogni volta che aggiorna l'URL col link dinamico

L'unico modo è farlo in maniera asincrona, quindi o con un iframe o con Ajax.

 

[JtothaX]

L'unico modo è farlo in maniera asincrona, quindi o con un iframe o con Ajax.

Che però mi sembra di capire non faccia bene al SEO...
Quindi tanto varrebbe lasciare così come sta, in sostanza...

 

[flameseeker]

Nulla ti vieta di implementare entrambi i metodi, in questo modo i client che non dispongono (o non hanno abilitato) javascript navigano lo stesso la tua galleria, chi ha javascript abilitati si ritrova la comodità di Ajax.