Tijden veranderen
PHP via ajax, javascript
Maar krijg telkens "undefined".
En de tekst in de DIV blijft gewoon staan.
Hij ziet wel dat API.PHP geladen is.
En hij geeft ook 12 keer de melding (aantal markers in de database);
id: undefined naam: undefined adres: undefined lat: undefined lng: undefined type: undefined
API.PHP
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$result = mysql_query("SELECT * FROM $tableName"); //query
$data = array();
while ( $row = mysql_fetch_assoc($result))
{
$data[] = $row;
}
echo json_encode($data);
$data = array();
while ( $row = mysql_fetch_assoc($result))
{
$data[] = $row;
}
echo json_encode($data);
CLIENT.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
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="output">this element will be accessed by jquery and this text will be replaced</div>
<script type="text/javascript">
$.ajax({
url: 'api.php',
data: "",
dataType: 'json',
success: function(rows)
{
for (var i in rows)
{
var row = rows[i];
var id = row[0];
var name = row[1];
var address = row[2];
var lat = row[3];
var lng = row[4];
var type = row[5];
$('#output').append("<b>id: </b>"+id+"<b> naam: </b>"+name+"<b> adres: </b>"+address+"<b> lat: </b>"+lat+"<b> lng: </b>"+lng+"<b> type: </b>"+type)
.append("<hr />");
}
}
});
<script type="text/javascript">
$.ajax({
url: 'api.php',
data: "",
dataType: 'json',
success: function(rows)
{
for (var i in rows)
{
var row = rows[i];
var id = row[0];
var name = row[1];
var address = row[2];
var lat = row[3];
var lng = row[4];
var type = row[5];
$('#output').append("<b>id: </b>"+id+"<b> naam: </b>"+name+"<b> adres: </b>"+address+"<b> lat: </b>"+lat+"<b> lng: </b>"+lng+"<b> type: </b>"+type)
.append("<hr />");
}
}
});
Indien je met AJAX/JavaScript aan de slag gaat zorg dan ook dat je fatsoenlijk kunt debuggen, dan worden dit soort vragen triviaal.
Gebruik console.log() en maak gebruik van de netwerktab van je development balk in je browser (doorgaans onder functietoets F12).
Het is een bestaand script, en volgens de reacties werkte het.
Ik kan ook in de console zien dat api.php wordt gelezen zonder foutmelding.
In api.php wordt ook alles netjes opgehaald.
En er worden ook 12 regels geschreven in client.php, maar de velden zijn leeg.
Maar zal er nog eens op studeren....
SELECT * FROM $tableName
Ferdi R op 17/05/2016 21:41:32:
Ik denk dat jou api.php niets ophaalt, klopt de tabelnaam ect wel?
SELECT * FROM $tableName
SELECT * FROM $tableName
Het verwijst naar een variable, alleen dan zonder quotes.
Code (php)
1
while ( $row = mysql_fetch_array($result))
$tableName staat al eerder vermeld...
Het werkt nu in principe wel.
gebruik liever mysqli_*() of PDO als je met de tijd mee wilt gaan.
Heb een mooie tuto gevonden op dit forum.
Want op de een of andere manier lukt het me nog steeds niet.
Dit stukje script was een studie. Kijken welke methoden het meest geschikt zijn in een toepassing.
Concreet gaat het om het vervangen van een ajax-databestand (txt) door de gegevens uit de database.
ajax: '../ajax/data/arrays.txt',
Dit is stukje uit script dat een/twee scroll tabel maakt met een sorteer en zoekfunctie.
Met het ajax-databestand werkt het prima.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
$('table.table').DataTablse( {
ajax: '../ajax/data/arrays.txt',
scrollY: 200,
scrollCollapse: true,
paging: false
} );
// Apply a search to the second table for the demo
$('#myTable2').DataTable().search( 'New York' ).draw();
} );
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
$('table.table').DataTablse( {
ajax: '../ajax/data/arrays.txt',
scrollY: 200,
scrollCollapse: true,
paging: false
} );
// Apply a search to the second table for the demo
$('#myTable2').DataTable().search( 'New York' ).draw();
} );
Werkend voorbeeld:
https://datatables.net/examples/api/tabs_and_scrolling.html
Gewijzigd op 18/05/2016 00:39:14 door Hans De Ridder
Voor de geïnteresseerden:
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
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$table = 'markers';
$primaryKey = 'id';
$columns = array(
array( 'db' => 'name', 'dt' => 0 ),
array( 'db' => 'address', 'dt' => 1 ),
array( 'db' => 'lat', 'dt' => 2 ),
array( 'db' => 'lng', 'dt' => 3 ),
array( 'db' => 'type', 'dt' => 4 ),
);
// SQL server connection information
$sql_details = array(
'user' => 'xxxxxxxx',
'pass' => 'xxxxxxxxxxxxxxxx',
'db' => 'xxxxxxxxxx',
'host' => 'xxxxxxxxx'
);
require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
$primaryKey = 'id';
$columns = array(
array( 'db' => 'name', 'dt' => 0 ),
array( 'db' => 'address', 'dt' => 1 ),
array( 'db' => 'lat', 'dt' => 2 ),
array( 'db' => 'lng', 'dt' => 3 ),
array( 'db' => 'type', 'dt' => 4 ),
);
// SQL server connection information
$sql_details = array(
'user' => 'xxxxxxxx',
'pass' => 'xxxxxxxxxxxxxxxx',
'db' => 'xxxxxxxxxx',
'host' => 'xxxxxxxxx'
);
require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
CLIENT:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "processing.php",
"scrollY": 200,
"scrollCollapse": true,
"paging": true
} );
} );
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "processing.php",
"scrollY": 200,
"scrollCollapse": true,
"paging": true
} );
} );