Databas<->PHP<->JavaScript<->Canvas = confuzzled

Jag håller på att bli tokig och hade jag inte redan varit halvflint så hade jag ryckt håret ur skalpen.

Jag sitter med ett projekt som kommer använda sig av en databas för att hämta information, bl.a. bildsökvägar och storlekar, till ett canvas-element.
Jag har fastnat mellan databasen och canvasen, då jag inte är helt säker på hur man kan hämta infon till javascriptsdelen som kontrollerar canvas-elementet.

Jag har i flera timmar sökt efter info och testat olika sätt, det som jag fastnat på mest är att hämta infon med hjälp av PHP, skicka via JSON till sidan och plocka JSON-infon med JavaScript till canvas-elementet.

Problemet jag har är dock att jag efter en timmes intensiv sökning inte ens kan hitta info om hur du hämtar JSON-datan från databashämtarsidan.php till canvassidan.html, än mindre hur du kan strukturera JSON-informationen när allt blir så rörigt med PHP's json_encode....

Finns det någon här som lekt med JavaScript och databaser tidigare och kan hjälpa mig hitta bra, solid, lättförstålig information om hur jag skall gå till väga?

Joo, men nu var det åt andra hållet jag ville ha det. Jag vill ha upp bilden på canvasen och informationen om bilden ligger i databasen.

Databas:
Namn: Artikel1, Bild: "/img/Artikel1.jpg", X: 500, Y: 250

Jag vill ha ut den informationen till min canvas image-renderare, så jag kan lägga in typ
var img = new Array();
img = [hämta från databas];
while(img har platser fyllda){
img[x].size = databas[x]&databas[y];
img[x].src = databas[Bild];
}

Tackar, nu vet jag slutändan, men hur använder jag json_encode utan att få formatet [{"0": "Första", "rubrik": "Första", "1": "Andra", "rubrik2": "Andra".... och så vidare.
Jag vill ha bort siffrorna som gör varje position dubbel... Kan posta hela strängen jag får när jag kör json_encode här:

[{"0":"1001","art":"1001","1":"Test object for testing with","description":"Test object for testing with","2":"200","X":"200","3":"400","Y":"400","4":"50","Z":"50","5":"\/img\/","imgPath":"\/img\/","6":"101","productGroupNumber":"101","7":"Test Objects","productGroupName":"Test Objects","8":"A","classification":"A","9":"10101","EAN":"10101","10":"1","isVisible":"1"},
{"0":"1002","art":"1002","1":"Test number Two","description":"Test number Two","2":"400","X":"400","3":"200","Y":"200","4":"50","Z":"50","5":"\/img\/","imgPath":"\/img\/","6":"101","productGroupNumber":"101","7":"Test Objects","productGroupName":"Test Objects","8":"B","classification":"B","9":"10102","EAN":"10102","10":"0","isVisible":"0"},
{"0":"1003","art":"1003","1":"Test three is here","description":"Test three is here","2":"200","X":"200","3":"200","Y":"200","4":"50","Z":"50","5":"\/img\/","imgPath":"\/img\/","6":"101","productGroupNumber":"101","7":"Test Objects","productGroupName":"Test Objects","8":"C","classification":"C","9":"10103","EAN":"10103","10":"1","isVisible":"1"},
{"0":"1004","art":"1004","1":"Test four comes last and contains a bunch of random lettering asdjkgjgnsdfnafnnfeoitjpjyhapmkfnashrogrnagjfaglofkgjairopagnirnboetijhpip ud If you can read this then it can take this many letters!","description":"Test four comes last and contains a bunch of random lettering asdjkgjgnsdfnafnnfeoitjpjyhapmkfnashrogrnagjfaglofkgjairopagnirnboetijhpip ud If you can read this then it can take this many letters!","2":"200","X":"200","3":"200","Y":"200","4":"50","Z":"50","5":"\/img\/","imgPath":"\/img\/","6":"101","productGroupNumber":"101","7":"Test Objects","productGroupName":"Test Objects","8":"C","classification":"C","9":"10103","EAN":"10103","10":"1","isVisible":"1"}]};

Och det är från en tabell som ser ut följande:

.art;.description;.X;.Y;.Z;.imgPath;.productGroupNumber;.productGroupName;.classification;.EAN;.isVisible
1001;Test object for testing with;200;400;50;/img/;101;Test Objects;A;10101;1
1002;Test number Two;400;200;50;/img/;101;Test Objects;B;10102;0
1003;Test three is here;200;200;50;/img/;101;Test Objects;C;10103;1
1004;Test four comes last and contains a bunch of random lettering asdjkgjgnsdfnafnnfeoitjpjyhapmkfnashrogrnagjfaglofkgjairopagnirnboetijhpip ud If you can read this then it can take this many letters!;200;200;50;/img/;101;Test Objects;C;10103;1

Ok, in the meantime kanske du kan svara på hur man använder parametern data i ditt exempel ovan? Kollade genom API'n, men blir inte mycket klokare... Försökte skriva ut den rätt ut, men får felet "data is undefined", så jag måste ju göra något med den först... Jag är helt lost känner jag nu, men om jag bara kan komma över den där "ahaaaa-tröskeln", så skall det nog flyta på.

Jo, jag körde $img = $row med en gång, som det stod i alla fyra guider jag läste >.< Prövar på ditt sätt och ser vad som händer.

[edit]: Testade med det, fast den skickar bara ut sista raden i tabellen. Prövade med .= också, samma resultat.

Sätter mig och leker lite med det, så får vi se vad som händer.

  success: processImages(data)

Ahaaa *Där gick det upp ett ljus*

Du skall ha jättetack för all hjälp, du är en riktig livräddare!

Vi fortsätter på denna tråden, samma projekt, så jag slipper skriva om alla specs.

Jag kan hämta info från databasen nu och allt är frid och fröjd och jag har gjort en liten funktion som frågar databasen vilken bild som en viss artikel har och den returnerar då sökvägen.
Hur kan jag få denna returnerade sträng att hamna automatiskt i en img.src?

Alltså, om jag trycker på knapp1 vill jag att sökvägen för bilden för artikel1 skall hamna i bild1's src, om jag trycker på knapp2 skall sökvägen för artikel2's bild hamna i bild1's src osv...

Jag kan alltså få informationen, men vet inte hur jag på ett dynamiskt sätt kan få in informationen i de element som behöver dem. (idén är att man skall kunna kalla på hur många bilder som helst och för varje gång man kallar på en bild skall ett nytt bildelement skapas och läggas i en canvas)

function addImage(url, x, y)
{
  image = new Image();
  image.src = url;
  image.onload = function(){
    context.drawImage(image, x, y);
  }
}

Det ser ut som något jag kommer kunna använda. Jag har dock ytterligare ett problem (sorry, jag känenr mig så nOOb just nu). Jag skall ju hämta sökvägen till bilden via en databas och kan ganska lätt få informationen från databasen till en funktion med hjälp av ajax, men jag kan inte lägga den informationen i en variabel.

function getImageSrc(article) {  
		dataString = "asked=" + article;
		$.ajax({
			url:'getImage.php',
			type: "POST",
			data: dataString,
			success: function (data) {
				alert(data);
				return data; 
			}
		});
	}

Ovanstående funkar utan problem.
Här kommer problemet:

var source
			for(i = 1; i<=4; i++){
				var img = new Image();
				var article = "100" + i;
				source = getImageSrc(article);	//Hur får man den att köra funktionen först?
			alert('source ' + source + ' article ' + article + ' i ' + i);		
				img.src = source;
				pics.push(img);
			}

Enligt alerten så är source undefined och när jag kör båda alertsen (här och i funktionen getImageSrc), så kommer funktionens alert sist, som om den försöker köra img.src = source innan source fått ett värde.

Jag prövade med det, men fortfarande samma resultat. Problemet är inte att data inte fylls, det gör den, men source får inget värde, som om den loopen som den ligger i ligger asynkront, men det finns ju ingen flagga för det i vanligt javascript.
Jag har googlat som en galning hela dagen utan resultat, hittar bara en massa artiklar om variable scope och en och annan med samma fråga, fast utan vettiga svar.

Tackar, helt underbart. Har äntligen fått ordning på koden.
Hade inte klarat det utan dig, så hjärtligt tack idag igen!

Ny dag, nya javascriptsfrågor... Detta är bara en mindre "inconvenience", men det hindrar mig från att göra det som lärarna hammrat in i våra huvuden att det skall vara...

Jag kan inte få webläsaren att använda javascript skriven i en sepparat fil!
Jag har en sida, test1.php, och ett skript, test1.js. I php'n har jag följande:

<html>
<head>
	<title>Sokoban</title>
	<script type="text/javascript" src="js/test1.js"></script>
</head>
<body>
	<canvas id="canvas" width="800" height="500">
		Canvas not supported.
	</canvas>
</body>
</html>

Jag vet, php är inte nödvändigt här, men jag kanske vill använda php-funktioner senare...
Jag kan se koden från test1.js i Firebug, men elementen vägrar skrivas ut i canvas. Lägger jag om koden i php-filen så funkar det fint och vad jag har fattat av javascript, så importerar den hela filen, som om skriptet är skrivet direkt där den importeras.
Jag kan tillägga att vissa färdigskrivna koder, som jQuery.js, funkar fint. Det är endast de jag själv skriver som vägrar exekveras.

I detta fallet är det en rätt så simpel fyrkant jag vill rita på canvasen och koden ser ut så här i test1.js:

var canvas = document.getElementById('canvas');
var canvasContext = null;
//check whether browser supports getting canvas context
if (canvas && canvas.getContext) {
	
	canvasContext = canvas.getContext('2d');
	var x = 10;
	var y = 10;

	canvasContext.fillStyle = "rgb(127,0,0)";
	canvasContext.fillRect(x, y, 100, 85);
}

Såja, det funkade bättre när jag la allt som hade med Canvas att göra i en sepparat fil som laddades efter Body och resten i en fil som laddades i Head, som vanligt.

Nu skall jag bara hitta en bra guide för hur man manipulerar element efter att de placerats i Canvas.

Tack för hjälpen idag igen ^_^

[edit]: Lyckades villa bort mig själv, detta var ett skol-misstag, så ignorera denna post >.< (råkade byta ut ett tecken mot ett annat, rent slarvfel)

Ok, jag behöver nog hjälp endå.
Jag har försökt att få över mitt gamla projekt till kinetic.js, men verkar ha problem när ritytan skall ritas ut.

Funktionen som används när jag klickar på den bild jag vill rita upp är draw() och ser ut så här:

function draw(finder, position){  //Ritar ut valt objekt på canvasen
		var stage = new Kinetic.Stage("container", 500, 900);
		var layer = new Kinetic.Layer();
			addImage(finder);
		for(i=0; i<pics.length; i++){
			alert("Trigger 1");
			// add the shape to the layer
			layer.add(pics[i]);
			alert("Trigger 2");
			// add the layer to the stage
			stage.add(layer);
			alert("Trigger 3");
		}
	}

Jag kommer fram t.o.m. Trigger 2, men där tar det stopp. Ingen bild ritas ut, för ritytan tycks inte finnas.
Det enda jag får i felkonsollen är att child._draw inte finns. Jag vet inte vad child. är för något ännu, men jag antar att det är samma som den knapp jag trycker på (bilden).
addImage fyller en position i arrayen pics med informationen som behövs och jag har kollat så att den verkligen får den infon.

Den innehåller en new Image() med lämplig info ifylld (storlek i båda led, position i båda led, bildkälla osv.).

Efter vidare lek har jag hittat att den alltid klagar på att child inte finns, men jag hittar inte vart jag försöker kalla på en child, såvida divven med ID "container" är en child... Det är alltid när den skall rita ut stage som det händer, men jag har en annan som bara har en bild med fast bredd, höjd och position där det inte blir några problem alls.

Alltså, den ger felet "Child is undefined" och jag vet inte ens vad det är den försöker kalla för child.

Den du länkade är originalkoden för kinetic, det är den jag försöker implementera i min tidigare canvas-baserade kod. Jag kan dock inte tillräckligt för att veta vad som går var.

Som du sa, stage måste ligga sepparat för att funka, så jag la den utanför alla funktioner. Dock behövs stage.add(layer) i draw för att kunna lägga till bilden.

Då dök nästa grej upp... Divven container (stage i scriptet) kommer fram som den skall, men lägger sig över den div jag har för att lägga till bilder. hur jag än moddar css-en, så vill den inte flytta på sig. Dessutom ritar den fortfarande inte ut en bild, utan bara en tom bakgrund >.<