Ajax berichten ophalen
Ik ben sinds vandaag een beetje bezig met ajax veel weet ik er nog niet van maar ik heb inmiddels al twee dingen kunnen maken zoals het verwijderen van berichten en het update van een signature (voor beheerders)
maar nu wil ik me quote functie verbeteren ik stuur nu me leden door naar een andere pagina maar ik wil dat de tekst gewoon in èèn keer verschijnt in me textarea en daar ligt een probleem
heb een script van internet gevonden (w3schools)
en wilde die aanpassen voor textarea maar dat doet hij niet maar hij werkt wel met een div
wie kan me even helpen? (En wie kan me een goede nederlandse site geven voor ajax scripten?)
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
40
41
42
43
44
45
46
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
40
41
42
43
44
45
46
<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="1">1</option>
<option value="2 ">2</option>
<option value="3">3</option>
</select>
</form>
<br />
<div id="txtHint">Customer info will be listed here...</div>
<textarea id="txtHint" name="bericht"></textarea>
</body>
</html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="1">1</option>
<option value="2 ">2</option>
<option value="3">3</option>
</select>
</form>
<br />
<div id="txtHint">Customer info will be listed here...</div>
<textarea id="txtHint" name="bericht"></textarea>
</body>
</html>
- Aar - op 03/01/2012 19:57:08:
Je kan ook jQuery gebruiken. Deze is een stuk compacter en gemakkelijker in gebruik.
Ja maar het probleem is dat ik die niet kan vinden op de site die jij mij gaf ;)
Niet zo heel lastig te vinden trouwens.
Gewijzigd op 03/01/2012 20:10:40 door - Ariën -
- Aar - op 03/01/2012 20:10:20:
Ja maar die is engels ken wel wat engels maar het makkelijkst is om een Nederlandse tutorial te hebben
Ik ben op het moment dit aan het lezen maar helft vergeet je gewoon omdat je constant aan het vertalen ben in je hoofd!
http://docs.jquery.com/Tutorials:How_jQuery_Works
Gewijzigd op 03/01/2012 20:18:42 door ScrapZz nl
Darkwell - op 03/01/2012 20:17:06:
http://docs.jquery.com/Tutorials:How_jQuery_Works
Maak voorbeelden...
Alleen lezen is nooit voldoende ;-)
Verder kan je op Google ook wel Nederlandse tutorials vinden. Hoewel die vaak incompleter zijn, naar mijn mening.
Gewijzigd op 03/01/2012 20:22:54 door - Ariën -
Documentatie over AJAX: jQuery.ajax (ook engels).
Wouter J op 03/01/2012 20:22:25:
Alles is Engels in het scripting wereldje. Dus het is verstandig om Engels te leren.
Documentatie over AJAX: jQuery.ajax (ook engels).
Documentatie over AJAX: jQuery.ajax (ook engels).
Nouja geluk heb ik een 8 gehad op me examen engels ;) dus dat hoef niet maar als je een tijdje niks aan doe word het lastiger maar ok alvast bedankt ik zal is kijken!
http://www.visualjquery.com/
Ik zal eens jouw verzoek vertalen naar jQuery.
Ik doe het in twee stappen, in de eerste stap herken je jouw code (en hoe het met jQuery wordt gedaan); ik heb dan ook jouw naamgeving voor een groot deel overgenomen.
Daarna toon ik nog hoe je het nog veel compacter kan noteren
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
40
41
42
43
44
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
40
41
42
43
44
<html>
<head>
<script src="jquery.js"></script>
<script>
// bij een geslaage request/respons wordt deze functie uitgevoerd
function ajax_respons(data) {
// data is de string die Ajax net heeft opgehaald. We gaan nu die data steken als innerHTML van txtHint
$("#txtHint").html(data);
}
// deze functie wordt aangeroepen bij een onChange van de select box
function showCustomer(e) {
// merk op: this is nu het html element dat aangesproken is; in dit geval dus de select box
// in plaats van onchange="showCustomer(this.value)", halen we nu die waarde op deze manier:
var str = $(this).val();
// nu dus effectief de Ajax request
$.ajax({
// "GET" of "POST"
type: "GET",
// je vraagt Ajax om te surfen naar deze url:
url: "test.php?q=" + str,
// wanneer een request succesvol is, en je dus een respons krijgt, wordt deze functie uitgevoerd:
success: ajax_respons
});
}
// deze functie wordt uitgevoerd als de DOM volledig is geladen. Op het moment dat <select id="customers"> nog niet volledig geladen is, kan je er nog geen evenementen aan binden
$(document).ready(function() {
// hier vervangen we onchange(...). In plaats van die onchange tussen de html te zetten, laat je jquery doen. jQuery bindt het evenement onchange aan het element met id="customers". Wanneer dat element een onChange ondervindt, zal volgende functie worden uitgevoerd ( showCustomer )
// merk op: de "on" verdwijnt hier, in jQuery zet je "change".
$("#customers").change(showCustomer);
});
</script>
</head>
<body>
<select id="customers">
<option value="">Select a customer:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<div id="txtHint">Customer info will be listed here...</div>
<textarea id="txtHint" name="bericht"></textarea>
</body>
</html>
<head>
<script src="jquery.js"></script>
<script>
// bij een geslaage request/respons wordt deze functie uitgevoerd
function ajax_respons(data) {
// data is de string die Ajax net heeft opgehaald. We gaan nu die data steken als innerHTML van txtHint
$("#txtHint").html(data);
}
// deze functie wordt aangeroepen bij een onChange van de select box
function showCustomer(e) {
// merk op: this is nu het html element dat aangesproken is; in dit geval dus de select box
// in plaats van onchange="showCustomer(this.value)", halen we nu die waarde op deze manier:
var str = $(this).val();
// nu dus effectief de Ajax request
$.ajax({
// "GET" of "POST"
type: "GET",
// je vraagt Ajax om te surfen naar deze url:
url: "test.php?q=" + str,
// wanneer een request succesvol is, en je dus een respons krijgt, wordt deze functie uitgevoerd:
success: ajax_respons
});
}
// deze functie wordt uitgevoerd als de DOM volledig is geladen. Op het moment dat <select id="customers"> nog niet volledig geladen is, kan je er nog geen evenementen aan binden
$(document).ready(function() {
// hier vervangen we onchange(...). In plaats van die onchange tussen de html te zetten, laat je jquery doen. jQuery bindt het evenement onchange aan het element met id="customers". Wanneer dat element een onChange ondervindt, zal volgende functie worden uitgevoerd ( showCustomer )
// merk op: de "on" verdwijnt hier, in jQuery zet je "change".
$("#customers").change(showCustomer);
});
</script>
</head>
<body>
<select id="customers">
<option value="">Select a customer:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<div id="txtHint">Customer info will be listed here...</div>
<textarea id="txtHint" name="bericht"></textarea>
</body>
</html>
Eigenlijk pas ik nu slechts 1 ding toe. In plaats van telkens een functie een naam te geven en apart te definiëren, kan je ook rechtstreeks de functie definitie noteren, op volgende manier:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
<script>
$(document).ready(function() {
$("#customers").change(function(e) {
var str = $(this).val();
$.ajax({
type: "GET",
url: "test.php?q=" + str,
success: function(data) {
$("#txtHint").html(data);
}
});
});
});
</script>
...
<script>
$(document).ready(function() {
$("#customers").change(function(e) {
var str = $(this).val();
$.ajax({
type: "GET",
url: "test.php?q=" + str,
success: function(data) {
$("#txtHint").html(data);
}
});
});
});
</script>
...
Je ziet hoe jQuery een hoop voor jou doet.
-----
Een aantal opmerkingen
- Je hebt geen <form> meer nodig, je hebt ook geen name="..." meer nodig.
Tenzij je ook echt een submit knop hebt en je achteraf die waarde nog wil posten op de klassieke manier.
- Je haalt alle javascript uit het HTML code. Mooie, propere scheiding van HTML <-> javascript; net zoals je je css ook volledig apart houdt.
- Uiteraard niet vergeten jquery.js te downloaden en in ja map steken waar de php file staat
Kris Peeters op 04/01/2012 19:05:28:
Ik vind dit interessant qua documentatie:
http://www.visualjquery.com/
Ik zal eens jouw verzoek vertalen naar jQuery.
Ik doe het in twee stappen, in de eerste stap herken je jouw code (en hoe het met jQuery wordt gedaan); ik heb dan ook jouw naamgeving voor een groot deel overgenomen.
Daarna toon ik nog hoe je het nog veel compacter kan noteren
Eigenlijk pas ik nu slechts 1 ding toe. In plaats van telkens een functie een naam te geven en apart te definiëren, kan je ook rechtstreeks de functie definitie noteren, op volgende manier:
Je ziet hoe jQuery een hoop voor jou doet.
-----
Een aantal opmerkingen
- Je hebt geen <form> meer nodig, je hebt ook geen name="..." meer nodig.
Tenzij je ook echt een submit knop hebt en je achteraf die waarde nog wil posten op de klassieke manier.
- Je haalt alle javascript uit het HTML code. Mooie, propere scheiding van HTML <-> javascript; net zoals je je css ook volledig apart houdt.
- Uiteraard niet vergeten jquery.js te downloaden en in ja map steken waar de php file staat
http://www.visualjquery.com/
Ik zal eens jouw verzoek vertalen naar jQuery.
Ik doe het in twee stappen, in de eerste stap herken je jouw code (en hoe het met jQuery wordt gedaan); ik heb dan ook jouw naamgeving voor een groot deel overgenomen.
Daarna toon ik nog hoe je het nog veel compacter kan noteren
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
40
41
42
43
44
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
40
41
42
43
44
<html>
<head>
<script src="jquery.js"></script>
<script>
// bij een geslaage request/respons wordt deze functie uitgevoerd
function ajax_respons(data) {
// data is de string die Ajax net heeft opgehaald. We gaan nu die data steken als innerHTML van txtHint
$("#txtHint").html(data);
}
// deze functie wordt aangeroepen bij een onChange van de select box
function showCustomer(e) {
// merk op: this is nu het html element dat aangesproken is; in dit geval dus de select box
// in plaats van onchange="showCustomer(this.value)", halen we nu die waarde op deze manier:
var str = $(this).val();
// nu dus effectief de Ajax request
$.ajax({
// "GET" of "POST"
type: "GET",
// je vraagt Ajax om te surfen naar deze url:
url: "test.php?q=" + str,
// wanneer een request succesvol is, en je dus een respons krijgt, wordt deze functie uitgevoerd:
success: ajax_respons
});
}
// deze functie wordt uitgevoerd als de DOM volledig is geladen. Op het moment dat <select id="customers"> nog niet volledig geladen is, kan je er nog geen evenementen aan binden
$(document).ready(function() {
// hier vervangen we onchange(...). In plaats van die onchange tussen de html te zetten, laat je jquery doen. jQuery bindt het evenement onchange aan het element met id="customers". Wanneer dat element een onChange ondervindt, zal volgende functie worden uitgevoerd ( showCustomer )
// merk op: de "on" verdwijnt hier, in jQuery zet je "change".
$("#customers").change(showCustomer);
});
</script>
</head>
<body>
<select id="customers">
<option value="">Select a customer:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<div id="txtHint">Customer info will be listed here...</div>
<textarea id="txtHint" name="bericht"></textarea>
</body>
</html>
<head>
<script src="jquery.js"></script>
<script>
// bij een geslaage request/respons wordt deze functie uitgevoerd
function ajax_respons(data) {
// data is de string die Ajax net heeft opgehaald. We gaan nu die data steken als innerHTML van txtHint
$("#txtHint").html(data);
}
// deze functie wordt aangeroepen bij een onChange van de select box
function showCustomer(e) {
// merk op: this is nu het html element dat aangesproken is; in dit geval dus de select box
// in plaats van onchange="showCustomer(this.value)", halen we nu die waarde op deze manier:
var str = $(this).val();
// nu dus effectief de Ajax request
$.ajax({
// "GET" of "POST"
type: "GET",
// je vraagt Ajax om te surfen naar deze url:
url: "test.php?q=" + str,
// wanneer een request succesvol is, en je dus een respons krijgt, wordt deze functie uitgevoerd:
success: ajax_respons
});
}
// deze functie wordt uitgevoerd als de DOM volledig is geladen. Op het moment dat <select id="customers"> nog niet volledig geladen is, kan je er nog geen evenementen aan binden
$(document).ready(function() {
// hier vervangen we onchange(...). In plaats van die onchange tussen de html te zetten, laat je jquery doen. jQuery bindt het evenement onchange aan het element met id="customers". Wanneer dat element een onChange ondervindt, zal volgende functie worden uitgevoerd ( showCustomer )
// merk op: de "on" verdwijnt hier, in jQuery zet je "change".
$("#customers").change(showCustomer);
});
</script>
</head>
<body>
<select id="customers">
<option value="">Select a customer:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<div id="txtHint">Customer info will be listed here...</div>
<textarea id="txtHint" name="bericht"></textarea>
</body>
</html>
Eigenlijk pas ik nu slechts 1 ding toe. In plaats van telkens een functie een naam te geven en apart te definiëren, kan je ook rechtstreeks de functie definitie noteren, op volgende manier:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
<script>
$(document).ready(function() {
$("#customers").change(function(e) {
var str = $(this).val();
$.ajax({
type: "GET",
url: "test.php?q=" + str,
success: function(data) {
$("#txtHint").html(data);
}
});
});
});
</script>
...
<script>
$(document).ready(function() {
$("#customers").change(function(e) {
var str = $(this).val();
$.ajax({
type: "GET",
url: "test.php?q=" + str,
success: function(data) {
$("#txtHint").html(data);
}
});
});
});
</script>
...
Je ziet hoe jQuery een hoop voor jou doet.
-----
Een aantal opmerkingen
- Je hebt geen <form> meer nodig, je hebt ook geen name="..." meer nodig.
Tenzij je ook echt een submit knop hebt en je achteraf die waarde nog wil posten op de klassieke manier.
- Je haalt alle javascript uit het HTML code. Mooie, propere scheiding van HTML <-> javascript; net zoals je je css ook volledig apart houdt.
- Uiteraard niet vergeten jquery.js te downloaden en in ja map steken waar de php file staat
Een mooie uitleg dank je maar de bedoeling is om iets op te halen en in een textarea te plaatsen
om vervolgens meer tekst toetevoegen en dan te posten maar ik zal kijken of het me gaat lukken met jouw tips
en de dingen die ik inmidels heb gelezen op jquery site!
(Nogmaals bedankt!)
Edit:
En het is gelukt dank je!!
Nu kan ik me leden makkelijk laten quote!
Gewijzigd op 05/01/2012 15:04:59 door ScrapZz nl