Ik ben recent begonnen met Javascript maar kom er even niet meer uit. Ik wil gegevens vanuit Mysql, via PHP naar Javascript halen. Ik geloof dat dat via json_encode en Ajax moet, maar kom er niet helemaal meer uit. Het PHP-gedeelte is volgens mij in orde, maar het Ajax deel mankeert nog wat aan. Ik heb al van alles geprobeerd en rondgezocht maar kom er niet uit. Kunnen jullie me helpen?
Wat er zo te zien nu gebeurt is dat je een willekeurig aantal records kan terugkrijgen, maar je behandelt het in javascript alsof het een enkel record betreft. Waarschijnlijk kom je met data[0]['bieder_id'] wat verder.
Verrek ja, zit ik dus al een uur mee te prutsen. Thanks man!
[size=xsmall]Toevoeging op 15/04/2017 00:21:51:[/size]
G Jansma op 14/04/2017 23:36:44
Verrek ja, zit ik dus al een uur mee te prutsen. Thanks man!
Edit: Nog een vraagje. Ik merk dat die variabel 'id' buiten die Ajax structuur niet werkt. Is er een mogelijkheid om die daar buiten te kunnen gebruiken?
Ik probeer een soort van veilingsysteem te maken. Ik wil met een interval (nog weggelaten) dan telkens het hoogste bod en tijdstip ophalen. Dat wil ik gebruiken om te kijken of iemand heeft overboden en anders te melden dat hij hetzelfde of te laag heeft geboden.
Het lijkt me dan handig als ik de variabel 'highest' ook verderop in het script nog zou kunnen gebruiken. In onderstaande code werkt de alert wel, maar de document.write geeft undefined aan.
if(Bid == highest) {
document.getElementById("error").innerHTML = "Er is al een even hoog bod gedaan. ("+Bid+").";
$('#error').fadeIn().delay(5000).fadeOut();
document.getElementById('numbersonly').value='';
return;
}
Dat klopt, want highest wordt asynchroon gevuld. En dat is per definitie nadat de rest van het script is uitgevoerd.
Het zou wel werken als je het op een later punt bijvoorbeeld als controle gebruikt op een formulier.
Ok, dat had ik ook kunnen weten dat Ajax asynchroon is.
Ik heb zitten denken, maar ik kom er niet helemaal uit hoe ik nou kan krijgen wat ik wil. Ik probeer een soort veilingsysteem te maken met een countdown. Er wordt telkens opnieuw een item geveild, waarbij bedrag en tijdstip van aflopen worden verwerkt in de database. Na elk bod moet er weer 30 sec bijkomen. Ik moet dus telkens weten welk item wordt geveild, wat het hoogste bedrag en wat het tijdstip is waarop de deadline afloopt. Ik heb dus die gegevens die ik met die json_encode ophaal nodig (denk ik). Of zijn daar nog alternatieven voor? Of moet ik alles tussen de {} bij de json plempen om dat resultaat te gebruiken?
Ik heb de code maar even toegevoegd, dat maakt eea wat meer inzichtelijk, maar het is nog niet helemaal zoals bovenstaand.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<head><h1 id="title"></h1>
</head>
<body>
<div id='formulier'>
<input name="input" type="text" id="numbersonly" />
<input type="submit" id="submit" value="bid" onclick="change()"/>
</div>
<div id="error" class="error"></div>
<div id='live_item'></div>
<div id='live_biedingen'></div>
<p id="demo"></p>
</body>
</html>
<?php
date_default_timezone_set('UTC');
$time = date("Y-m-d H:i:s");
$time1 = date("Y-m-d H:i:s", time() + 10);
echo $time;
echo "<br>";
echo $time1;
?>
<script>
var min = 1;
var max = 1000;
var highest;
var item = 100;
//LEEG INVOERVELD
$('input').attr('disabled', false);
//DE JSON WAAR IK HET HOOGSTE BOD EN TIJD VAN WIL OPHALEN
$.ajax({
url: 'current_item.php',
method: "POST",
dataType: 'json',
success: function(data)
{
var highest = data[0]['waarde'];
console.log(highest);
}
});
setInterval(function () {
$('#live_item').load("current_item.php")}, 1000); // TONEN GEGEVENS VAN ITEM
setInterval(function () {
$('#live_biedingen').load("biedingen.php")}, 1000); // TONEN LAATSTE BIEDINGEN OP ITEM
//Button click en enter verzenden
$('#submit').click(function() {
return false;
});
$('#numbersonly').on('keyup', function(e) {
if (e.keyCode === 13) {
$('#submit').click();
}
});
//Alleen getallen kunnen invoeren
document.getElementById('numbersonly').addEventListener('keydown', function(e) {
var key = e.keyCode ? e.keyCode : e.which;
if (!( [8, 9, 13, 27, 46, 110, 190].indexOf(key) !== -1 ||
(key == 65 && ( e.ctrlKey || e.metaKey ) ) ||
(key >= 35 && key <= 40) ||
(key >= 48 && key <= 57 && !(e.shiftKey || e.altKey)) ||
(key >= 96 && key <= 105)
)) e.preventDefault();
});
//Wanneer de button geklikt wordt
function change(){
var bid = document.getElementById('numbersonly').value;
if(bid) {} else {bid = 0;}
//Minimum en maximum
if(bid < min || bid > max) {
document.getElementById("error").innerHTML = "Ongeldig bod ("+bid+").";
$('#error').fadeIn().delay(5000).fadeOut();
document.getElementById('numbersonly').value='';
return;
}
//Hele getallen
if (bid % 1 !== 0) {
document.getElementById("error").innerHTML = "Alleen bieden in hele getallen ("+bid+").";
$('#error').fadeIn().delay(5000).fadeOut();
document.getElementById('numbersonly').value='';
return;
}
//Bod hoger dan hoogste bod
if(bid < highest) {
document.getElementById("error").innerHTML = "Je bod is lager dan het hoogste bod ("+bid+").";
$('#error').fadeIn().delay(5000).fadeOut();
document.getElementById('numbersonly').value='';
return;
}
//Bod gelijk aan hoogste bod
if(bid == highest) {
document.getElementById("error").innerHTML = "Er is al een even hoog bod gedaan. ("+bid+").";
$('#error').fadeIn().delay(5000).fadeOut();
document.getElementById('numbersonly').value='';
return;
}
//Op zich niet nodig
var title = document.getElementById('title');
title.innerHTML = bid;
//Input weer leegmaken
document.getElementById('numbersonly').value='';
//Verzenden naar mysql php pagina
$.ajax({
url:"insert.php",
method:"POST",
data:{0:item, 1:bid},
dataType:"text",
success:function(data){
fetch_data();
}
});
}
/// COUNTDOWN
tijd = "<?php echo $time; ?>";
tijd1 = "<?php echo $time1; ?>";
// Split timestamp into [ Y, M, D, h, m, s ]
var t = tijd.split(/[- :]/);
var startDate = new Date(Date.UTC(t[0], t[1]-1, t[2], t[3], t[4], t[5]));
// Split timestamp into [ Y, M, D, h, m, s ]
var c = tijd1.split(/[- :]/);
var countDownDate = new Date(Date.UTC(c[0], c[1]-1, c[2], c[3], c[4], c[5]));
var distance = countDownDate - startDate;
// Update the count down every 1 second
var x = setInterval(function() {
// Find the distance between now an the count down date
distance = distance - 1000;
// Time calculations for days, hours, minutes and seconds
var seconds = Math.floor(distance / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = seconds + "s ";
distance1 = distance;
// If the count down is finished, write some text
if(distance < 0) {
document.getElementById("demo").innerHTML = "Check voor last minute-biedingen.";
$('input').attr('disabled', 'disabled');
}
//Even uitgezet, maar moet dus kijken of er nog een bod gedaan is op het eind. En dan weer 30 sec.
if(distance1 < -6000) {
document.getElementById("demo").innerHTML = "Er was nog een bod gedaan."
$('input').attr('disabled', false);
distance = 30000;
}
//En dan zoniet, deadline verlopen
if (distance1 < -5000) {
clearInterval(x);
document.getElementById("formulier").disabled = true;
document.getElementById("demo").innerHTML = "EXPIRED";
item = 100;
// VERWERKEN ALS COUNTDOWN VERLOPEN
$.ajax({
url:"aankoop.php",
method:"POST",
data:{0:item},
dataType:"text",
success:function(data){
fetch_data();
}
});
}
}, 1000);
</script>
