Creare "more" button

di il
2 risposte

Creare "more" button

Salve,
sto costruendo un sito web (al momento non ancora online) ed ho bisogno di una mano a sviluppare il codice javascript e ajax per creare un more button, cioè per intenderci un button tipo quello di fb "vedi post precedenti". Ho trovato questo codice su internet molto interessante (non conosco molto di javascript, l'ho imparato da autodidatta per qeusto ho cercato il codice) http://www.9lessons.info/2009/04/twi...th-jquery.htm

Purtroppo non mi funziona completamente...io lo utilizzo per visualizzare in ordine temporale dei contest, che potete immaginare come i post di fb e che io visualizzo tramite le funzioni php "query" (perdonate la mancanza di fantasia) e "mostra_altro_contest"..ma ho problemi a far funzionare il codice javascript.. potreste darmi una mano a capire dove sbaglio?

Allora questa è la mia prima pagina dove faccio comparire i primi due contest:

<script type="text/javascript" src="more.js"></script> 	


<div style="width:500px; height:50px">
  
  
  <div class="con">
  

<?php 
	$limit=$limit+1;
	
	$row2=query($limit,2);	
	mostra_altro_contest($row2);
?>

  </div>
  
 
  <div id="more_updates"></div> <!-- questo div contiene il tasto more è il primo visualizzato dopo i primi due contest, gli altri saranno visualizzati da un div identico nella pag more_ajax -->
   <div class="more" id="contest" >
		<a id="2" class="more" title="Mooore" href="#" style="padding-left: 40%;" >
			   See more contest			   
		</a> 
	</div>

  </div>
La variabile $limit è quella che utilizzo per definire quali contest visualizzare, e me la passo da una pagina all'altra inserendola nell'id del div more (per la prima pagina ho scritto il 2 manualmente).

Il file javascript more.js è :

$(function() {

		$(".more").click(function() {
		   var element = $(this);
		   var limit = element.attr("id");
		   
		$("#contest").html('<img src="more_button/ajax-loader.gif" />');
			$.ajax({
			type: "POST",
		  url: "more_ajax.php",
		   data: "limit="+ limit,
		  cache: false,
		  success: function(html){
			 $("#more_updates").append(html);
			 $(".more").remove();
			
			}
		});

			return false;
		});

	});
Fino a qui tutto bene, quando clicco sul div con classe "more" viene richiamato lo javascript qui sopra che mi porta correttamente alla pagina more_ajax.php, mi rimuove il vecchio tasto more $(".more").remove(); e ne appende uno nuovo $("#more_updates").append(html);

La pagina more_ajax.php è:

<script type="text/javascript" src="more2.js"></script>
 	
<?php
function query($int,$int2)
	{
		$select_contest="SELECT * FROM contest WHERE time_out > now() order by time_out limit $int , $int2";
		//echo "$select_contest</br>";
		$risp1=mysql_query($select_contest);
		$row=mysql_fetch_assoc($risp1);
		return $row;
	}
	function mostra_altro_contest($row)
	{
			require("mostra_contest.php");
		
	}
if(isSet($_POST['limit']))
{

$limit = $_POST['limit'];
$limitpiu = $limit + 1;

require("../connessione/connessione.php");
while($row2=query($limit,$limitpiu) AND $limit < $limitpiu)
{
	mostra_altro_contest($row2);
	$limit=$limit+1;

}
if(!$row2)
{
	//echo "distruggo variabile";
	unset ($limit);
}
}

?>

<div style="width:500px; height:50px">
  <div>
  
  <div class="con">



  </div>
  </div>
	
	<div id="more_updates"></div>
	<div class="more2" id="contest">
		<a id="<?php if(isset($limit)) echo $limit; ?>" class="more2" title="Follow" href="#" style="padding-left: 40%;">
			   See more contest
		</a> 
	</div>
	
	</div>
Il file more2.js è quasi identico al precedente:

$(function() {
//More Button
$('.more2').live("click",function() 
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');

$.ajax({
type: "POST",
url: "more_ajax.php",
data: "limit="+ ID, 
cache: false,
success: function(html){
$("#more_updates").append(html);
$(".more2").remove();
}
});
}
else
{
$("#more_updates").html('The End');

}


return false;


});
});
Ma è proprio questo che non mi funziona: dopo che il file More.js ha rimosso il vecchio div more e aggiunto quello nuovo, anche questo file more2.js rimuove il vecchio div more2 , richiama la pagina more_ajax MA NON mi aggiunge il nuovo DIV MORE_UPDATES e non riesco a capire perchè!!
Ho provato lo stesso codice da solo creando un db di prova e mi funziona perfettamente....spero di non avervi chiesto troppo...

Se non sono stata chiara perdonatemi..chiedete e vi risponderò!!

2 Risposte

  • Re: Creare "more" button

    Ho visto che usi jquery quindi potresti usare tranquillamente load invece di ajax che ha una sintassi piu simplice e fa molte cose in automatico.
    http://api.jquery.com/load
    provo a montare il tuo codice e vedo se trovo l'errore.
  • Re: Creare "more" button

    Mi manca il db quindi mi da una pagina bianca, ma ho visto l'errore che se non ho capito male quello che vorresti e' causato semplicemente dall'ordine dell'esecuzione del codice, e poi jquery quando usa le classi rimuove tutti gli elementi di quella classe all'interno del tuo documento, quindi se fai conto che dopo aver caricato il tuo html recuperato da ajax avresti nel documento 2 elementi con classe .more che il remove elimina entrambe. Per rimuovere tranquillamente solo l'elemento da dove hai cliccato basta che fai $(this).remove(), in quanto this fa riferimento esatto al tuo bottone da rimuovere. Ma oltre a questo all'inizio del tuo click hai dichiarato anche elment che puo essere usato per questo scopo. In alternativa inverti le righe dove usi append e remove.
    Magari provali alternativamente entrambi e poi fammi sapere come va, e forse potresti avere problemi nel click dei .more aggiunti dopo, se dovesse essere cosi devi aggiungere una copia esatta del gestore di eventi .click alla fine della sezione success. Non sono sicuro che serva perche' non ho mai provato a vedere se l'evento onload venga richiamato dopo il caricamento di ajax.
    Programmare richiede esperienza sul flusso di esecuzione che e' molto importante, potresti provare a fare degli esercizi e come in questo caso devi cercare di simulare con l'aiuto di un disegno quello che sta succedendo riga per rida, e quando si incontrano dei cicli vanno eseguiti tutti per correttezza.
Devi accedere o registrarti per scrivere nel forum
2 risposte