Filoweb.it

Simulare Carica Altro con Jquery

FB TW whatsapp RSS FEED News letter

Simulare Carica Altro con Jquery

Visualizzare l'esempio a questo link


I siti web moderni preferiscono all’impaginazione dei risultati delle query il caricare sulla stessa pagina altri risultati (il famoso Carica altro) tramite la pressione di un tasto/link o tramite il raggiungimento della fine pagina.
Tra i vari metodi disponibili il più semplice lo si ottiene tramite jquery e si può adattare a molti script e linguaggi.
Per fare questo usiamo due metodi che ci offre il frameworks jquery: .append e .load.
Il metodo .append serve per poter accodare un contenuto all’interno dell’elemento al quale è associato.
Il metodo .load carica, invece, il contenuto di un file all’interno di un div.
Per quanto riguarda l’html sarà sufficiente creare un div al quale assegnamo l’id “contenuto” all’interno del quale carichiamo la nostra pagina con i dati aggiuntivi.

<div id="contenuto"></div>

Per quanto riguarda lo script ci limitiamo a scrivere la funzione che carica la pagina dentro contenuto:

<script>
function aggiungi (pag) {
$('#contenuto').append($("<div>").load("caricaaltro2.aspx?id="+pag));
}
</script>

Nello script abbiamo aggiunto una variabile che passa il numero di pagina nel caso dovessi caricare più pagine.
Posso anche aggiungere la funzione che nasconde il div che mi mostra “carica altri”:


$("#linnk").click(function() {$(this).hide();});

Nella pagina caricata mi limiterò a inserire lo stesso script e lo stesso div.


 

Script completo prima pagina 

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %>

<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>


<style type="text/css">
body { color: #000; text-align:center; background-color: #FFF; }
.quadrati { width:200px; height:200px; margin:2px 2px 2px 2px; display:inline-block; border:#354D46 1px solid; }
img { height:100%; width:auto; max-width:190px; }
</style>
<%dim pag = 2%>
</head>

<body>
<p>CARICA ALTRO ESEMPIO</p>

<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/R06939V9BEM0AWYTUVM5VOQMEP0Q9O.jpg" >
</div>

<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/LN6VNQDBH_NH77SWWRRBP6YJX7BDMQ.jpg" >
</div>

<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/LVXNE6SIG86TAO8YBPBK3Q6A9D5VAF.jpg" >
</div>

<div id="contenitore" style="width:100%;">
<div id="contenuto" style="width:100%;"></div>
</div>

<div id="blinnk"><a href="javascript:aggiungi(<%response.write(pag)%>);" id="linnk" style="width:100%; background-color:#354D46; text-align:center; color:#FFF;" title="Carica tutti" >CARICA ALTRI</a></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#linnk").click(function() {$("#blinnk").hide();});

function aggiungi (pag) {
$('#contenuto').append($("<div>").load("caricaaltro2.aspx?id="+<%response.write(pag)%>));
}
</script>

</body>
</html>


 

 

Script completo 2° pagina

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %>

<!doctype html>
<html >
<style type="text/css">
body { text-align:center; }
.quadrati { width:200px; height:200px; margin:2px 2px 2px 2px; display:inline-block; border:#354D46 1px solid; }
img { height:100%; width:auto; max-width:190px; }
</style>

</head>
<body>
<%
dim pag
pag=request.QueryString("id")
pag=pag+1
%>

 

 

<div id="contenitore">
<h3> questa è la pagina <%response.write(pag)%></h3>
<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/YLAUXHFWF52IBFJC7TJAZ_Z9ESH799.jpg" >
</div>

<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/PA8I4_C_J8GFA808JSS4QVQT9NK2FH.jpg" >
</div>

<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/YLAUXHFWF52IBFJC7TJAZ_Z9ESH799.jpg" >
</div>

<div id="blink<%response.write(pag)%>" style="width:100%; background-color:#293343;"><a href="javascript:aggiungi(<%response.write(pag)%>);" id="linnk<%response.write(pag)%>" style="width:100%; background-color:#354D46; text-align:center; color:#FFF;" title="Carica tutti" >CARICA ALTRI</a></div>

<div id="contenitore" style="width:100%;">
<div id="contenuto" style="width:100%;"></div>
</div>

</div>

<div id="contenitore" style="width:100%;">
<div id="contenuto" style="width:100%;"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#linnk<%response.write(pag)%>").click(function() {$("#blinnk<%response.write(pag)%>").hide();});
function aggiungi (pag) {
$('#contenuto').append($("<div>").load("caricaaltro2.aspx?id="+<%response.write(pag)%>));
}
</script>
</body>
</html>

FB TW whatsapp RSS FEED News letter

filoweb.it è il sito personale di Filippo Brunelli
(c) 2017 Filippo Brunelli
Le immagini ed i testi contenuti nel sito filoweb.it sono di proprietà di Filippo Brunelli salvo diversamente indicato.
L'uso delle immagini e del testo è gratuito per uso personale ed è subbordinato alla citazione della fonte.
Brunelli Filippo declina ogni responsabilità per l'uso che viene fatto delle informazioni presenti nel sito filoweb.it.
X
La tua privacy è importante
Utilizziamo, senza il tuo consenso, SOLO cookies necessari alla elaborazione di analisi statistiche e tecnici per l'utilizzo del sito. Chiudendo il Cookie Banner, mediante il simbolo "X" o negando il consenso, continuerai a navigare in assenza di cookie di profilazione. More info

Tutti
Cookie tecnici
I cookie tecnici sono necessari al fine di "effettuare la trasmissione di una comunicazione su una rete di comunicazione elettronica, o nella misura strettamente necessaria al fornitore di un servizio della società dell'informazione esplicitamente richiesto dal contraente o dall'utente a erogare tale servizio" (art. 122, comma 1 del Codice privacy).
Cookie analitici di terze parti
I cookie analytics sono utilizzati al fine di valutare l'efficacia di un servizio della società dell'informazione fornito da un titolare di un sito, per progettare un sito web o contribuire a misurare il "traffico" di un sito web, ovvero il numero di visitatori ripartiti per area geografica, fascia oraria della connessione o altre caratteristiche.
Cookie di profilazione
Sono cookie che creano profili personalizzati relativi all'utente per finalità di marketing, ad esempio il retargeting o advertising sui social network.