Creare "more" button

[ginger]

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/twitter-like-more-button-with-jquery.html

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...:crying:

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

 

[criric]

Ciao,
ho letto che il metodo live() è deprecato dalla versione 1.4 non vorrei che creasse qualche problema
perche lo hai preferito a click() o a bind()?
per il resto non sono riuscito ancora a riprodurre quello che hai scritto, piu tardi o domani ci riprovo

 

[ginger]

Ciao,
ho letto che il metodo live() è deprecato dalla versione 1.4 non vorrei che creasse qualche problema
perche lo hai preferito a click() o a bind()?
per il resto non sono riuscito ancora a riprodurre quello che hai scritto, piu tardi o domani ci riprovo

Oh grazie di avermi risposto!! Beh avevo letto da qualche parte che live fosse deprecato e ho provato a sostituirlo con click...ma non ci sono riuscita!! (Non sono una cima in javascript... )
Ma ti ripeto ho provato il codice prima di inserirlo nel mio sito e funziona!!

 

[ginger]

Oh finalmente ho risolto!!! :mavieni: L'errore sta nel file js!! Quando richiamo il secondo fil javascript, e gli do delle istruzioni, a un certo punto gli dico

$("#more_updates").append(html);
$(".more2").remove();

cioè gli sto dicendo aggiungi il div more_updates e poi rimuovi il div more2...ma non ho fatto caso che il div more_updates era contenuto nel div more2, quindi automaticamente lo cancellava dopo averlo aggiunto!!! Ho invertito le istruzioni, pulito un po il codice e voilà funziona tutto a meraviglia!!

Se qualcuno avesse bisogno di ricreare un codice simile, può contattarmi e (se riesco ) gli do una mano!!

Grazie lo stesso per il vostro sforzo!!

Ps: ho sosituito il live con click!!! Thanx