onChange
ik probeer mij een beetje te verdiepen in javascript/ajax/jquery
omdat ik hier nog niet echt veel kaas van heb gegeten heb ik een aantal tutorials gevolgd over het gebruik hiervan. Echter zit ik met iets wat ik niet zo 123 kan vinden op het web.
ik heb een form met een x aantal velden
een daarvan is ID
nu heb ik dit zo aangemaakt
<td><input type="text" name="itemID" onChange="LoadData(this.value);" /></td>
wat nu de bedoeling dient te zijn is dat als ik daar een ID invul bijvoorbeeld 1 dan moet dit worden opgevangen daar ajax/jquery en die zorgt ervoor dat er gegevens uit de database worden gelezen om de rest van de velden een value mee te geven.
Stukje code van de js
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
function LoadData(itemID) {
document.getElementById('box').style.display = 'hidden';
$.ajax({
url: 'ajax.php?a=GetShopItem&sid=' + itemID,
type: 'GET',
dataType: 'php',
timeout: 1000,
success: function(response) {
$("#box").html(response);
}
});
}
document.getElementById('box').style.display = 'hidden';
$.ajax({
url: 'ajax.php?a=GetShopItem&sid=' + itemID,
type: 'GET',
dataType: 'php',
timeout: 1000,
success: function(response) {
$("#box").html(response);
}
});
}
in Ajax.php heb ik om te testen dit gedaan
Code (php)
in het form zelf na de input type="text" heb ik dit neergezet
if(isset($result)) { echo $result; }
echter ik krijg geen waarde terug.
Heeft iemand een idee waarom dit niet zou werken en hoe dit het beste aangepast kan worden.
Bijvoorbaat dank
Thomas de Vries.
Gelieve in het vervolg bij alle codes de [code][/code]-tags gebruiken.[/modedit]
Gewijzigd op 26/11/2013 09:00:53 door Nick Dijkstra
Bij jQuery is het gebruikelijk om geen javascript aanroep in de html te steken.
Dus bv. geen <div onclick="..." id="mijn_div">.
Wat we doen, is de elementen een id of class mee geven; dan kan je dat element aanspreken, en gaan we ook events binden in het script zelf.
Dat wordt dan iets als $('#mijn_div').click(function(e) {...})
index.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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() { // wordt uitgevoerd als de pagina geladen is
$('.shop_item').change(function(e) { // komt overeen met <input class="shop_item" onchange="...">
$('#box').css({display: 'none'}); // komt overeen met document.getElementById('box').style.display = 'hidden';
var value = $(this).val(); // $(this) is het aangesproken element. net zoals bij <input onChange="LoadData(this);"> this het element meegeeft aan LoadData() // $(this).val() is dus dines' value
// ajax verzoek starten
$.ajax({
url: 'ajax.php',
data: { // data in object-notatie meegeven
a: 'GetShopItem',
sid: value
},
success: function(response) {
$("#box").html(response)
.css({display: 'block'});
}
})
})
})
</script>
<input class="shop_item" type="text" name="itemID" />
<div id="box"></div>
<script>
$(document).ready(function() { // wordt uitgevoerd als de pagina geladen is
$('.shop_item').change(function(e) { // komt overeen met <input class="shop_item" onchange="...">
$('#box').css({display: 'none'}); // komt overeen met document.getElementById('box').style.display = 'hidden';
var value = $(this).val(); // $(this) is het aangesproken element. net zoals bij <input onChange="LoadData(this);"> this het element meegeeft aan LoadData() // $(this).val() is dus dines' value
// ajax verzoek starten
$.ajax({
url: 'ajax.php',
data: { // data in object-notatie meegeven
a: 'GetShopItem',
sid: value
},
success: function(response) {
$("#box").html(response)
.css({display: 'block'});
}
})
})
})
</script>
<input class="shop_item" type="text" name="itemID" />
<div id="box"></div>
ajax.php
Code (php)
Gewijzigd op 25/11/2013 11:24:19 door Kris Peeters
document.getElementById('box').style.display = 'hidden';
Hiermee haal je javascript en jQuery door elkaar. Je kunt dit met jQuery op deze manier doen
$('#box').hide();
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
function LoadData(itemID) {
$( '#box' ).hide();
$.get( 'ajax.php', { a: 'GetShopItem', sid: itemID } ) // Data versturen dmv get naar ajax.php
.done( function( data ) { // Als dit gelukt is, de pagina in 'data' zetten
$( '#box' ).html( data ).show(); // 'data' weergeven in id box
});
}
$( '#box' ).hide();
$.get( 'ajax.php', { a: 'GetShopItem', sid: itemID } ) // Data versturen dmv get naar ajax.php
.done( function( data ) { // Als dit gelukt is, de pagina in 'data' zetten
$( '#box' ).html( data ).show(); // 'data' weergeven in id box
});
}
Ik ga er mee aan de slag en kijk wat ik kan doen.