Infinite pagination
Nadat ik het heb aangepast in mijn situatie werkt het nu niet meer.
De pagination werkt wel maar ik krijg telkens een lege array terug in ajax.php.
De query is correct maar ik denk dat ik ergens geen waarden meegeef. Hoe kan ik die functie controleren? Ik ben nogal nieuw hierin.
(let niet op beveiliging etc..):
javascript
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
var ol = $('#events');
var start = ol.children().length;
if (!ol.hasClass('ended')){
$.get('ajax.php', {'start': start}, function(res){
if (res !== 'end') {
ol.append(res);
}else{
if(!ol.hasClass('ended')){
alert("Geen resultaten meer")
}
}
});
};
}
});
</script>
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
var ol = $('#events');
var start = ol.children().length;
if (!ol.hasClass('ended')){
$.get('ajax.php', {'start': start}, function(res){
if (res !== 'end') {
ol.append(res);
}else{
if(!ol.hasClass('ended')){
alert("Geen resultaten meer")
}
}
});
};
}
});
</script>
ajax.php
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
require_once "/includes/connectie.inc";
require_once "functions.php";
$start = $_GET['start'];
$events = getEvents($start,5);
print_r($events);
?>
require_once "/includes/connectie.inc";
require_once "functions.php";
$start = $_GET['start'];
$events = getEvents($start,5);
print_r($events);
?>
functions.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
require_once "/includes/connectie.inc";
function getEvents($start,$num)
{
$sql = "SELECT v.name,v.residence,v.website,v.street, v.number,
e.startdate,e.title,e.description,e.category,e.starttime, e.endtime,
GetDistance(('{$_POST['latitude']}'), ('{$_POST['longitude']}'), zc.lat, zc.lon) AS dist
FROM venue AS v
JOIN event AS e USING (venue_id)
JOIN zipcode AS zc ON v.zipcode = zc.zipcode
WHERE
GetDistance(('{$_POST['latitude']}'), ('{$_POST['longitude']}'), zc.lat, zc.lon) <= ('{$_POST['range']}')
AND
e.startdate >= ('{$_POST['start']}')
ORDER BY e.startdate,dist LIMIT $start,$num";
$arr = array();
$query = mysql_query($sql);
while ($row = mysql_fetch_assoc($query)){
$arr[]=$row;
}
return $arr;
}
?>
require_once "/includes/connectie.inc";
function getEvents($start,$num)
{
$sql = "SELECT v.name,v.residence,v.website,v.street, v.number,
e.startdate,e.title,e.description,e.category,e.starttime, e.endtime,
GetDistance(('{$_POST['latitude']}'), ('{$_POST['longitude']}'), zc.lat, zc.lon) AS dist
FROM venue AS v
JOIN event AS e USING (venue_id)
JOIN zipcode AS zc ON v.zipcode = zc.zipcode
WHERE
GetDistance(('{$_POST['latitude']}'), ('{$_POST['longitude']}'), zc.lat, zc.lon) <= ('{$_POST['range']}')
AND
e.startdate >= ('{$_POST['start']}')
ORDER BY e.startdate,dist LIMIT $start,$num";
$arr = array();
$query = mysql_query($sql);
while ($row = mysql_fetch_assoc($query)){
$arr[]=$row;
}
return $arr;
}
?>
index.php (hier moet nog aan gewerkt worden ugh..)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
$cnt = getEvents(0,3);?>
<ol id ="events">
<?php
foreach ($cnt as $c):?>
<?php $venue = $c['name'];
$eventid = $c['event_id'];
$originalDate = $c['startdate'];
$newDate = strtotime($originalDate);
$weekdag = strftime("%d", $newDate);
$tekstdag = strftime("%a", $newDate);
$maand = strftime("%B", $newDate);
$jaar = strftime("%Y", $newDate);
?>
<table class='collapsed'border=\"0\" width= 750px align=\"center\" padding=20px>
<tr><td class='tdclear'> </td></tr>
<tr><td class='datum' rowspan=5><b><font size=6px><?php echo $tekstdag?></font></b><br /><font size=3px><?php echo $weekdag?> <?php echo $maand?> </font><br /><?php echo $jaar?><br /></td></tr>
<tr><td> </td></tr>
<tr><td class=tdplaats> <?php echo $c['name']?>, <?php echo $c['residence']?> </td>
<td class=tdimages><a href = 'http://{$row['website']}'title='Website' target='blank'><img class=imgsearch src= images\url.png></a> <a href='https://maps.google.nl/maps?daddr={$row['street']}+{$row['number']}+{$row['residence']}' title='Routebeschrijving'target='blank'><img class=imgsearch src= images\weg.png></td></tr></a>
<tr><td class='titel'> <?php echo $c['title']?></td>
<td class=tdimages2><img class=imgsearch src= images\clock.png title='{$row['starttime']}-{$row['endtime']}'> <a href ''><img class=imgsearch src =images\people.png title='Stuur uitnodiging'></a></td></tr>
<tr><td class='tdclear'> </td></tr>
<tr><td class='tdclear'> </td></tr></table>
<?php endforeach ?>
</ol>
$cnt = getEvents(0,3);?>
<ol id ="events">
<?php
foreach ($cnt as $c):?>
<?php $venue = $c['name'];
$eventid = $c['event_id'];
$originalDate = $c['startdate'];
$newDate = strtotime($originalDate);
$weekdag = strftime("%d", $newDate);
$tekstdag = strftime("%a", $newDate);
$maand = strftime("%B", $newDate);
$jaar = strftime("%Y", $newDate);
?>
<table class='collapsed'border=\"0\" width= 750px align=\"center\" padding=20px>
<tr><td class='tdclear'> </td></tr>
<tr><td class='datum' rowspan=5><b><font size=6px><?php echo $tekstdag?></font></b><br /><font size=3px><?php echo $weekdag?> <?php echo $maand?> </font><br /><?php echo $jaar?><br /></td></tr>
<tr><td> </td></tr>
<tr><td class=tdplaats> <?php echo $c['name']?>, <?php echo $c['residence']?> </td>
<td class=tdimages><a href = 'http://{$row['website']}'title='Website' target='blank'><img class=imgsearch src= images\url.png></a> <a href='https://maps.google.nl/maps?daddr={$row['street']}+{$row['number']}+{$row['residence']}' title='Routebeschrijving'target='blank'><img class=imgsearch src= images\weg.png></td></tr></a>
<tr><td class='titel'> <?php echo $c['title']?></td>
<td class=tdimages2><img class=imgsearch src= images\clock.png title='{$row['starttime']}-{$row['endtime']}'> <a href ''><img class=imgsearch src =images\people.png title='Stuur uitnodiging'></a></td></tr>
<tr><td class='tdclear'> </td></tr>
<tr><td class='tdclear'> </td></tr></table>
<?php endforeach ?>
</ol>
Gewijzigd op 30/06/2012 11:15:31 door N K
Waarom niet gewoon .php? Of bescherm je hem wel op een andere manier?
Geef in een alert de data die je terugkrijgt eens.
Eventueel in ajax.php >> print_r($_GET); om te kijken of je binnenkrijgt wat je opgeeft.
Ik heb een andere naam daarvoor gebruikt maar ik heb nu even connectie aangehouden voor de duidelijkheid.
print_r($_GET) geeft Array ( [start] => 3 ) wat helemaal goed is.
Met andere woorden, je print gewoon de array en probeert dat dan uit te lezen in javascript. Volgens mij gaat dat nooit werken, daarvoor is nu juist JSON uitgevonden. Je kan namelijk niet zomaar een datastructuur vanuit de ene taal gebruiken in de andere. JSON is een standaard formaat dat je wel kan uitwisselen tussen talen.
Om JSON te gebruiken, echo het als volgt in php:
Gebruik dan in javascript (jquery) de functie $.getJSON(). Die functie verwacht de output van de server in JSON formaat en zal dit direct omzetten naar een javascript object. Vervolgens kan je er mee doen wat je wilt.
Gewijzigd op 30/06/2012 11:49:38 door Erwin H
En waar kan ik die $.getJSON() zetten?
Ik heb te weinig kennis van javascript om dit in een keer te snappen.
ik heb nu
<b>ajax.php</b>
Code (php)
1
2
3
4
5
2
3
4
5
<?php
$start = $_GET['start'];
$events = getEvents($start,5);;
echo json_encode( $events );
?>
$start = $_GET['start'];
$events = getEvents($start,5);;
echo json_encode( $events );
?>
(Is dat ook niet logisch als $events niks bevat??)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
<script type="text/javascript">
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
var ol = $('#events');
var start = ol.children().length;
if (!ol.hasClass('ended')){
$.getJSON('ajax.php', {'start': start}, function(res){
if (res !== 'end') {
ol.append(res);
}else{
if(!ol.hasClass('ended')){
alert("Geen resultaten meer")
}
}
});
};
}
});
</script>
?>
<script type="text/javascript">
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
var ol = $('#events');
var start = ol.children().length;
if (!ol.hasClass('ended')){
$.getJSON('ajax.php', {'start': start}, function(res){
if (res !== 'end') {
ol.append(res);
}else{
if(!ol.hasClass('ended')){
alert("Geen resultaten meer")
}
}
});
};
}
});
</script>
?>
Overigens kan je het php script zoals je dat aanroept vanuit jquery ook rechtstreeks in je browser aanroepen, dan kan je precies zien wat het terugstuurt.
Vervolgens moet je wel zorgen dat je de data correct aanspreekt in jquery. Zoals gezegd krijg je een javascript object terug uit $.getJSON(), dus
Code (php)
1
2
2
if (res !== 'end') {
ol.append(res);
ol.append(res);
Zal beiden niet werken. Hoe wel, dat ligt aan hoe je data eruit ziet.
Run het script dus eens in de browser (inclusief de juiste get parameters) en post dat eens hier, dan komen we vast wel iets verder.
Als ik ajax.php?start=3 uitvoer in de browser krijg ik wel een aantal notices:
Betekent dit nu dat deze waarden niet in de query meegegeven worden?
Notice: Undefined index: latitude in C:\xampp\htdocs\uitagenda\functions.php on line 8
Notice: Undefined index: longitude in C:\xampp\htdocs\uitagenda\functions.php on line 8
Notice: Undefined index: latitude in C:\xampp\htdocs\uitagenda\functions.php on line 13
Notice: Undefined index: longitude in C:\xampp\htdocs\uitagenda\functions.php on line 13
Notice: Undefined index: range in C:\xampp\htdocs\uitagenda\functions.php on line 13
Notice: Undefined index: start in C:\xampp\htdocs\uitagenda\functions.php on line 15
Array ( )
Gewijzigd op 30/06/2012 15:00:53 door N K
Hoe kan ik controleren of al mijn postwaarden juist in de functie worden gezet die in ajax.php wordt opgeroepen?
aha dank edwin. Weer een nieuwe uitdaging..Ik zal eens even kijken hoe ik dit ga oplossen
Gewijzigd op 30/06/2012 15:03:33 door N K
Voor de rest werkt het precies zo als bij elk andere php script. Dus gewoon met isset() checken of de parameter bestaat.
Bewaart ie die post waarden niet in zijn cache?Ik heb ze toch nergens leeggemaakt?
Hoe zou ik dezelfde post waarden die ik heb meegegeven in mijn formulier kunnen doorsturen naar functions.php. Zou ik alle POST naar GET moeten wijzigen?
N K op 30/06/2012 15:11:27:
Toch begrijp ik het nog niet helemaal;)
Bewaart ie die post waarden niet in zijn cache?Ik heb ze toch nergens leeggemaakt?
Bewaart ie die post waarden niet in zijn cache?Ik heb ze toch nergens leeggemaakt?
Post waardes bewaren in zijn cache????
Volgens mij begrijp je niet helemaal hoe het werkt. Een Ajax call is precies hetzelfde als het opvragen van een pagina via je browser. Het enige wat anders is is hoe de gegevens worden verwerkt. Als jij twee keer achter elkaar een pagina intikt in je browser, dan ga je er toch ook niet vanuit dat de gegevens van de vorige pagina ook mee worden verstuurd?
Elke keer dat je een pagina oproept zal je de post en/of get gegevens mee moeten sturen. Of je het een of het ander gebruikt maakt voor de werking van je script niet uit. Je moet alleen wel de juiste functies gebruiken natuurlijk ($.get() voor get, $.post() voor post en varianten op beide).