Aggiunta records dinamici dentro un div quando si scrolla

**Mattatore85** · 02-11-2012, 01:29

Ciao ho creato una pagina blog.asp dove carico ulteriori records (oltre quelli presenti) ogni volta che lo scroll arriva alla fine (e tutto funziona):

http://www.mattatore.it/mattatore3/blog.asp

Carico poi blog.asp un div (di nome "blog") della sezione myblog di quest'altra pagina principale:

http://www.mattatore.it/mattatore3/index.asp

ma poi quando scrollo non funziona. Come è possibile?

Ecco il codice di blog.asp

codice:

<%
Set dataNow = Server.CreateObject("ADODB.Connection") 
dataNow.Open ("DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath("/mdb-database/post.mdb"))
'dataNow.execute("SET NAMES 'utf8'")

lastID = Request.QueryString("lastID")
action = Request.QueryString("action")
Set RS999=Server.CreateObject("ADODB.RecordSet")

'We need to include the JS files and other standard HTML files here in order not to load them in every scroll.
If action <> "getLastPosts" Then 
%>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Blog Mattatore</title>
	</head>
	<link rel="stylesheet" href="css.css" type="text/css" />
	





<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
	
	<script type="text/javascript">
	$(document).ready(function(){
		
		$('form#mainForm').bind('submit', function(e){
			e.preventDefault();
			checkForm();
		});
		
		$('input#hostName').focus();
	
		
		function lastPostFunc() 
		{ 
			$('div#lastPostsLoader').html('[img]bigLoader.gif[/img]');
			$.post("blog.asp?action=getLastPosts&lastID="+$(".post:last").attr("id"),
	
			function(data){
				if (data != "") {
				$(".post:last").after(data);			
				}
				$('div#lastPostsLoader').empty();
			});
		};  
		
		$(window).scroll(function(){
			
			
			if  ($(window).scrollTop() == $(document).height() - $(window).height()){
			   lastPostFunc();
			}
		}); 
		
	});
	</script>

	
	
	<body>
	
<%
		'The content loaded when the page is first loaded start
		SQL="SELECT TOP 70 * FROM tabpost ORDER BY ID DESC"
		RS999.Open SQL,dataNOW,3,3
		While Not RS999.EOF
%>
			<div class="post" id="<%=RS999("ID")%>">
			
					<%=RS999("titolo")%>
				
			</div>
		<%
		RS999.MoveNext
		Wend
		RS999.Close
		'The content loaded when the page is first loaded end
		%>
		
		<div id="lastPostsLoader">
	
    
   
	</body>
	</html>
		
<%	
Else
	'When User Scrolls This Query Is Run Start
	getPostsText = ""
	SQL="SELECT TOP 10 * FROM tabpost WHERE ID < "&lastID&" ORDER BY ID DESC"
	RS999.Open SQL,dataNOW,3,3
	While Not RS999.EOF

		getPostsText = getPostsText & "<div class=""post"" id=""" & RS999("ID") & """>"
	
		getPostsText = getPostsText & "" & RS999("titolo") & "</div>"
		

	RS999.MoveNext
	Wend
	RS999.Close
	Response.Write getPostsText 'Writes The Result Of The Query
	'When User Scrolls This Query Is Run End
End If
%>

E questa e la index.asp

codice:

 
<%@LANGUAGE="VBSCRIPT"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Mattatore.it - Il sito di Salvatore De Sortis</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css"  />

<style>
<style>.bigtext { font-size: 11px; }</style>
<style>.bigtext {
    font-family: Helvetica, Arial;
	color:#FFFFFF;
}
.bigtext > div {
    line-height: 0.95em;
}

.bigtext { font-family: 'LeagueGothicRegular'; }</style>
<style>.bigtext-line0 { font-size: 6em; }
.bigtext-line1 { font-size: 4em; }
.bigtext-line2 { font-size: 1.2em; color:#0D0D0D; text-align:right;}
.bigtext-line3 { font-size: 2.3em; color:#0D0D0D; margin-bottom:2px;}
</style>
<style>.bigtext > .bigtext-line1 { line-height: 0.7em; }</style>
</style>

<body>




<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
	
	<script type="text/javascript">
	$(document).ready(function(){
		
		$('form#mainForm').bind('submit', function(e){
			e.preventDefault();
			checkForm();
		});
		
		$('input#hostName').focus();
	
		
		function lastPostFunc() 
		{ 
			$('div#lastPostsLoader').html('[img]bigLoader.gif[/img]');
			$.post("blog.asp?action=getLastPosts&lastID="+$(".post:last").attr("id"),
	
			function(data){
				if (data != "") {
				$(".post:last").after(data);			
				}
				$('div#lastPostsLoader').empty();
			});
		};  
		
		$(window).scroll(function(){
			
			
	if  ($(window).scrollTop() < $(document).height() - $(window).height()-50 ){
			   lastPostFunc();
			}
		}); 
		
	});
	</script>
    
  







<script language="JavaScript">
  //scriviamo i biscottini con le informazioni sulla risoluzione
  document.cookie = "ScreenSize=" + screen.width + "-" + screen.height
 
  //torniamo alla pagina di partenza
  //self.location = "index.asp"
</script>


<script type="text/javascript">



var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>



<%
'Verifichiamo se i cookie sono abilitati
If Not Request.ServerVariables("HTTP_COOKIE") = "" Then
 
  'Leggiamo il cookie e lo memorizziamo in una
  'variabile
  ScreenSize = Request.Cookies("ScreenSize")
 
  'Se il cookie non esiste allora lanciamo
  'il codice javascript che ricava le dimensioni
  'dello schermo e le memorizza nel cookie
  'If ScreenSize = "" OR IsNull(ScreenSize) Then
  '  Response.Redirect "screensize_js.asp"
 ' End If
 
  'Separiamo le due informazioni contenute
  'nel cookie unite dal carattere -
  larghezza = Split(ScreenSize, "-")(0)
  altezza = Split(ScreenSize, "-")(1)
 
 'response.write larghezza
 'response.write "-"
 'response.write altezza
 'response.end
 
  'Cancelliamo il cookie
  Response.Cookies("ScreenSize").Expires = Date - 3
 
'Cookie non supportati
Else
  Response.Write "Spiacenti, i cookie non sono abilitati"
End If
%>
<%if (larghezza/altezza)>1.5 then%>
[img]bg.jpg[/img]
<%end if%>
<%if (larghezza/altezza)<1.5 then%>
[img]bg_quadrato.jpg[/img]
<%end if%>

<%Lfinestra=larghezza-410%>
<script language="JavaScript">
var rightpos = -<%=Lfinestra%>;

function myblogopen(){
	if (rightpos < -10)
	{
		 thediv = document.getElementById("blog");
		 rightpos =rightpos + 10;
		 thediv.style.right = "" + rightpos + "px";
		 if (rightpos < -10){ 
		 setTimeout("myblogopen();", 1); 
	     }
	     else
	     {
		 document.getElementById('myblog').innerHTML = "my blog";
		 setTimeout("myblogopen();", 1);
		 ajaxpage('blog.asp', 'blog');
		 }
	}
}
 
 
function myblogclose(){
	if (rightpos > -<%=larghezza%>)
	{
		 thediv = document.getElementById("blog");
		 rightpos =rightpos - 10;
		 thediv.style.right = "" + rightpos + "px";
		 if (rightpos > -10){ 
		 setTimeout("myblogclose();", 1); 
	     }
	     else
	     {
		 document.getElementById('myblog').innerHTML = "my blog";
		 setTimeout("myblogclose();", 1); 
	     }
	}
} 
 
window.onload = move();
</script>

<div id="blog" style="right:-<%=Lfinestra%>px; width:<%=Lfinestra%>px;">
</div>


    <div id="menusx">
       <div id="logo">
            <div class="bigtext">
                 <div class="bigtext-line1">TDE</div>
                 <div class="bigtext-focus bigtext-line0">MATTATORE</div>
                 <div class="bigtext-line2">Webmaster & Web Designer</div>
            </div>
       </div>
       <div id="menu">
           <div class="bigtext">
             <div class="bigtext-line3">home</div>
             <div id="myblog" class="bigtext-line3">my blog</div>
             <div class="bigtext-line3">photographs</div>
             <div class="bigtext-line3">videos</div>
             <div class="bigtext-line3">contact</div>
           </div>
       </div>
    </div>
    
    
    
</body>
</html>

Graze a tutti

Discussione: Aggiunta records dinamici dentro un div quando si scrolla

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Aggiunta records dinamici dentro un div quando si scrolla

Permessi di invio