ID gebruiken na een innerHTML

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Teun Hesseling

Teun Hesseling

15/02/2013 08:43:19
Quote Anchor link
HTML stukje
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
        ';


Js stukje

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
function DisplayUser(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.
 
PHP hulp

PHP hulp

02/08/2021 11:48:07
 
Albert de Wit

Albert de Wit

15/02/2013 10:02:43
Quote Anchor link
Ajax?

Ik zou het dan eerder in een jQuery (makkelijkere ajax call) doen. Dan zou het iets zijn als:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
    });
});


users.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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
        }
    }
}


?>
Gewijzigd op 15/02/2013 10:08:04 door Albert de Wit
 
Bart V B

Bart V B

15/02/2013 10:11:26
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
if ($_SERVER['REQUEST_METHOD'] == 'GET')
?>

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.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<?php
if(isset($_GET['user_id']) && trim($_GET['user_id']) != '')
{

   //voer code uit.
}
?>
 
Albert de Wit

Albert de Wit

15/02/2013 10:27:59
Quote Anchor link
Als iemand dat afzonderlijke bestand opent en geen $_GET waarde aan de url meegeeft en daardoor een error ziet... ik dacht dat het meer was om het een beetje waterdicht te houden, niet dat iemand er wat aan heeft maar toch. Kun je eventueel inderdaad weglaten wat Bart V B zegt.
 
Kevin de Groot

Kevin de Groot

15/02/2013 10:32:05
Quote Anchor link
Werkt dat überhaupt wel? De option-elementen hebben niet eens een value.

Mocht je het op een eenvoudige Javascript-manier willen doen (zonder jQuery o.i.d.), dan denk ik dat dit moet werken:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>';
?>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
Bart V B

Bart V B

15/02/2013 10:37:54
Quote Anchor link
Misschien nog netter om een post request te doen?
Voor de ajax call maakt het niet zoveel uit.
Het enige wat moet veranderen is:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$.get("users.php", { user_id: id },

naar:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$.post("users.php", { user_id: id },


En in het php script:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<?php
if( $_SERVER['REQUEST_METHOD'] == 'POST' )
{

   if( isset( $_POST['user_id'] ) && trim( $_POST['user_id'] ) !='' )
   {

      // hier code uitvoeren
   }
}

?>
 
Albert de Wit

Albert de Wit

15/02/2013 10:39:13
Quote Anchor link
@Kevin de Groot
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
 
Kevin de Groot

Kevin de Groot

15/02/2013 10:45:37
Quote Anchor link
Dan moet de TS wel ervaring/verstand hebben met/van jQuery. Uit de geplaatste code kon ik opmaken dat dit wellicht niet het geval was. Maar uiteraard verkies ik ook jQuery boven de methode die ik eerder heb geplaatst.

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

Teun Hesseling

15/02/2013 11:19:01
Quote Anchor link
Bedankt allen voor de reacties, Wat ik wou was een <select> lijst van de accounts. Op klikt en dan in een div ernaast de gegevens ziet met de opties om het te kunnen wijzigen of account te verwijderen.

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.
 
Kevin de Groot

Kevin de Groot

15/02/2013 11:29:55
Quote Anchor link
Perfect, een groot voordeel van jQuery is dat vele opties grotendeels cross-browser zijn.

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!
 
Albert de Wit

Albert de Wit

15/02/2013 11:40:08
Quote Anchor link
Ik kan geen Javascript maar wel jQuery, ik zou als ik jou was ook eerst jQuery leren. Heel makkelijk om te leren.
 
Teun Hesseling

Teun Hesseling

15/02/2013 12:24:39
Quote Anchor link
Het lukt mij toch niet echt om dat jQeury stukje werken te krijgen. Wat misschien wel handig is om te weten is dat het in een function in functions.php gebeurd. die aangeroepen wordt met deze link: http://localhost/Admin?p=view_users#1. en ja ik draai hem op localhost, met xampp. betekent dit dat ik nog iets moet downloaden om jQeury draaiende te krijgen?

code die ik nu heb:
js.js
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
    });
});

functions.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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>
        ';
    }    
}

index.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
if(isset($_GET['p'])){
    $_GET['p']();
}
else{
    Home();
}
Gewijzigd op 15/02/2013 12:25:37 door Teun Hesseling
 
Albert de Wit

Albert de Wit

15/02/2013 12:26:38
Quote Anchor link
het is handig om dit net voor je </body> tag te zetten

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
Gewijzigd op 15/02/2013 12:29:41 door Albert de Wit
 
Teun Hesseling

Teun Hesseling

15/02/2013 12:46:13
Quote Anchor link
ik had idd die jQeury link nog niet in mijn <head> </head>. Heb het in de <head></head> gezet. Maar werken heeft hij geen zin in. ik vraag me af of dit ligt aan : $.get("functions.php", { user_id: id }, en dan die functions.php . moet die misshien anders?
 
Albert de Wit

Albert de Wit

15/02/2013 13:00:48
Quote Anchor link
Ik zei in mijn vorige post dat je hem boven het eindetag van je body moest zetten. Dan word hij automatisch ingeladen. Het kan wel op jouw manier maar dan moet het anders namelijk:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
        });
    });
});
 
Teun Hesseling

Teun Hesseling

15/02/2013 14:48:43
Quote Anchor link
Het werkt soort van, hij laadt de hele pagina opnieuw in die ene div, maar het id komt er wel bij te staan

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:

http://www.urt.co/img/wf9du79t8f.png
 
Albert de Wit

Albert de Wit

15/02/2013 15:24:11
Quote Anchor link
Dat is omdat je de Ajax call naar hetzelfde bestand maakt. Dat moet natuurlijk niet. Er vanuitgaand dat je niet weet hoe Ajax werkt, hier een schematisch getekende werking:

http://www.narnio.com/wp-content/uploads/2009/03/ajax-diagram.jpg



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)
PHP script in nieuw venster Selecteer het PHP script
1
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
        }
    }
}


?>
 
Teun Hesseling

Teun Hesseling

15/02/2013 15:46:45
Quote Anchor link
Ah , dat was het inderdaad. Bedankt voor je geduld en hulp.
Een beginnende 'noob' met jQeury zoals ik, kan nog wel is lastig zijn :p.
 
Albert de Wit

Albert de Wit

15/02/2013 16:08:10
Quote Anchor link
Als ik jou was zou ik niet met hoofdletters gebruiken. Die moet je niet in classes/id's/url's gebruiken want dat kan verwarring opleveren.
 
Kevin de Groot

Kevin de Groot

15/02/2013 16:31:26
Quote Anchor link
Zoek anders eens op Google naar (de mogelijkheden van) de zogenaamde "Ajax Agent". Als je dit downloadt zitten er voorbeelden in de ZIP.

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
var gebruikersnaam = agent.call('', 'getGebruikersnaam', '', 1337);

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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.