මා වෙබ් අඩවියක් සදහා යෙදව්මක් (application) නිර්මාණය කරන අවස්ථාවක මට සිදුවුනා යමෙකු පළාත තොරා ගත් විට එම පළාතට අදාල නගර වෙනම තේරුම් කවුලුවකට (combo box) ලබා ගන්න.එය කිරීම සදහා මා Ajax හා php යන භාෂාව යොදා ගනු ලැබුවා. සියලුම කේත පහල දක්වා ඇත.
MySQL දත්ත ගබඩාව
-- phpMyAdmin SQL Dump
-- version 3.3.9
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Apr 20, 2011 at 10:35 AM
-- Server version: 5.5.8
-- PHP Version: 5.3.5
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- Database: `ajax_autoloadcity`
--
CREATE DATABASE `ajax_autoloadcity` ;
-- --------------------------------------------------------
--
-- Table structure for table `city`
--
CREATE TABLE IF NOT EXISTS `city` (
`id` tinyint(4) NOT NULL AUTO_INCREMENT,
`city` varchar(50) DEFAULT NULL,
`provinceid` tinyint(4) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=74 ;
--
-- Dumping data for table `city`
--
INSERT INTO `city` (`id`, `city`, `countryid`) VALUES
(1, 'Matale', 1),
(2, 'Kandy', 1),
(3, 'Dambulla', 1),
(4, 'Matale', 1),
(5, 'Nuwara Eliya', 1),
(6, 'Gampola', 1),
(7, 'Hatton', 1),
(8, 'Nawalapitiya', 1),
(9, 'Talawakele', 1),
(10, 'Harispattuwa', 1),
(11, 'Kadugannawa', 1),
(12, 'Sigiriya', 1),
(13, 'Trincomalee', 2),
(14, 'Kalmunai', 2),
(15, 'Kattankudy', 2),
(16, 'Eravur', 2),
(17, 'Ampara', 2),
(18, 'Anuradhapura', 3),
(19, 'Polonnaruwa', 3),
(20, 'Vavuniya', 4),
(21, 'Jaffna', 4),
(22, 'Chavakacheri', 4),
(23, 'Point Pedro', 4),
(24, 'Valvettithurai', 4),
(25, 'Mannar Island', 4),
(26, 'Kilinochchi', 4),
(27, 'Puttalam', 5),
(28, 'Kurunegala', 5),
(29, 'Chilaw', 5),
(30, 'Kuliyapitiya', 5),
(31, 'Ratnapura', 6),
(32, 'Kegalla', 6),
(33, 'Balangoda', 6),
(34, 'Hambantota', 7),
(35, 'Tangalle', 7),
(36, 'Gall', 7),
(37, 'Matara', 7),
(38, 'Weligama', 7),
(39, 'Ambalangoda', 7),
(40, 'Badulla', 8),
(41, 'Monaragala', 8),
(42, 'Bandarawela', 8),
(43, 'Wattegama', 8),
(44, 'Haputale', 8),
(45, 'Colombo', 9),
(46, 'Dehiwala-Mount Lavinia', 9),
(47, 'Moratuwa', 9),
(48, 'Negombo', 9),
(49, 'Kotte', 9),
(50, 'Katunayake', 9),
(51, 'Battaramulla', 9),
(52, 'Daluguma', 9),
(53, 'Maharagama', 9),
(54, 'Kotikawatta', 9),
(55, 'Kolonnawa', 9),
(56, 'Hendala', 9),
(57, 'Keselwatta', 9),
(58, 'Welisara', 9),
(59, 'Homagama', 9),
(60, 'Kalutara', 9),
(61, 'Mulleriyawa', 9),
(62, 'Beruwala', 9),
(63, 'Ragama', 9),
(64, 'Kandana', 9),
(65, 'Panadura', 9),
(66, 'Ja-Ela', 9),
(67, 'Wattala', 9),
(68, 'Kelaniya', 9),
(69, 'Peliyagoda', 9),
(70, 'Seethawakapura', 9),
(71, 'Horana', 9),
(72, 'Gampaha', 9),
(73, 'Minuwangoda', 9);
-- --------------------------------------------------------
--
-- Table structure for table `province`
--
CREATE TABLE IF NOT EXISTS `province` (
`id` tinyint(4) NOT NULL AUTO_INCREMENT,
`province` varchar(20) NOT NULL DEFAULT '',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;
--
-- Dumping data for table `province`
--
INSERT INTO `province` (`id`, `country`) VALUES
(1, 'Central'),
(2, 'Eastern'),
(3, 'North Central'),
(4, 'Northern'),
(5, 'North Western'),
(6, 'Sabaragamuwa'),
(7, 'Southern'),
(8, 'Uva'),
(9, 'Western');
index.php ගොනුව
<?php
/**
* @author : Umanda Jayobandara
* @copyright : 2011 - Umanda Jayobandara
* @description : Ajax dropdown code with php and MySQL
* Ajax controller
*
*/
<html>
<head>
<title>Ajax dropdown code</title>
<script>
function getXMLHTTP() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getCity(strURL) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
document.getElementById('citydiv').innerHTML=req.responseText;
}
else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
</head>
<body>
<form method="post" action="" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Province</td>
<td width="150"><select name="province" onChange="getCity('findcity.php?province='+this.value)">
<option value="">Select Province</option>
<option value="1">Central</option>
<option value="2">Eastern</option>
<option value="3">North Central</option>
<option value="4">Northern</option>
<option value="5">North Western</option>
<option value="6">Sabaragamuwa</option>
<option value="7">Southern</option>
<option value="8">Uva</option>
<option value="9">Western</option>
</select></td>
</tr>
<tr style="">
<td>City</td>
<td ><div id="citydiv"><select name="city">
<option>Select City</option>
</select></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
findcity.php ගොනුව
<?php
/**
* @author : Umanda Jayobandara
* @copyright : 2011 - Umanda Jayobandara
* @description : Ajax dropdown code with php and MySQL
* Ajax controller
*
*/
?>
<?php
$province=$_REQUEST['province'];
$link = mysql_connect('localhost', 'root', '');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('ajax_autoloadcity');
$query="select city from city where provinceid=$province";
$result=mysql_query($query);
?>
?>
<select name="city">
<option>Select City</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['city']?></option>
<? } ?>
</select>
පළමුව MySQL දත්ත ගබඩාව MySQL සර්වරය තුල ස්තාපනය කරන්න. පසුව index.php ගොනුව හා findcity.php ගොනුව වෙන වෙනම සදා ගන්න.
Umanda Jayobandara (උමන්ද ජයෝබණ්ඩාර)
Diary of Jayobandara [ජයෝබණ්ඩාරගේ සටහන් ] ෴ 
ඉහත සදහන් කර තිබෙන ක්‍රමය මගින් page එක refresh වන්නේ නැහැ. වෙබ් අඩවියට පැමිනෙන පරිශීලකයන්ට තමන් පැමිණි වෙබ් පිටුවේදීම සිය අවශ‍ය තාවයන් සපුරා ගත හැකි බැවින් ajax භාවිතා කිරීම මගින් search engine optimization සදහා නම් යම් අවාසියක් සිදුවනවා. කෙසේ වෙතත් ajx භාවිතාවේදී අවසාන ප්‍රතිඵලයට ලගාවීමට ප්‍රථම ස්ථායි වෙබ් පිටුවක් වෙත පරිශීලකයාව යොමු කරවීම මගින් (static web page) පරිශීලකයාට මෙන්ම Search Engine හිතකාමී වෙබ් පිටුවක් ගොඩ නගා ගත හැකියි. ප්‍රායෝගික උදාහරණයක් අවැසි නම් මෙම පිටුවට යොමු වී බලන්න.
කැමතියිකැමතියි
Ehema nathuwa apita puluwan neda CITY kiyana table eka 2D array ekakata aran thiyagena CITY COMBO BOX ekata load karanna?
කැමතියිකැමතියි
එවැන්නක් මා අත් හදා බලා නෑ වරුන. මා සිතනවා Ajax මගින් එය කාර්යශමව සිදු කර ගත හැකි කියා.ඔබගේ කේතය ලබා දෙන්නවා නම් එහි ගුන අගුන විමසිය හැක.
කැමතියිකැමතියි
PROVINCE kiyana COMBO BOX eken ITEM ekak select karahama CITY kiyana COMBO BOW ekata mysql db eken ITEMS load karanna browser eka refresh wenawa neda?
කැමතියිකැමතියි
@වරුන : නෑ එසේ වන්නේ නෑ. එයට විසදුම ලෙස තමා මා Ajax තාක්ෂණය භාවිතා කලේ.මෙම මගේ කේත භාවිතා කර බලන්න.ඔබට විසදුම ලැබේවී.
කැමතියිකැමතියි
dan macho me waden site eka 2 times load wenawa
ehema nathuwa apita tables 2ma 2D array ekakata aran chache karala thiyaganna puluwan neda?
Kohomada eka karanne?
කැමතියිකැමතියි
දෙපාරක් “load” වෙනවා කියපු දෙය මට පැහැදිලි නෑඅ.කුමක්ද ඔබ අදහස් කලේ..?
කැමතියිකැමතියි