Hoe sql/session inhoud laden in een DIV vanuit al reeds geladen DIV
Ik zit met de volgende situatie:
In mijn php pagina, laten we zeggen index.php is de structuur als volgt:
<head>
<script type="text/javascript" src="JS/jquery-1.6.2.js"></script>
<script type="text/javascript" src="function.js"></script>
</head>
<body>
<div>
<div><a href="" class="testcat" id="1">Show</a></div> --> middels deze link wordt er inhoud geladen in de volgende DIV (id=producten). Dit wordt gedaan met behulp van de functie dat in function.js is (zie hieronder).
<div id="producten"></div> -->Hier worden de eerste gegevens geladen zonder dat de pagina vernieuwd wordt. Tot hier gaat alles zoals ik wil. In testpage.php worden binnen while loop links aangemaakt. Wat ik nu wil is, als ik op een van de links klik moeten andere gegevens middels testpage2.php op zelfde wijze als bij vorige DIV geladen worden zonder dat de pagina vernieuwd wordt en dat de geladen gegevens in de eerste DIV getoond blijven worden. Deze gegevens moeten geladen worden in de DIV (id=information).
<div id="information"></div>
</div>
--> Ik heb van alles geprobeerd maar het lukt mij niet, de gegevens worden niet geladen.
</body>
function.js:
$(document).ready(function() {
$(".testcat").click(function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testpage.php",
data: datastring,
cache: false,
success: function(res) {
$('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#producten').html(res);
})
}
});
return false;
});
});
Inhoud van testpage.php en testpage2.php is PDO code waarmee gegevens uit de database worden geladen die door een WHILE loop gaan en vervolgens een tabel wordt gegenereerd en in DIV wordt geladen. Verder niets bijzonders.
In andere browsers heb je vast ook wel van dat soort tooltjes, maar die ken ik niet.
Vraag is ook hoe de data die terugkomt van de server is gestructureerd. Je hebt geen "dataType" meegegeven, dus de browser moet een gok doen. Dat kan als je een duidelijke structuur hebt, maar kan fout gaan als dat niet duidelijk is.
Tot slot, je url is "testpage.php" terwijl je in je tekst zegt dat "testpage2.php" de Ajax calls beantwoordt, klopt dat?
Gewijzigd op 18/12/2011 00:30:25 door Erwin H
Nu heb ik middels de functie, die in functie.js staat, de gegevens die door testpage.php worden opgehaald geladen in de DIV met id=producten zonder dat de pagina opnieuw geladen wordt. Dit gaat ook goed. testpage.php haalt data uit database en maakt middels een WHILE loop in <li></li> links aan. Tot zover werkt het zoals ik dat wil.
Nu begint mijn probleem:
Als ik op een link klik die door WHILE loop is aangemaakt wordt een nieuwe pagina geopend en krijg ik de gegevens te zien. Dus testpage2.php werkt ook goed.
Wat ik eigenlijk nu wil is om deze data op zelfde wijze te laden in DIV id=information als testpage.php in DIV id=producten zodat ook de geladen data in DIV id=producten nog steeds zichtbaar zijn. Als ik vergelijkbare functie gebruik als in function.js werkt het niet. De pagina wordt blijkbaar opnieuw geladen, wordt eventjes wit, en krijg ik index.php te zien.
Het lijkt erop dat de pagina dynamisch toegevoegde content niet ziet en zelfde functie niet meer werkt voor de volgende DIV.
Je zal of de click functie dus nog dynamisch moeten binden op het moment dat die nieuwe element worden aangemaakt, of je kan de functie delegate() gebruiken om ervoor te zorgen dat ze gebonden worden. Check: http://api.jquery.com/delegate/
En zoals ik eerder deze week heb geleerd (met dank aan Wouter), in JQuery 1.7 kan je het met on() doen.
dank voor de snelle reactie. Ik heb al geprobeerd met:
$(document).on("click", "a.testcat", function() {
maar ik weet niet wat ik verkeerd doe. zelf moet ik nog veel leren vandaar deze topic. moet ik voor beide DIV's een of aparte functies aanmaken?
hieronder volledig functie wat ik had geprobeerd:
$(document).on("click", "a.testcat", function() {
var href = $(this).attr("href");
var successDiv = $(this).data("producten");
$('#' + successDiv).html("<div class='loading'><img src='IMG/loading.gif' /></div>");
$.ajax({
type: "POST",
url: href,
data: datastring,
cache: false,
success: function(res) {
$('#' + successDiv).hide().html(res).fadeIn(2000);
}
}
return false;
});
$(document).on("click", function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
//var href = $(this).attr("href");
var successDiv = $(this).data("producten");
$('#' + successDiv).html("<div class='loading'><img src='IMG/loading.gif' /></div>");
$.ajax({
type: "POST",
url: "testkassa.php",
data: datastring,
cache: false,
success: function(res) {
$('#' + successDiv).hide().html(res).fadeIn(2000);
}
});
return false;
});
Moet ik nu zelfde functie aanmaken voor de tweede DIV alleen met andere DIV ID en URL?
Gewijzigd op 18/12/2011 10:31:08 door Erwin H
Quote:
<div>
DIV 1: <div><a href="" class="testcat" id="15">Test link</a></div>
DIV 2: <div id="producten"></div>
DIV 3: <div id="information"></div>
</div>
DIV 1: <div><a href="" class="testcat" id="15">Test link</a></div>
DIV 2: <div id="producten"></div>
DIV 3: <div id="information"></div>
</div>
Als er op link in DIV 1 geklikt wordt, wordt data dynamisch geladen in DIV 2 door testpage.php. Dit gaat goed. Hiervoor wordt dus de functie gebruikt:
function.js:
Quote:
$(document).ready(function() {
$(".testcat").click(function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testpage.php",
data: datastring,
cache: false,
success: function(res) {
$('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#producten').html(res);
})
}
});
return false;
});
});
$(".testcat").click(function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testpage.php",
data: datastring,
cache: false,
success: function(res) {
$('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#producten').html(res);
})
}
});
return false;
});
});
Nu moet er vanuit DIV 2 data geladen worden in DIV 3 met testpage2.php op zelfde wijze als in DIV 2 zodat de geladen data in DIV 2 nog steeds zichtbaar blijft.
Probleem is dat ik niet weet hoe ik dit met on() moet doen of op een andere manier.
Gewijzigd op 18/12/2011 10:47:55 door Dymo Masta
Je kan dezelfde functie gebruiken, als je precies dezelfde stappen moet nemen om je data te krijgen. Dus heeft div 2 dezelfde attributen (id en class) als div 1, moet dezelfde php pagina worden aangeroepen, moet daarin dezelfde functie worden doorlopen, is de output gelijk en moet daarna hetzelfde gebeuren met die output? Als dit niet allemaal identiek is dan kan je uiteraard niet dezelfde functie gebruiken, maar moet je een tweede functie definieren. Die kan je dan middels on() al vooraf binden zodat die wordt aangeroepen als de nieuwe div is gemaakt en er op wordt geklikt.
Probleem zit dus in die functie:
Als ik deze functie met on() gebruik gebeurt er niets!
Quote:
$(document).on("click", ".testcat", function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testpage.php",
data: datastring,
cache: false,
success: function(res) {
$('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#producten').html(res);
})
}
});
return false;
});
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testpage.php",
data: datastring,
cache: false,
success: function(res) {
$('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#producten').html(res);
})
}
});
return false;
});
Als ik deze functie zonder on() gebruik:
Wordt alleen data geladen in DIV 2 en niet in DIV 3!
Quote:
$(document).ready(function() {
$(".testcat").click(function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testkassa.php",
data: datastring,
cache: false,
success: function(res) {
$('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#producten').html(res);
})
}
});
return false;
});
});
$(".testcat").click(function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testkassa.php",
data: datastring,
cache: false,
success: function(res) {
$('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#producten').html(res);
})
}
});
return false;
});
});
Dat is dus mijn vraag, hoe moet ik de functie zodanig omvormen dat ik dus data vanuit DIV 1 dynamisch laad in DIV 2 en vervolgen data dynamisch laad vanuit DIV 2 in DIV 3.
En dan ook nog dat de geladen data in DIV 2 en DIV 3 zichtbaar blijven.
Gewijzigd op 18/12/2011 11:03:24 door Dymo Masta
require_once 'conn/config.php';
try {
$sQuery = "SELECT * FROM tabel WHERE id = '".$_POST['id']."' ";
if ($oStmt = $db->query($sQuery)) {
if ($oStmt->fetch() > 0) {
$oStmt = $db->prepare($sQuery);
$oStmt->execute();
print '<ul class="twee">';
while($aRow = $oStmt->fetch(PDO::FETCH_ASSOC)) {
$id = $aRow['id'];
$cat_id = $aRow['cat_id'];
$naam = $aRow['naam'];
print '<li><a href="testpage2.php?action=add&id='.$id.' ">'.$naam.'</a></li>';
}
print '</ul>';
}
else {
print 'Geen data';
}
}
}
catch(PDOException $e) {
$sMsg = '<p>
Regelnummer: '.$e->getLine().'<br />
Bestand: '.$e->getFile().'<br />
Foutmelding: '.$e->getMessage().'
</p>';
trigger_error($sMsg);
}
Gewijzigd op 18/12/2011 12:06:04 door Dymo Masta
Code (php)
1
2
2
$(".testcat").click(function() {
});
});
De link die je aanmaakt in de php pagina heeft die class niet. Die link zal dus nooit dat event starten. Verder heeft die link ook geen id, dus zelfs als het event wordt getriggered dan zal het mislopen omdat er geen id kan worden uitgelezen.
Code (php)
1
<a href="testpage2.php?action=add&id='.$id.' ">'.$naam.'</a>
Quote:
<div><a href="" class="testcat" id="15">Test link</a></div>
dan wordt data geladen in DIV 2: DIV 2: <div id="producten"></div>
dan komt dat gedeelte van mijn vorige post over PDO:
deze link moet dus nu volgende event aanspreken om data vervolgens in DIV 3 te laden:
Quote:
print '<li><a href="testpage2.php?action=add&id='.$id.' ">'.$naam.'</a></li>';
ik had het eerder zo:
Quote:
print '<li><a href="" id='.$id.' class="lijst">'.$naam.'</a></li>';
zelfde functie allen andere DIV en event:
Quote:
$(".lijst").click(function() {
maar dat werkt niet
Wel goed lezen, begrijpen en secuur werken, anders gaat het je nooit lukken.
wat doe ik dan verkeerd?
ik heb dit gedaan:
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
<div>
DIV 1: <div><a href="" class="testcat" id="15">Test link</a></div>
DIV 2: <div id="producten"></div>
DIV 3: <div id="information"></div>
</div>[/quote]
function.js
[quote]$(document).on("click", ".testcat", function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testpage.php",
data: datastring,
cache: false,
success: function(res) {
$('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#producten').html(res);
})
}
});
return false;
});
DIV 1: <div><a href="" class="testcat" id="15">Test link</a></div>
DIV 2: <div id="producten"></div>
DIV 3: <div id="information"></div>
</div>[/quote]
function.js
[quote]$(document).on("click", ".testcat", function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testpage.php",
data: datastring,
cache: false,
success: function(res) {
$('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#producten').html(res);
})
}
});
return false;
});
gebeurt niets in:
Quote:
DIV 2: <div id="producten"></div>
Gewijzigd op 18/12/2011 15:19:12 door Dymo Masta
Na het klikken op div1 krijg je dus links die er zo uitzien:
Code (php)
1
<a href="testpage2.php?action=add&id='.$id.' ">'.$naam.'</a>
of wat je blijkbaar eerder had:
Code (php)
1
<a href="" id='.$id.' class="lijst">'.$naam.'</a>
Maar je hebt maar een functie gedefinieerd die een Ajax call uitvoert:
Code (php)
1
2
2
$(document).on("click", ".testcat", function() {
});
});
Deze functie gaat natuurlijk nooit werken met een van de bovenstaande twee links want beide links bevatten NIET de class waarop die functie getriggerd wordt.
Dus OF je geeft dezelfde class mee aan die nieuwe links, OF je maakt een nieuwe functie die wel werkt op die link. Bijvoorbeeld:
Code (php)
1
2
2
$(document).on("click", ".lijst", function() {
});
});
Ik heb volgende bestanden:
-index.php
-function.js
-testpage.php
-testpage2.php
index.php ziet er als volgt uit en heeft een link met CLASS="testcat":
Code (php)
1
2
3
4
5
2
3
4
5
<div>
DIV 1: <div><a href="" class="testcat" id="15">Test link</a></div>
DIV 2: <div id="producten"></div>
DIV 3: <div id="information"></div>
</div>
DIV 1: <div><a href="" class="testcat" id="15">Test link</a></div>
DIV 2: <div id="producten"></div>
DIV 3: <div id="information"></div>
</div>
klik je op bovenste link dan gaat het naar functions.js, die als volgt uitziet:
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
$(document).ready(function() {
$(".testcat").click(function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testkassa.php",
data: datastring,
cache: false,
success: function(res) {
$('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#producten').html(res);
})
}
});
return false;
});
});
$(".testcat").click(function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testkassa.php",
data: datastring,
cache: false,
success: function(res) {
$('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#producten').html(res);
})
}
});
return false;
});
});
deze haalt vervolgens gegevens met testpage.php uit database en laadt deze in DIV 2, zie index.php. testpage.php ziet er als volgt uit:
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
27
28
29
30
31
32
33
34
35
36
37
38
39
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
27
28
29
30
31
32
33
34
35
36
37
38
39
require_once 'conn/config.php';
try {
$sQuery = "SELECT * FROM tabel WHERE id = '".$_POST['id']."' ";
if ($oStmt = $db->query($sQuery)) {
if ($oStmt->fetch() > 0) {
$oStmt = $db->prepare($sQuery);
$oStmt->execute();
print '<ul class="twee">';
while($aRow = $oStmt->fetch(PDO::FETCH_ASSOC)) {
$id = $aRow['id'];
$cat_id = $aRow['cat_id'];
$naam = $aRow['naam'];
print '<li><a href="" class="lijst" id='.$id.'>'.$naam.'</a></li>';
}
print '</ul>';
}
else {
print 'Geen data';
}
}
}
catch(PDOException $e) {
$sMsg = '<p>
Regelnummer: '.$e->getLine().'<br />
Bestand: '.$e->getFile().'<br />
Foutmelding: '.$e->getMessage().'
</p>';
trigger_error($sMsg);
}
try {
$sQuery = "SELECT * FROM tabel WHERE id = '".$_POST['id']."' ";
if ($oStmt = $db->query($sQuery)) {
if ($oStmt->fetch() > 0) {
$oStmt = $db->prepare($sQuery);
$oStmt->execute();
print '<ul class="twee">';
while($aRow = $oStmt->fetch(PDO::FETCH_ASSOC)) {
$id = $aRow['id'];
$cat_id = $aRow['cat_id'];
$naam = $aRow['naam'];
print '<li><a href="" class="lijst" id='.$id.'>'.$naam.'</a></li>';
}
print '</ul>';
}
else {
print 'Geen data';
}
}
}
catch(PDOException $e) {
$sMsg = '<p>
Regelnummer: '.$e->getLine().'<br />
Bestand: '.$e->getFile().'<br />
Foutmelding: '.$e->getMessage().'
</p>';
trigger_error($sMsg);
}
Dit werkt dus goed. Ik heb nu dus: index.php, functions.js en testpage.php. Ik hoop dat het tot hier duidelijk is.
Middels testpage.php worden deze links aangemaakt met CLASS="lijst":
Code (php)
1
<li><a href="" class="lijst" id='.$id.'>'.$naam.'</a></li>
Hier begint mijn vraag. Als ik op bovenstaande link klik moet middels testpage2.php (deze is vergelijkbaar als testpage.php) gegevens uit database gelezen worden en in DIV 3 (zie index.php) getoond worden. Om dit werkend te krijgen had ik dus volgende functie aangemaakt in functions.js.
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
$(document).ready(function() {
$(".lijst").click(function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testkassa2.php",
data: datastring,
cache: false,
success: function(res) {
$('#information').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#information').html(res);
})
}
});
return false;
});
});
$(".lijst").click(function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testkassa2.php",
data: datastring,
cache: false,
success: function(res) {
$('#information').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#information').html(res);
})
}
});
return false;
});
});
Nu heb je dus 2 functies in function.js alleen click event en de ID zijn anders. Bovenstaande functie geeft geen resultaat omdat in DIV 2 gegevens dynamisch geladen worden. Nu heb je dus index.php, function.js, testpage.php en testpage2.php.
Jou oplossing was on() function, heb ik ook geprobeerd alleen ik weet niet wat ik verkeerd doe. Als ik on() function toepas om mijn eerste functie binnen function.js dan worden er ook geen gegevens in DIV 2 geladen.
En mijn vraag is, wat doe ik verkeerd?