onChange

Door thomas de vries op 25-11-2013 10:18 gewijzigd op 26-11-2013 09:00

2.871 views

Hallo medeleden,

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 lang=js]
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);
}
});
}
[/code]

in Ajax.php heb ik om te testen dit gedaan
<?php
if($_GET['a'] == "GetShopItem")
{
if($_GET['sid'] == "1")
{
$result = "1";
}
else
{
$result = "2";
}
}
?>

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.

Kris Peeters

25-11-2013 11:14 gewijzigd op 25-11-2013 11:24

Ik heb dit even vertaald naar jQuery-stijl javascript.
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


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

ajax.php


<?php
if($_GET['a'] == "GetShopItem")
{
    if($_GET['sid'] == "1")
    {
        $result = "1";
    }
    else
    {
        $result = "2";
    }
    // uiteraard niet vergeten om die result te printen.  Alles wat je hier print, wordt de respons die javascript terug krijgt
    echo $result;
}
?>

Mich

25-11-2013 11:21

Thomas, je kunt geen data echo'en die je terug dmv javascript. Wel kun je deze dmv javascript ergens neerzetten.

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


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

thomas de vries

25-11-2013 15:18

Dank jullie beide voor een geweldige uitleg.

Ik ga er mee aan de slag en kijk wat ik kan doen.

Reageren

Inloggen om te reageren