Hoe sql/session inhoud laden in een DIV vanuit al reeds geladen DIV

wat er over blijft is dan om te zien hoe die links eruit zien die in div2 terecht komen. Kan je HTML plaatsen die dynamisch in die divs terecht komt (dus uit je Ajax call)?

in mijn HTML broncode komt er niets alleen een lege <div id="producten"></div> als de data geladen wordt maar de code van testpage.php is als volgt:

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);
}

Je click event wordt getriggered door links met een class "testcat"

$(".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.

<a href="testpage2.php?action=add&id='.$id.' ">'.$naam.'</a>

Als je goed kijkt wordt deze event getriggerd in index.php DIV 1

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

print '<li><a href="testpage2.php?action=add&id='.$id.' ">'.$naam.'</a></li>';

ik had het eerder zo:

print '<li><a href="" id='.$id.' class="lijst">'.$naam.'</a></li>';

zelfde functie allen andere DIV en event:

$(".lijst").click(function() {

maar dat werkt niet

Nee, dat werkt dus niet omdat click niet automatisch gebonden wordt bij dynamische elementen, dat hadden we 10 posts geleden al bedacht. Hier moet je dus on() gebruiken....

Wel goed lezen, begrijpen en secuur werken, anders gaat het je nooit lukken.

dat het ik ook gedaan, maar het werkt niet. kijk 3 posts terug.die conclusie had ik ook getrokken na jou 2de post.
wat doe ik dan verkeerd?

ik heb dit gedaan:

<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;
});

gebeurt niets in:

DIV 2: <div id="producten"></div>

Maar je hebt helemaal geen functie die op die link werkt! Het spijt me zeer, maar ik zie echt geen lijn meer in wat je doet.

ik heb mijn laatste post aangepast met wat ik heb gedaan, wat doe ik dan verkeerd dat de data in DIV 2 niet wordt geladen?

Code in CODE tags svp, niet in QUOTE tags, zo krijg je nog steeds geen juiste inspringing en regelnummers.

Na het klikken op div1 krijg je dus links die er zo uitzien:

<a href="testpage2.php?action=add&id='.$id.' ">'.$naam.'</a>

of wat je blijkbaar eerder had:

<a href="" id='.$id.' class="lijst">'.$naam.'</a>

Maar je hebt maar een functie gedefinieerd die een Ajax call uitvoert:

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

$(document).on("click", ".lijst", function() {
});

Ik ga nog een poging wagen om het je te verduidelijken:

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

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

$(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;
});	
});

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:

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); 
}

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

<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.

$(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;
});	
});

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?