ID gebruiken na een innerHTML
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
echo '
<div class="usersleft">
<select name="drop1" id="Select1" size="10" multiple="multiple">
';
while($row= mysql_fetch_assoc($sql)){
echo '
<option onClick="DisplayUser('.$row['ID'].');">'.$row['Username'].'</option>
';
}
echo '
</select>
</div>
<div class="usersright" id="viewusers">
users informattion
';
echo '
</div>
';
<div class="usersleft">
<select name="drop1" id="Select1" size="10" multiple="multiple">
';
while($row= mysql_fetch_assoc($sql)){
echo '
<option onClick="DisplayUser('.$row['ID'].');">'.$row['Username'].'</option>
';
}
echo '
</select>
</div>
<div class="usersright" id="viewusers">
users informattion
';
echo '
</div>
';
Js stukje
Code (php)
1
2
3
2
3
function DisplayUser(id){
document.getElementById('viewusers').innerHTML= id;
}
document.getElementById('viewusers').innerHTML= id;
}
Op die manier krijg ik in div vieuwusers het id te zien van de gebruiker. alleen hoe kan ik dat id gebruiken voor in een bijvoorbeeld query om op te halen. of hoe kan ik de eerder opgevraagde gegevens, ipv van een nieuwe guery draaien, naar die div toe stuen.
Ik zou het dan eerder in een jQuery (makkelijkere ajax call) doen. Dan zou het iets zijn als:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$('#Select1').change(function(){
var id = $(this).val();
$('.usersright').empty();
$.get("users.php", { user_id: id },
function(data){
$('.usersright').append(data);
});
});
var id = $(this).val();
$('.usersright').empty();
$.get("users.php", { user_id: id },
function(data){
$('.usersright').append(data);
});
});
users.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<?php
if ($_SERVER['REQUEST_METHOD'] == 'GET'){
if ($_GET['user_id'] != ''){
$query = mysql_query("SELECT * FROM users WHERE user_id = '".mysql_real_escape_string($_GET['user_id'])."'");
if ($row = mysql_fetch_assoc($query)){
// hier je info van de database outputten
}
}
}
?>
if ($_SERVER['REQUEST_METHOD'] == 'GET'){
if ($_GET['user_id'] != ''){
$query = mysql_query("SELECT * FROM users WHERE user_id = '".mysql_real_escape_string($_GET['user_id'])."'");
if ($row = mysql_fetch_assoc($query)){
// hier je info van de database outputten
}
}
}
?>
Gewijzigd op 15/02/2013 10:08:04 door Albert de Wit
Uhmm..
Het is een detail, maar volgens mij is deze regel een nutteloze.
Als je een request stuurt naar de server heb je altijd een GET, dus die is overbodig.
Mocht je het op een eenvoudige Javascript-manier willen doen (zonder jQuery o.i.d.), dan denk ik dat dit moet werken:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
echo '<select name="drop1" id="Select1" size="10" multiple="multiple" onChange="javascript: DisplayUser();">';
while ($row = mysql_fetch_assoc($sql))
{
echo '<option value="'. $row['id'] .'">'. $row['Username'] .'</option>';
}
echo '</select>';
?>
echo '<select name="drop1" id="Select1" size="10" multiple="multiple" onChange="javascript: DisplayUser();">';
while ($row = mysql_fetch_assoc($sql))
{
echo '<option value="'. $row['id'] .'">'. $row['Username'] .'</option>';
}
echo '</select>';
?>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function DisplayUser()
{
var index = document.getElementById('Select1').selectedIndex;
var option = document.getElementById('Select1').options;
document.getElementById('viewusers').innerHTML = option[index].text;
}
</script>
function DisplayUser()
{
var index = document.getElementById('Select1').selectedIndex;
var option = document.getElementById('Select1').options;
document.getElementById('viewusers').innerHTML = option[index].text;
}
</script>
Voor de ajax call maakt het niet zoveel uit.
Het enige wat moet veranderen is:
Code (php)
1
$.get("users.php", { user_id: id },
naar:
Code (php)
1
$.post("users.php", { user_id: id },
En in het php script:
Alleen nu nog de Ajax call naar het PHP bestand waar de query word uitgevoerd om de gegevens terug naar de pagina te sturen.
Gewijzigd op 15/02/2013 10:39:50 door Albert de Wit
Echter, ik zou voor $.get gaan als je enkel en alleen gegevens wilt ophalen en als er niets met de data gedaan wordt. Technisch gezien is $.get sneller omdat je dan minder data verstuurt. Bij $.get gaat het om één pakketje en bij $.post gaat het om minstens twee pakketjes (headers en de content). Dit verschil is nihil, maar toch.
Ga je gegevens verwerken, dan is $.post wellicht een betere optie.
Edit:
@Albert:
Ik heb even niet gekeken naar de verdere wensen, ik heb puur de code van de TS bekeken en hier een alternatief voor bedacht (mijn fout). Maar de Javascript-functie kun je simpel aanpassen. Hierin kun je de $.get request uitvoeren naar het betreffende PHP-bestand.
Gewijzigd op 15/02/2013 10:48:08 door Kevin de Groot
Maar ik zal is met de boven genoemde opties gaan prutsen, ben echt net beginnend met Javscript en heb nog geen ervaring met jQuery. Maar het is nooit te laat om er mee te beginnen :p.
Een goed voorbeeld is een zogenaamde XMLHTTPRequest, per browser moet dit anders gedaan worden.
Mocht je er niet uit komen dan kan ik wel een complete(re) code plaatsen waarvan ik vermoed dat dit wel werkt. Succes!
code die ik nu heb:
js.js
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$('#Select1').change(function(){
var id = $(this).val();
$('.usersright').empty();
$.get("functions.php", { user_id: id },
function(data){
$('.usersright').append(data);
});
});
var id = $(this).val();
$('.usersright').empty();
$.get("functions.php", { user_id: id },
function(data){
$('.usersright').append(data);
});
});
functions.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
function view_users(){
if($sql = mysql_query("SELECT * FROM users")){
echo '
<div class="usersleft">
<select name="drop1" id="Select1" size="10" multiple="multiple">
';
while ($row = mysql_fetch_assoc($sql))
{
echo '<option value="'. $row['ID'] .'">'. $row['Username'] .'</option>';
}
echo '
</select>
</div>
<div class="usersright" id="viewusers">
';
if ($_SERVER['REQUEST_METHOD'] == 'GET'){
if ($_GET['user_id'] != ''){
echo $_GET['user_id'];
}
}
echo '
</div>
';
}
}
if($sql = mysql_query("SELECT * FROM users")){
echo '
<div class="usersleft">
<select name="drop1" id="Select1" size="10" multiple="multiple">
';
while ($row = mysql_fetch_assoc($sql))
{
echo '<option value="'. $row['ID'] .'">'. $row['Username'] .'</option>';
}
echo '
</select>
</div>
<div class="usersright" id="viewusers">
';
if ($_SERVER['REQUEST_METHOD'] == 'GET'){
if ($_GET['user_id'] != ''){
echo $_GET['user_id'];
}
}
echo '
</div>
';
}
}
index.php
Code (php)
1
2
3
4
5
6
2
3
4
5
6
if(isset($_GET['p'])){
$_GET['p']();
}
else{
Home();
}
$_GET['p']();
}
else{
Home();
}
Gewijzigd op 15/02/2013 12:25:37 door Teun Hesseling
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
$('#Select1').change(function(){
var id = $(this).val();
$('.usersright').empty();
$.get("functions.php", { user_id: id },
function(data){
$('.usersright').append(data);
});
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
$('#Select1').change(function(){
var id = $(this).val();
$('.usersright').empty();
$.get("functions.php", { user_id: id },
function(data){
$('.usersright').append(data);
});
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
Gewijzigd op 15/02/2013 12:29:41 door Albert de Wit
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
$('#Select1').change(function(){
var id = $(this).val();
$('.usersright').empty();
$.get("functions.php", { user_id: id },
function(data){
$('.usersright').append(data);
});
});
});
$('#Select1').change(function(){
var id = $(this).val();
$('.usersright').empty();
$.get("functions.php", { user_id: id },
function(data){
$('.usersright').append(data);
});
});
});
Toevoeging op 15/02/2013 14:58:56:
ik zal je een print scr geven, zodat je het ziet.
Toevoeging op 15/02/2013 15:04:07:
Toevoeging op 15/02/2013 15:26:54:
Ajax laad een bestand in zonder dat de hele webpagina herlaad. Wat je dus moet doen is een bestand maken (user.php ofzo) die de gegevens laad zien van een bepaalde user aan de hand van een id. Die id geef je mee in een $_GET variabele naar dat bestand die vervolgens kijkt wat hij moet doen en de output terug stuurt.
Ik heb al eerder aangegeven hoe zo'n bestand eruit ziet (jij moet hem alleen nog aanpassen naar je database ontwerp.)
Quote:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<?php
if ($_SERVER['REQUEST_METHOD'] == 'GET'){
if ($_GET['user_id'] != ''){
$query = mysql_query("SELECT * FROM users WHERE user_id = '".mysql_real_escape_string($_GET['user_id'])."'");
if ($row = mysql_fetch_assoc($query)){
// hier je info van de database outputten
}
}
}
?>
if ($_SERVER['REQUEST_METHOD'] == 'GET'){
if ($_GET['user_id'] != ''){
$query = mysql_query("SELECT * FROM users WHERE user_id = '".mysql_real_escape_string($_GET['user_id'])."'");
if ($row = mysql_fetch_assoc($query)){
// hier je info van de database outputten
}
}
}
?>
Een beginnende 'noob' met jQeury zoals ik, kan nog wel is lastig zijn :p.
Dit is een leuke framework om dit soort werk mee klaar te spelen. Ik gebruikte dit zelf ook enorm veel, maar ben ervan af gestapt omdat je uiteindelijk toch alles zelf wilt maken.
Voorbeeld gebruik:
Code (php)
1
2
3
2
3
var gebruikersnaam = agent.call('', 'getGebruikersnaam', '', 1337);
document.write(gebruikersnaam);
document.write(gebruikersnaam);
Eerste parameter is de locatie van de PHP-functie (bijv. test.php, indien je deze leeg laat mag de functie zich in hetzelfde bestand bevinden).
De tweede parameter is de naam van de PHP-functie (bijv. getGebruikersnaam).
De derde parameter kun je gebruiken als je de output van de PHP-functie (dus wat die returnt) in een Javascript-functie wilt plaatsen. Ik gebruikte het zelf bijna niet, maar hier kun je dan de naam van de Javascript-functie plaatsen.
De vierde parameter is je eerste parameter voor jouw PHP-functie. In dit voorbeeld is dit het gebruikersid (1337).
Dit is slechts een beknopte uitleg, voorbeelden en code staan op het internet en in het ZIP-bestandje. Het is - mijn inziens - wel de moeite waard om even te bekijken als je begint met AJAX.