Creare "more" button

ginger

Nuovo Utente
22 Ott 2012
9
0
0
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:

Codice:
<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 è :

Codice:
$(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 è:

Codice:
<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:

Codice:
$(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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
22 Ott 2012
9
0
0
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

Nuovo Utente
22 Ott 2012
9
0
0
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

HTML:
$("#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!! :D

Ps: ho sosituito il live con click!!! Thanx
 
Discussioni simili
Autore Titolo Forum Risposte Data
Shyson Modificare codice e creare link PHP 0
Cosina Creare bottone delete in form upload PHP 4
Cosina Creare bottone delete in form upload PHP 1
M Creare un campo input select quantità di un numero intero prelevato dal db PHP 3
L Creare una forma geometrica Photoshop 1
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 4
S Libreria PHP per creare file dwg o dxf PHP 0
R Come creare sistema Add to homescreen PHP 3
L Creare un countdown con giorno specifico della settimana PHP 3
W Creare link di una dato Classic ASP 0
W creare file .jar Java 2
M Creare con il Vb 2010 Il Classico Notes di Windows Vista Visual Basic 1
MarcoGrazia Creare una password Snippet Javascript 0
J creare pagina php di prenotazione PHP 5
A Creare un modulo di ricerca avanzata con dreamweaver HTML e CSS 0
INTEROPERABILITY Sviluppatrice/formatrice creare APP Offerte e Richieste di Lavoro e/o Collaborazione 0
L Creare una pagina pre-home WordPress 1
G Creare side-bar non visibile da dispositivi mobile HTML e CSS 0
L creare oggetti da una classe tramite un form Javascript 0
Web93 CREARE SITO WEB COMICS CON WORDPRESS WordPress 0
maxnegri Contare sessioni aperte e creare condizione PHP 1
A Come creare pulsante donazione PayPal HTML e CSS 5
L [CERCO] Creare blog su WordPress con tema Divi Offerte e Richieste di Lavoro e/o Collaborazione 3
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
R [Photoshop] Creare Azione Photoshop 1
F [PHP] creare tabella e tasto cerca PHP 3
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
B [PHP] Creare PDF dopo inserimento dati form PHP 4
A [HTML] Creare sito web per eLearnig HTML e CSS 2
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
Spenalzo Creare tabelle multiple con Access via VBA MS Access 2
R [PHP] Creare sistema random PHP 3
D [PHP] Consigli su come creare form PHP 1
I Creare Qsl radioamatore con testo editabile Presentati al Forum 1
T [PHP] Creare Honeypot per form contatti PHP 10
S [PHP] Creare collegamento filtri di ricerca al database PHP 6
Z Creare VirtualHost Apache2 con PHP? Programmazione 0
max_400 [HTML] Come creare un jpg animata (non gif animata) HTML e CSS 3
A Come creare un framset Sviluppo app per Android 1
T con oop creare un ciclo per una pagina dinamica html con php PHP 3
X [Apache] Creare sito clone/preservare codice sorgente Apache 7
E [PHP] creare temporary table per dati da xml PHP 2
M [MySQL] CREARE UN LINK SU UN DETERMINATO CAMPO DI UNA TABELLA RISULTATO DI UNA QUERY SQL MySQL 3
P [Photoshop CC] Come posso creare quest'effetto - cerchi concentrici Windows e Software 6
R [PHP] creare pagina profilo per ogni utente PHP 4
V [WordPress] Creare una struttura di articoli da una struttura di cartelle WordPress 1
jonnino2004 Sito .it vale la pena creare una versione in inglese? SEO e Posizionamento 1
F [MS Access] Creare [stringa] da caselle combinate MS Access 0
DilanLoi Come creare questo tipo di sito? Mobile Marketing 1
M [PHP] Creare un menu a tendina con pdo PHP 18

Discussioni simili