PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
D

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

Door Dymo Masta op 17-12-2011 23:25
3.725 views
Ik ben een aantal dagen op zoek geweest voor de juiste oplossing maar die ben ik nog niet tegen gekomen.

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.
E
Erwin H
18-12-2011 00:21 gewijzigd op 18-12-2011 00:30
Heb je wel al je server script getest? Weet je zeker dat dat script de juiste data teruggeeft? Dit kan je testen door het script direct in de browser aan te roepen (hoewel je dan geen POST data kunt gebruiken), of, als je Mozilla gebruikt, via de add on Bugzilla. In die add on kan je precies zien welke Ajax calls er worden gemaakt, wat de parameters waren en welke data je terugkrijgt.
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?
D
Dymo Masta
18-12-2011 08:31
Zoals ik de script nu heb werkt alles. In beide gevallen, testpage.php als testpage2.php worden gegevens netjes getoond. Als je op een link klikt wordt een nieuwe pagina geladen en krijg je de gegevens te zien die ik wil.

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.



E
Erwin H
18-12-2011 09:35
Dat komt omdat je onclick functie alleen wordt gebonden aan elementen die tijdens de document load al bestaan. Dynamische elementen die later worden aangemaakt hebben die functie dus nog niet aan zich gebonden.
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.
D
Dymo Masta
18-12-2011 09:57
best Erwin,

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;
});
E
Erwin H
18-12-2011 10:00
Je gebruikt JQuery 1.6.2, daar bestaat on() volgens mij nog niet.
D
Dymo Masta
18-12-2011 10:10
zoals ik de functie nu heb met JQuery 1.7.1 worden de gegevens in de eerste DIV netjes geladen als eerst:

$(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?
E
Erwin H
18-12-2011 10:30 gewijzigd op 18-12-2011 10:31
Ik ben kwijt over welke divs je het allemaal hebt. Dus het lijkt me verstandig om even je hele HTML pagina (of in elk geval met de relevante tags) te posten met alleen in de div het commentaar om welke div het gaat. Graag binnen "code" (dus die met rechte haken) tags zodat het inspringen ook behouden blijft.
D
Dymo Masta
18-12-2011 10:45 gewijzigd op 18-12-2011 10:47
index.php

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


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.

E
Erwin H
18-12-2011 10:53
Volgende keer code graag tussen code tags svp, dat maakt het heel wat makkelijker leesbaar.

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.
D
Dymo Masta
18-12-2011 11:02 gewijzigd op 18-12-2011 11:03
Eigenlijk gebeurt alles op zelfde wijze alleen andere data wordt geladen in andere DIV.

Probleem zit dus in die functie:

Als ik deze functie met on() gebruik gebeurt er niets!

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


Als ik deze functie zonder on() gebruik:

Wordt alleen data geladen in DIV 2 en niet in DIV 3!

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


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.

Reageren

Inloggen om te reageren