Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Javascript ja lomaketiedot

Sivun loppuun

pistemies [30.12.2010 14:18:06]

#

Suuniitelen tämmöistä juttua, johon sitten liittyy myös ajax ja php.
Tietokannassa on seuraavankaltaisia tauluja listauksineen:

+Osastot
+ + Alaosastot
+ + + Alimmat_osastot

Tarkoitus on seuraava:
Käyttäjä valitsee ensin jonkin osaston listasta Osastot.
Valinnan seurauksena viereen avautuu select-valikko, joka listaa valittuun osastoon kuuluvat alaosastot.
Kun on valittu alaosasto, tehdään samanlainen listaus alimmista osastoista.

Lisäksi pitäisi jotenkin saada sama tapahtumaan automaattisesti linkeillä.
Linkki lomake.php?c1=10&c2=2&c3=4 avaisi valikosta kyseiset osastot valmiiksi valittuina.
Suomennos:
c1= Osasto Id nro 10
c2= Osasto nro 10:n Alaosasto nro 2
c3= Osasto nro 10:n Alaosasto nro 2:n osasto nro 4
Lähinnä tässä on ongelma miettiä miten nuo valinnat siis tapahtuu javascriptissä.

efteri [30.12.2010 15:42:51]

#

Ajaxia en osaa mutta itsellä hiukan samanlainen systeemi tulossa omaan projektiin ja oppaita etsiessä löytyi tuollainen:
http://www.w3schools.com/php/php_ajax_database.asp

Pete2 [30.12.2010 20:29:56]

#

Pekka Mansikka kirjoitti:

Lähinnä tässä on ongelma miettiä miten nuo valinnat siis tapahtuu javascriptissä.

Onchangella ja selectedIndexillä ensiksi ja sitten juuri linkatun tapaista requestia.

pistemies [30.12.2010 21:04:22]

#

Pete2 kirjoitti:

Onchangella ja selectedIndexillä ensiksi ja sitten juuri linkatun tapaista requestia.

Kuinkahan tuo oikein tuohon liittää...ei sytytä :)
Nyt toimii siten, että listaa tuon Osaston alaosastot, mutta siitä tehty valinta ei tee mitään. Myöskään $_POST-lähetykseen ei tallennu tuo alempi valinta, joka tehdään Ajaxin hakemalla listalla...

EDIT: Nyt sain tuon postauksen toimimaan oikein... pieni kirjoitusvirhe oli kentän nimessä, josta haettiin tietoa.
Mutta edelleen pähkäilen, miten saan tuon alimman osaston tulostumaan...olen tehnyt melkein samanlaisen funktion sille, mutta ei tee mitää...selectIndex?

Edit kaksi. laitampa tässä tekemäni värkin. Ei löydä alaos.php tiedostoa ollenkaa.

function PikkuOsastot(str1,str2)
{
if (str2=="")
  {
  document.getElementById("txtOsa").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtOsa").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","alaos.php?c1="+str1+"&c2="+str2,true);
xmlhttp.send();
}

Tiedostossa getuser.php (en ole muuttanut tuon esimerkkifileen nimeä):

<select size=1 name="osastot2" onChange="PikkuOsastot($q,this.value)">

Post-vastaanotto siis löytää tältä lomakkeelta tehdyn valinnan.
Tuo str1 on siis ihan ekalistalta tehty valinta, jonka valitseminen tulostaa listauksen getuser.php tiedostossa.

Othnos [30.12.2010 23:49:05]

#

Tervehdys Pekka Mansikka.

En hoksannut kysymystäsi, mutta inspiraation tullessa tein pienen esimerkki koodin. En ole testannut kyseistä koodia, joten se saattaa sisältää bugeja.

Tein koodin w3schoolsin ajax oppaan selittämällä tavalla, mutta suosittelen perehtymään jQuery-javascript kirjastoon, jonka avulla ajaxin käyttö on helppoa.

<?php
// index.php

// Tietokanta haut voisivat olla esimerkiksi seuraavanlaisia...

// Noudetaan osastojen tiedot
$sql = "SELECT id, name FROM osastot ORDER BY name ASC";
$result = mysql_query($sql) or trigger_error(mysql_error(), E_USER_ERROR);

while ($rivi = mysql_fetch_assoc($result)) {
	$osastot[$rivi['id']] = $rivi['name'];
}

// Noudetaan alaosastojen tiedot, jos urliin syötetty
if (isset($_GET['c1'])) {
	$sql = "SELECT id, name FROM alaosastot WHERE id = " . intval($_GET['c1']) . " ORDER BY name ASC";
	$result = mysql_query($sql) or trigger_error(mysql_error(), E_USER_ERROR);

	while ($rivi = mysql_fetch_assoc($result)) {
		$alaosastot[$rivi['id']] = $rivi['name'];
	}
}

// Noudetaan alimpienosastojen tiedot, jos urliin syötetty
if (isset($_GET['c2'])) {
	$sql = "SELECT id, name FROM alimmatosastot WHERE id = " . intval($_GET['c2']) . " ORDER BY name ASC";
	$result = mysql_query($sql) or trigger_error(mysql_error(), E_USER_ERROR);

	while ($rivi = mysql_fetch_assoc($result)) {
		$alimmatosastot[$rivi['id']] = $rivi['name'];
	}
}


?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv= Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript">
function haeAlaosastot(str) {
	if (str=="") {
		document.getElementById("alaosastot").innerHTML="";
		return;
	}
	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else {// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			document.getElementById("alaosastot").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","ajax.php?c1="+str,true); // Kyseisessä esimerkissä GET:in pituusrajoitus ei tulene vastaan, mutta muissa sovelluksissa POST:in käyttäminen saattaisi olla järkevämpää
	xmlhttp.send();
}

function haeAlimmatosastot(str) {
	if (str=="") {
		document.getElementById("alimmatosastot").innerHTML="";
		return;
	}
	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else {// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			document.getElementById("alimmatosastot").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","ajax.php?c2="+str,true);
	xmlhttp.send();
}
	</script>
	<title></title>
</head>

<body>
	<form action="jokusivu.php" method="post">
	<div id="osastot">
		<?php
		if (isset($osastot)) {
			?>
			<select name="osasto" onclick="haeAlaosastot(this.value)">
			<?php
			foreach ($osastot as $osastoId => $osastoName) {
				?>
				<option value="<?php echo $osastoId; ?>"><?php echo $osastoName; ?></option>
				<?php
			}
			?>
			</select>
			<?php
		}
		?>
	</div>
	<div id="alaosastot">
		<?php
		if (isset($alaosastot)) {
			?>
			<select name="alaosasto" onclick="haeAlimmatosastot(this.value)">
			<?php
			foreach ($alaosastot as $alaosastoId => $alaosastoName) {
				?>
				<option value="<?php echo $alaosastoId; ?>"><?php echo $alaosastoName; ?></option>
				<?php
			}
			?>
			</select>
			<?php
		}
		?>
	</div>
	<div id="alimmatosastot">
		<?php
		if (isset($alimmatosastot)) {
			?>
			<select name="alinosasto">
			<?php
			foreach ($alimmatosastot as $alinosastoId => $alinosastoName) {
				?>
				<option value="<?php echo $alinosastoId; ?>"><?php echo $alinosastoName; ?></option>
				<?php
			}
			?>
			</select>
			<?php
		}
		?>
	</div>
	</form>
</body>

</html>
<?php
// ajax.php

if (isset($_GET['c1'])) {
	$sql = "SELECT id, name FROM alaosastot WHERE id = " . intval($_GET['c1']);
	$result = mysql_query($sql) or trigger_error(mysql_error(), E_USER_ERROR);

	?>
	<select name="alaosasto" onclick="haeAlimmatosastot(this.value)">
	<?php
		while ($rivi = mysql_fetch_assoc($result)) {
			?>
			<option value="<?php echo $rivi['id']; ?>"><?php echo $rivi['name']; ?></option>
			<?php
		}
	?>
	</select>
	<?php
}

if (isset($_GET['c2'])) {
	$sql = "SELECT id, name FROM alimmatosastot WHERE id = " . intval($_GET['c2']);
	$result = mysql_query($sql) or trigger_error(mysql_error(), E_USER_ERROR);

	?>
	<select name="alinosasto">
	<?php
		while ($rivi = mysql_fetch_assoc($result)) {
			?>
			<option value="<?php echo $rivi['id']; ?>"><?php echo $rivi['name']; ?></option>
			<?php
		}
	?>
	</select>
	<?php
}

-Othnos

Ps: Toivoisin putkan guruilta vinkkejä koodin muotoiluun ja kaikkiin epäkohtiin

pistemies [31.12.2010 01:02:23]

#

Oli tuossa muutamia bugeja SQL-lauseessa, kuten välilyönnit pilkun ja muuttujan välissä ym.
Mutta en siitä sen kummempaa.
Oleellisempaa on minusta mysql-taulujen rakenne.

Minulla on siten, että kunkin Osaston Alaosastot numeroidaan esim. numeroin 1-3, jos siinä on kolme alaosastoa, ei siis auto_increment-kentän mukaan. Samoin alimmat osastot.
Niimpä siellä on kentät Osasto_Id ja AlaOsasto_Id (alimmassa osastossa).
Osasto_id kertoo ylemmän osaston numeron ja AlaOsasto_id alaosaston järjestyksen alkaen numerosta 1.

En saanut tuota vielä toimimaan oikein, listasi ihan vääriä listoja alimmassa osastossa...sitä hakiessa pitää tunnistaa nuo kaksi kenttää, jotta tulee oikea lista.

pistemies [31.12.2010 13:26:10]

#

Noh niin, tämähä meni hyvin.

Sain toimimaan tuon Ajax-hommalla valinnan oikein.
Sen sijaan tuo linkki-juttu on vähän erilaisempi...siihen pitää vielä saada oikea selected-valinta.

Kiitoksia Onthos.

Othnos [31.12.2010 14:02:54]

#

Seuraavilla koodinpätkillä pääset varmasti alkuun

Edelliseen koodiin unohtui tuo XSS-aukko. Kannattaa ajaa nuo kaikki "name":t htmlspecialchars-funktion lävitse.

<?php
// index.php

// Korvaa edellinen $_GET['c2'] rimpsu tällä
// Noudetaan alimpienosastojen tiedot, jos urliin syötetty
if (isset($_GET['c1']) && isset($_GET['c2'])) {
	$sql = "SELECT c2Numero, name FROM alimmatosastot WHERE c1Numero = " . intval($_GET['c1']) . " AND c2Numero = " . intval($_GET['c2']) . " ORDER BY name ASC";
	$result = mysql_query($sql) or trigger_error(mysql_error(), E_USER_ERROR);

	while ($rivi = mysql_fetch_assoc($result)) {
		$alimmatosastot[$rivi['c2Numero']] = htmlspecialchars($rivi['name']);
	}
}

Selected valinnan saat vertaamalla annettuja tietoja foreach-loopissa.

<?php
if (isset($osastot)) {
	?>
	<select name="osasto" onclick="haeAlaosastot(this.value)">
	<?php
	foreach ($osastot as $osastoId => $osastoName) {
		if (isset($_GET['c1']) && $_GET['c1'] == $osastoId) {
			?>
			<option value="<?php echo $osastoId; ?>" selected="selected"><?php echo $osastoName; ?></option>
			<?php
		} else {
			?>
			<option value="<?php echo $osastoId; ?>"><?php echo $osastoName; ?></option>
			<?php
		}
	}
	?>
	</select>
	<?php
}
?>

Ja sitten vain soveltamaan...

pistemies [31.12.2010 15:23:47]

#

Kiitoksia!
Ehdin jo väkerrellä omalla systeemillä tuon homman toimivaksi.
Käytin for-silmukkaa ja array_keys funktiota Id:n selvittämiseen...

Vielä jotain hienosäätöä saatta siitä vielä löytyä.

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta