Meerdere velden invullen met Ajax en PHP

Door Dorgaldir op vrijdag 5 april 2013 13:40 - Reacties (12)
Categorieën: Ajax, IT, Jquery, PHP, Views: 2.284

Met de standaard ajax scriptjes die ik tot hiertoe geschreven heb heb was het doel telkens maar in één html tag iets toe te voegen. Een <div>, een <p>, en dergelijke,...
Nu moest ik vandaag een textarea en een input text veld van inhoud laten veranderen vanuit één ajax call. Het heeft me even geduurd maar ik heb een oplossing gevonden en wilde die graag delen voor het geval andere mensen met dit probleem zitten.

Wat er gebeurd is eigenlijk simpel, zoals bij elke ajax call verzamel je je gegevens en die worden doorgestuurd naar je gekozen script, aldaar verwerk je ze zoals je gewoon bent maar voor het einde moet je je gegevens in een array zetten en de headers verzetten naar json
code:
1
header('Content-type: application/json');

en als je dan encodeerd als json dan kan je de json variabele gewoon gebruiken in je basisscript om de velden apart in te vullen.

Het is wat duidelijker met enkele lapjes code.


PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<select id="sloganchoise" name="sloganchoise" onchange="getslogan()" required>
<?php
  $ar_cat[1] = "cat 1";
  $ar_cat[2] = "cat 2";
  Foreach($ar_cat as $key => $value){
    if($key == $cat){
      echo "<option value=\"$key\" selected>$value</option>";
    }
    else{
      echo "<option value=\"$key\">$value</option>";
     }  
  }
?>
</select>

<textarea id="slogan" name="slogan" required rows="4" cols="45"><?php echo $slogan;?></textarea>

<input type="text" id="sloganurl" name="sloganurl" value="<?php echo $url;?>"/>



en die roept volgend script aan:


JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
function getslogan(){
            var cat = "cat=" + $('#sloganchoise option:selected').val();
            $.ajax({  
                type: "POST",
                url: 'get_slogan.php',  
                dataType: 'json',  
                data: cat,  
                success: function(response){  
                   $('#slogan').val(response['slogan']);
                   $('#sloganurl').val(response['url']);
                }
            });
        }




en als volgt heb je get_slogan.php

PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php  
//Get records from DB matching $_POST['cat']; 

//Iterate results: 
$results = array(); 
if($resultset->num_rows > 0) {  
    while($row = $resultset->fetch_assoc()) {  
       array_push($results, $row); 
    }  
}  

// Return JSON result 
header('Content-type: application/json');  
echo json_encode(results);



Mocht mijn uitleg niet duidelijk zijn dan stel je maar vragen in de reacties en zal ik proberen mijn tekst te verduidelijken. ;)

edit:
1: Heb wegens opmerkingen in de reacties de sql-injection beveiliging toegevoegd.

edit:
2: heb code snippet vervangen door de versie van RobIII

App inventor voor android: een eerste kennismaking

Door Dorgaldir op woensdag 1 september 2010 09:55 - Reacties (7)
Categorie: Android, Views: 4.834

Tot mijn groot spijt heb ik nog niets constructiefs kunnen doen aan de media organizer waar ik het in mijn vorige post over had, maar dat wil niet zeggen dat ik stil heb gezeten.

Ik heb me een tijdje geleden aangemeld voor de app inventor van google. Na een tijdje kreeg ik toegang en enkele dagen geleden heb ik me erachter gezet om er eens iets mee te doen.
De app inventor
De app inventor is een innovatieve tool waar je op een simpele wijze applicaties mee kan maken voor je android toestel.
In je browser krijg je een "toestel" waar je gewoon elementen naartoe kan slepen, zoals textvakken, labels, buttons, en dergelijke. Van deze elementen kan je dan verschillende properties aanpassen op een zeer simpele wijze.

http://i61.photobucket.com/albums/h66/galen_nick/appinventor1-kl.png

Na wat prutsen en uitzoeken was ik hier vrij vlug mee weg, ik vond het persoonlijk heel intuitief werken.

Als je een layout hebt en je wilt verdergaan naar de codering van je programma dan ga je naar de "Blocks editor" zoals het genoemd word.
Om hier je programma te laten werken heb je geen uitgebreide kennis van programmeren nodig maar wat basiskennis van pseudo code oid kan zeker geen kwaad aangezien je de logica nog wel steeds moet snappen en kunnen produceren.
Maar verder moet je je hier geen zorgen maken over case sensitivity aangezien je niet echt zelf code moet schrijven. Want zoals de naam doet vermoeden word hier met blocks gewerkt.
Elk element dat je aanmaakt, elke logische bewerking die de app inventor kent, hebben allemaal een block gekregen met een bepaalde vorm en kleur. Eenmaal daar word het puzzelen.

Je neemt bv het blok screen1.initialize en plakt daaronder wat je wil dat je programma doet, een if-else statment bijvoorbeeld.

http://i61.photobucket.com/albums/h66/galen_nick/appinventor2-kl.png

Mijn eerste indrukken
Zoals al vermeld vind ik het zeer intuitief werken, het is een proper programma dat doet wat het moet doen. Je leert vrij snel hoe je ermee moet werken en op vrij korte termijn (lees een dagje ofzo) kan je vrij goede programma's knustelen.
Ik ben tijdens mijn testperiode ook even geprobeerd om de media organizer een vorm te geven via de app inventor. Binnen de korste keren kon ik een naam van een medium opslaan in een database en deze lijst terug laten ophalen. Daar heb ik bij gelaten omdat er dingen zijn die ik in de media organizer wil plaatsen die via de app inventor niet mogelijk zijn. Misschien komen de functionaliteiten die ik nodig heb nog wel maar zoals wel meer bij google is de app inventor nog in bèta fase.
Daarna heb ik een app gemaakt met daarin een lijst met willekeurige strings en geprobeerd een zoekfunctie te maken. Na wat puzzelen had ik vrij snel gevonden hoe dit werkte.
Ik ga hier geen tutorial van maken en uitleggen hoe ik het gedaan heb want er zijn genoeg tutorials te vinden op het net, zelfs bij de app inventor zelf. Dat is ook iets waar ik zeer tevreden over ben, er zit bij de app inventor een "learn" deel waar zo goed als alles dat je moet weten over de inventor instaat.
Voor de geïnteresseerden: klik

Testen
Om je applicatie te testen kan je je toestel connecten met je pc of gewoon de inventor een QR-code laten generen waarmee je de zelfgemaakte applicatie kan downloaden naar je toestel. Je kan het ook de source van je applicatie downloaden naar je pc en deze delen met collega's en/of vrienden waarna zij deze kunne uploaden in hun eigen account van app inventor.

Enkele dingen die ik mis
Het eerste wat ik miste was de mogelijkheid om van scherm te wisselen, je hebt screen1 maar je kan geen screen2 maken en daartussen wisselen. Hier kan je rondwerken en met de visibility van screen arrangement elementen spelen.
Je neemt gewoon een screen arrangement, plaats daar je andere elementen in en geeft deze visibility true bij opstarten, je maakt een ander screen arrangement met elementen en zet de visibility op false bij opstarten en wisselt deze gewoon.
Ik vind het geen mooi programmeer werk en hoop dat dit nog veranderd in de toekomst.

Je kan ook je elementen niet altijd plaatsen zoals je zelf wil, met een tablearrangement kan je wel een beetje plaatsen maar je kan de kolommen ook geen breedte van bv 25% geven, enkel automatisch, volledige breedte of een fixed value. Iets wat wel eens tot frustratie kan leiden als je echt wil dat iet op DIE bepaalde plaats staat en dat dus gewoonweg niet lukt. En ik maak echt niet graag gebruik van die fixed value omdat sommige toestellen een andere resolutie of schermgrootte hebben.

Verder kan je gewoonweg niet alle programmatorische logica invoegen die je wilt, omdat je beperkt bent door de blocks die je hebt. Wat volgens mij ook niet kan is om een broncode te onttrekken waar je wel in kan gaan programmeren. Iets wat op zich handig kan zijn, dan kan je de layout en de simpele logica vrij snel maken in de app inventor, je broncode opvragen en in je favoriete programmeer programma laden waarna je de meer ingewikkelde functies zou uitwerken. Maar dit is volgens mij nog niet mogelijk, mocht dit wel zo zijn mag je mij dat altijd laten weten :p

Besluit
Als je niet te veel van programmeren kent of gewoon op een simpele manier een simpele app wil maken voor je android is de app inventor zeker een aanrader (link) maar als je echt goede apps wil maken zal je toch nog moeten leren programmeren ;)

Ik hoop dat jullie iets gehad hebben aan mijn uitleg, ik heb er allesinds een leuke ervaring aan over gehouden om de inventor te testen en erover te schrijven.