JavaScript een lap HTML laten printen
Ik was bezig met AJAX, en ik wou dus met AJAX een resultaat laten printen. Maar ik zit nu met het probleem dat ik niet weet hoe ik kan zorgen dat JavaScript mijn hele lap HTML plaatst, en wel deze HTML lap:
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
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
<div class="box box">
<div class="box-header">
<h3 class="box-title">Zoekresultaten</h3>
<div class="box-tools pull-right">
<button style="outline: none !important;" type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button style="outline: none !important;" type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
</div>
</div>
<div class="box-body">
<table class="table table-hover">
<thead>
<tr>
<th>Gebruikersnaam</th>
<th>Registratie datum</th>
</tr>
</thead>
<tbody>
<?php
foreach($sql as $value) {
?>
<tr onclick="window.document.location='/paneel/profiel/<?=$value['gebruikersnaam']?>'">
<td><?=$value['gebruikersnaam']?></td>
<td><?php echo date("d-m-Y", $value['registratie_datum']); ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
<div class="box-header">
<h3 class="box-title">Zoekresultaten</h3>
<div class="box-tools pull-right">
<button style="outline: none !important;" type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button style="outline: none !important;" type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
</div>
</div>
<div class="box-body">
<table class="table table-hover">
<thead>
<tr>
<th>Gebruikersnaam</th>
<th>Registratie datum</th>
</tr>
</thead>
<tbody>
<?php
foreach($sql as $value) {
?>
<tr onclick="window.document.location='/paneel/profiel/<?=$value['gebruikersnaam']?>'">
<td><?=$value['gebruikersnaam']?></td>
<td><?php echo date("d-m-Y", $value['registratie_datum']); ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
Mijn ajax code ziet er zo uit:
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
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
<script>
$(document).ready(function(){
$("#profielZoeken").click(function(){
var gebruikersnaam = $("#gebruikersnaam").val();
var dataString = 'gebruikersnaam='+ gebruikersnaam;
if(gebruikersnaam == '') {
document.getElementById('melding').innerHTML = 'Zonder een letter, kunnen wij niet zoeken!';
} else {
$.ajax({
type: "POST",
url: "/paneel/includes/profielenzoeken.php",
data: dataString,
cache: false,
success: function(result){
if(result.split("`")[0] === "0") {
document.getElementById('melding').innerHTML = result.split("`")[1];
}
if(result.split("`")[0] === "1") {
document.getElementById('melding').innerHTML = '';
$("#resultaten").innerHTML= result.split("`")[1];
}
}
});
}
return false;
});
});
</script>
$(document).ready(function(){
$("#profielZoeken").click(function(){
var gebruikersnaam = $("#gebruikersnaam").val();
var dataString = 'gebruikersnaam='+ gebruikersnaam;
if(gebruikersnaam == '') {
document.getElementById('melding').innerHTML = 'Zonder een letter, kunnen wij niet zoeken!';
} else {
$.ajax({
type: "POST",
url: "/paneel/includes/profielenzoeken.php",
data: dataString,
cache: false,
success: function(result){
if(result.split("`")[0] === "0") {
document.getElementById('melding').innerHTML = result.split("`")[1];
}
if(result.split("`")[0] === "1") {
document.getElementById('melding').innerHTML = '';
$("#resultaten").innerHTML= result.split("`")[1];
}
}
});
}
return false;
});
});
</script>
alvast bedankt!
Toevoeging op 05/03/2017 18:01:23:
Zo ziet de html code eruit:
<div class="col-xs-12" id="resultaten">
</div>
daarin moet dus de lap html worden geplaatst
Gewijzigd op 05/03/2017 17:59:19 door - Rob -
Waarom mix je normale JavaScript en jQuery met elkaar? ;-)
Gewijzigd op 05/03/2017 18:16:57 door - Ariën -