Asad.Safari
یک شنبه 31 خرداد 1383, 21:34 عصر
در طراحی یک برنامه مبتنی بر Web بعضی اوقات نیازمند ایجاد صفحاتی هستیم که باید بعد از دریافت درخواست کاربر به روز درآید.
برای مثال در نظر بگیرید صفحه ای داریم که در آن نام کارخانه های موجود در بانک اطلاعاتی در یک Combo Box به نمایش در می آید و در سمت راست آن Combo Box دیگری قرار دارد که خطوط تولید کارخانه انتخاب شده از Combo box قبلی نشان داده می شوند و همینطور در سمت راست Combo Box قبلی محصولات آن خط تولید به نمایش در می آید. پس در واقع سه جدول در بانک اطلاعاتی موجود است ، که در Combo box متناظرشان باید به صورت مناسب به نمایش در آیند. بدین صورت که با انتخاب نام کارخانه از لیست اول نام خطوط تولید آن کارخانه در لیست بعدی نشان داده شود و سپس با انتخاب نام خط تولید نام محصولات آن در لسیت بعدی به نمایش در آید.
برای پیاده سازی این عملیات بصورت عادی نیاز مند به روز رسانی صفحه Web در هر مرحله و واکشی اطلاعات از بانک اطلاعاتی هستیم . اما همانطور که می دانیم به روز رسانی صفحه باعث چشمک زدن آن ، و دریافت یکسری اطلاعات تکراری می باشد.در یک مقاله به نام Smart Navigation راهی معرفی شده بود برای ASP.NET در IE ، حال به توضیح روشی می پردازم که در حدود بیش از یک سال است که من در ASP از آن بهره می برم البته این روش در اکثر Web Browser ها قابل استفاده می باشد (تمام مرور گرهای web ای که DOM 2 را حمایت کنند نظیر +NS6 و +IE4 و ... )، حتی می توانید آن را به یک ASP.Net Component تبدیل نمایید , اساس کار شبیه روش Smart Navigation هست.
روش کار :
صفحه شما تشکیل می گردد از دو فریم :
1) Main : این فریم همان فریمی است که شما اطلاعاتتان را در آن نمایش می دهید ، اندازه آن 100% و Norezise هست. که در اینجا GradesList.asp در آن قرار می گیرد و صفحه ای است که در آن ComboBox ها قرار گیرند.
2) Hidden : این فریم در واقع با اندازه 0% شکل میگیرد و NoResize است . در واقع این Frame از چشم کاربر مخفی است , صفحات درونی آن متغییر و موقتی مورد استفاده قرار می گیرند. که در اینجا وابسته به نیاز صفحاتretvFamily.asp , retvGrade.asp , ... در آن قرار می گیرند.
MainPage.htm
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Mehdi Mirzaie">
</head>
<frameset rows="258,0" frameborder="NO" border="0" framespacing="0" >
<frame src="GradesList.asp" name="main" frameborder="NO" noresize>
<frame src="javascript:null;" name="hidden" frameborder="NO" noresize>
</frameset>
<noframes>
....
</noframes>
</html>
GradesList.ASP ----------> In Main Frame
<html>
<head><title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<SCRIPT>
function reloadFamilyComboBox()
{
with(document.SelectGradeForm.Family)
{
innerHTML="";
document.SelectGradeForm.Line.innerHTML = "";
document.SelectGradeForm.Grade.innerHTML = "";
if (document.SelectGradeForm.Manufacturer.value == '') return;
disabled = true;
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "Please wait ..."
appendChild(oNewNode);
window.parent.frames["hidden"].location.href = "retvFamily.asp?ManufacturerID="+document.SelectGradeForm.Manufacturer.value;
}
}
function setFamilyComboBox(IDs,Values)
{
with(document.SelectGradeForm.Family)
{
innerHTML="";
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "Choose One";
appendChild(oNewNode);
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "--------------------";
appendChild(oNewNode);
for (i=0;i<IDs.length;i++)
{
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = Values[i];
oNewNode.value = IDs[i];
appendChild(oNewNode);
}
disabled = false;
}
function reloadLineComboBox()
{
with(document.SelectGradeForm.Line)
{
innerHTML="";
document.SelectGradeForm.Grade.innerHTML = "";
if (document.SelectGradeForm.Family.value == '') return;
disabled = true;
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "Please wait ..."
appendChild(oNewNode);
window.parent.frames["hidden"].location.href = "retvLine.asp?FamilyID="+document.SelectGradeForm.Family.value;
}
}
function setLineComboBox(IDs,Values)
{
with(document.SelectGradeForm.Line)
{
innerHTML="";
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "Choose One";
appendChild(oNewNode);
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "--------------------";
appendChild(oNewNode);
for (i=0;i<IDs.length;i++)
{
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = Values[i];
oNewNode.value = IDs[i];
appendChild(oNewNode);
}
disabled = false;
}
}
function reloadGradeComboBox()
{
with(document.SelectGradeForm.Grade)
{
innerHTML="";
if (document.SelectGradeForm.Line.value == '') return;
disabled = true;
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "Please wait ..."
appendChild(oNewNode);
window.parent.frames["hidden"].location.href = "retvGrade.asp?LineID="+document.SelectGradeForm.Line.value;
}
}
function setGradeComboBox(IDs,Values,Descriptions)
{
with(document.SelectGradeForm.Grade)
{
innerHTML="";
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "Choose One";
appendChild(oNewNode);
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "--------------------";
appendChild(oNewNode);
for (i=0;i<IDs.length;i++)
{
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = Values[i];
oNewNode.value = IDs[i];
oNewNode.title = Descriptions[i]
appendChild(oNewNode);
}
disabled = false;
}
}
</SCRIPT>
<body bgcolor="#FFFFFF" text="#000000" leftmargin=0 topmargin=0>
<form name="SelectGradeForm" method="POST" action="<%=MM_editAction%>">
<table width="558" border="1" cellspacing="0" cellpadding="0" height="87" rules="none" align="center">
<th style='background:silver;' height="20" colspan="5" width="554"><font size="5" face="Georgia, Times New Roman, Times, serif"><font size="3" face="Arial, Helvetica, sans-serif">Select
Grade </font></font></th>
</tr>
<tr>
<td width="554" valign="middle" align="center" height="82">
<table width="81%" border="0" cellspacing="0" cellpadding="0" height="50">
<tr>
<td class="TDClass" height="21">Manufacturer</td>
<td class="TDClass" height="21">Family</td>
<td class="TDClass" height="21">Line</td>
<td class="TDClass" height="21">Grade</td>
</tr>
<tr>
<td height="29">
<% set clsDataBase = Server.CreateObject("Daikin3.clsDatabase")
clsDataBase.ConnectionString = "DSN=Daikin"
set Manufacturers = clsDataBase.GetManufacturers %>
<select name="Manufacturer" style="width:150px;" onChange="reloadFamilyComboBox();">
<option value="">Choose One</option>
<option value="">--------------------</option>
<%for each item in Manufacturers %>
<option value="<%=item.Id%>"><%=item.ManufacturerName%></option>
<%next
set clsDataBase = nothing
set Manufacturers = nothing %>
</select>
</td>
<td height="29">
<select name="Family" style="width:150px;" onChange="reloadLineComboBox();">
</select>
</td>
<td height="29">
<select name="Line" style="width:150px;" onChange="reloadGradeComboBox();">
</select>
</td>
<td height="29">
<select name="Grade" style="width:150px;">
</select>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>
<div align="center">
<input type="button" name="Button" value="Select" onClick="setGradeNameAndId()";>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
توابعی با نام reloadXXXXComboBox برای درخواست اطلاعات جدید و غیر معتبر سازی Combo box مورد استفاده قرار می گیرد.
توابعی با نام setXXXXComboBox برای ارسال مقادیر جدید و تنظیم Combo Box از فریم Hidden فراخوانی می گردد.
retvFamily.asp
<%@ Language=VBScript %>
<% ManufacturerId = Request.QueryString("ManufacturerId") %>
<HTML>
<HEAD>
<script language="javascript">
function loadAndSetFamilyDetails()
{
var mainFrame = window.parent.frames["main"];
var frmSrc = mainFrame.location.pathname.toLowerCase() ;
FamilyDetailID = new Array();
FamilyDetailValue = new Array();
<% set clsDataBase = Server.CreateObject("Daikin3.clsDatabase")
clsDataBase.ConnectionString = "DSN=Daikin"
set Families = clsDataBase.GetFamilies(ManufacturerId)
for counter = 1 to Families.Count %>
FamilyDetailID[<%=counter-1%>]="<%= Families(counter).ID %>";
FamilyDetailValue[<%=counter-1%>]="<%=Families(counter).ProductFamilyName%>";
<%next
set clsDataBase = nothing
set Families = nothing
%>
mainFrame.setFamilyComboBox(FamilyDetailID,FamilyD etailValue);
}
</script>
</head>
<BODY onload="loadAndSetFamilyDetails()">
</BODY>
</html>
retvGrades.asp
<%@ Language=VBScript %>
<% LineId = Request.QueryString("LineId") %>
<HTML>
<HEAD>
<script language="javascript">
function loadAndSetGradeDetails()
{
var mainFrame = window.parent.frames["main"];
var frmSrc = mainFrame.location.pathname.toLowerCase() ;
GradeDetailID = new Array();
GradeDetailValue = new Array();
GradeDetailDescriptoin = new Array();
<% set clsDataBase = Server.CreateObject("Daikin3.clsDatabase")
clsDataBase.ConnectionString = "DSN=Daikin"
set Grades = clsDataBase.GetGrades(LineId)
for counter = 1 to Grades.Count %>
GradeDetailID[<%=counter-1%>]="<%= Grades(counter).ID %>";
GradeDetailValue[<%=counter-1%>]="<%=Grades(counter).ProductGradeName%>";
GradeDetailDescriptoin[<%=counter-1%>]="<%=Grades(counter).TextDescription%>";
<%next
set clsDataBase = nothing
set Grades = nothing
%>
mainFrame.setGradeComboBox(GradeDetailID,GradeDeta ilValue,GradeDetailDescriptoin);
}
</script>
</head>
<BODY onload="loadAndSetGradeDetails()">
</BODY>
</html>
retvLine.asp
<%@ Language=VBScript %>
<% FamilyId = Request.QueryString("FamilyId") %>
<HTML>
<HEAD>
<script language="javascript">
function loadAndSetLineDetails()
{
var mainFrame = window.parent.frames["main"];
var frmSrc = mainFrame.location.pathname.toLowerCase() ;
LineDetailID = new Array();
LineDetailValue = new Array();
<% set clsDataBase = Server.CreateObject("Daikin3.clsDatabase")
clsDataBase.ConnectionString = "DSN=Daikin"
set Lines = clsDataBase.GetLines(FamilyId)
for counter = 1 to Lines.Count %>
LineDetailID[<%=counter-1%>]="<%= Lines(counter).ID %>";
LineDetailValue[<%=counter-1%>]="<%=Lines(counter).ProductLineName%>";
<%next
set clsDataBase = nothing
set Lines = nothing
%>
mainFrame.setLineComboBox(LineDetailID,LineDetailV alue);
}
</script>
</head>
<BODY onload="loadAndSetLineDetails()">
</BODY>
</html>
در واقع هنگامیکه درخواست دیدن صفحه اصلی را می کنیم ، در فریم Main صفحه GradesList.asp دیده می شود که Manufacturer Combo box به صورت پیش فرض در همان صفحه تنظیم می شود. بدین صورت که از یک ActiveX Dll که نوشته بودیم نام کارخانه ها را دریافت نموده ( شما می توانید مستقیما از بانک اطلاعاتی ، اطلاعات مورد نظرتان را دریافت نمایید.) و سپس OPTION ها بر اساس آن تنظیم می گردد. و سه Combo box دیگر به صورت خالی رها می گردد.
و رویداد OnChange هر کدام به توابع reloadXXXXComboBox متناظرشان نسبت داده می شود.
حال در نظر بگیرید از نام کارخانه ها یک کارخانه انتخاب می شود ، رویداد OnChange به کار می افتد و تابع reloadFamilyComboBox فراخوانی می گردد.
function reloadFamilyComboBox()
{
with(document.SelectGradeForm.Family)
{
/*1*/ innerHTML="";
/*2*/ document.SelectGradeForm.Line.innerHTML = "";
/*3*/ document.SelectGradeForm.Grade.innerHTML = "";
/*4*/ if (document.SelectGradeForm.Manufacturer.value == '') return;
/*5*/ disabled = true;
/*6*/ var oNewNode = document.createElement("OPTION");
/*7*/ oNewNode.innerHTML = "Please wait ..."
/*8*/ appendChild(oNewNode);
/*9*/ window.parent.frames["hidden"].location.href = "retvFamily.asp?ManufacturerID="+document.SelectGradeForm.Manufacturer.value;
}
}
با فراخوانی این تابع با اجرا شدن خط شماره 1 محتویات قبلی Family Combo box خالی می گردد.و سپس در خط 2 و 3 دو Combo box دیگر خالی می گردند.
در خط شماره 4 اگر انتخاب حالت None Manufacturer کنترل می شود که اگر صحیح بود از تابع خارج می گردد در غیر این صورت اگر یه کارخانه ای انتخاب شده بود با اجرا شده خط شماره 5 ، Manufacturer Combo box غیرفعال می گردد و به توسط DOM در خط 7 و 8 Element ای با ارزش یک OPTION ایجاد می گردد و سپس در آن مقدار ... please wait تنظیم می شود و به Combo box اضافه می گردد. و سپس در خط 9 فریم Hidden به صفحه retvFamily.asp با ارسال شماره
هویت نام کارخانه انتخاب شده نسبت داده می شود.
سپس با اجرا شدن صفحه ASP مورد نظر در Hidden Frame کد JavaScript ای ساخته می شود.
<%@ Language=VBScript %>
<% ManufacturerId = Request.QueryString("ManufacturerId") %>
<HTML>
<HEAD>
<script language="javascript">
/*0*/ function loadAndSetFamilyDetails()
{
/*1*/ var mainFrame = window.parent.frames["main"];
/*2*/ var frmSrc = mainFrame.location.pathname.toLowerCase() ;
/*3*/ FamilyDetailID = new Array();
/*4*/ FamilyDetailValue = new Array();
/*5*/ <% set clsDataBase = Server.CreateObject("Daikin3.clsDatabase")
/*6*/ clsDataBase.ConnectionString = "DSN=Daikin"
/*7*/ set Families = clsDataBase.GetFamilies(ManufacturerId)
/*8*/ for counter = 1 to Families.Count %>
/*9*/ FamilyDetailID[<%=counter-1%>]="<%= Families(counter).ID %>";
/*10*/ FamilyDetailValue[<%=counter-1%>]="<%=Families(counter).ProductFamilyName%>";
/*11*/ <%next
/*12*/ set clsDataBase = nothing
/*13*/ set Families = nothing
%>
/*14*/ mainFrame.setFamilyComboBox(FamilyDetailID,FamilyD etailValue);
}
</script>
</head>
<!--/* 15 */ --><BODY onload="loadAndSetFamilyDetails()">
</BODY>
</html>
در خط 1 تابعی به نام loadAndSetFamilyDetails تعریف می گردد. و در خط شماره 1 از طریق DOM به شی Main Frame دسترسی پیدا می نماییم.
در خط شماره 3 و 4 دو آرایه به وجود می آوریم و به واسطه خطوط 5 الی 13 خانه های آرایه را از اطلاعات موجود در Database پر می نماییم. در واقع اطلاعات Family کارخانه انتخاب شده در مرحله قبلی و سپس در خط 14 درخواست فراخوانی تابع setFamilyComboBox با ارسال دو آرایه مورد نظر که شامل نام Family و شماره هویت آنها ست می نماییم. تابع setFamilyComboBox در صفحه GradesList.asp قرار دارد به همین خاطر به واسطه شی MainFrame آن را فراخوانی می نماییم. اما خود تابع loadAndSetFamilyDetails در خط 15 در هنگام Load شدن این صفحه فراخوانی می گردد.
پس بعد از فراخوانی loadAndSetFamilyDetails در نهایت تابع setFamilyComboBox فراخوانی می شود.
function setFamilyComboBox(IDs,Values)
{
with(document.SelectGradeForm.Family)
{
/*1*/ innerHTML="";
/*2*/ var oNewNode = document.createElement("OPTION");
/*3*/ oNewNode.innerHTML = "Choose One";
/*4*/ appendChild(oNewNode);
/*5*/ var oNewNode = document.createElement("OPTION");
/*6*/ oNewNode.innerHTML = "--------------------";
/*7*/ appendChild(oNewNode);
/*8*/ for (i=0;i<IDs.length;i++)
{
/*9*/ var oNewNode = document.createElement("OPTION");
/*10*/ oNewNode.innerHTML = Values[i];
/*11*/ oNewNode.value = IDs[i];
/*12*/ appendChild(oNewNode);
}
/*13*/ disabled = false;
}
}
با اجرا شدن خط شماره 1 Family Combo Box تمام اعضای قبلیش را از دست می دهد و خالی می گردد در واقع نمایش ... please wait از بین می رود و سپس از طریق DOM عنصر OPTION ای ساخته می شود با مقدار نمایشی نام Family مورد نظر و ارزشی معادل هویت Family مورد نظر البته برای ایجاد نمودن تعداد OPTION لازم با بدست آوردن تعداد خانه های آرایه و بک حلقه For این کار میسر می گردد و سپس این OPTION ها به شی Combo box مورد نظر اضافه می گردند و نهایتا وضعیت غیرفعالی که در مرحله اجرا شدن تابع reloadFamilyComboBox بوحود آمده بود در اینجا به وضعیت فعال تغییر می کند.
در واقع کار تمام شد و بدوند Refresh شدن صفحه GradesList.asp اطلاعات موجود در Combo box ها اصلاح گشت برای دیگر Combo box ها نیز کار به همین صورت است که شما کد آن را می توانید ملاحظه فرمایید.
[/code]
برای مثال در نظر بگیرید صفحه ای داریم که در آن نام کارخانه های موجود در بانک اطلاعاتی در یک Combo Box به نمایش در می آید و در سمت راست آن Combo Box دیگری قرار دارد که خطوط تولید کارخانه انتخاب شده از Combo box قبلی نشان داده می شوند و همینطور در سمت راست Combo Box قبلی محصولات آن خط تولید به نمایش در می آید. پس در واقع سه جدول در بانک اطلاعاتی موجود است ، که در Combo box متناظرشان باید به صورت مناسب به نمایش در آیند. بدین صورت که با انتخاب نام کارخانه از لیست اول نام خطوط تولید آن کارخانه در لیست بعدی نشان داده شود و سپس با انتخاب نام خط تولید نام محصولات آن در لسیت بعدی به نمایش در آید.
برای پیاده سازی این عملیات بصورت عادی نیاز مند به روز رسانی صفحه Web در هر مرحله و واکشی اطلاعات از بانک اطلاعاتی هستیم . اما همانطور که می دانیم به روز رسانی صفحه باعث چشمک زدن آن ، و دریافت یکسری اطلاعات تکراری می باشد.در یک مقاله به نام Smart Navigation راهی معرفی شده بود برای ASP.NET در IE ، حال به توضیح روشی می پردازم که در حدود بیش از یک سال است که من در ASP از آن بهره می برم البته این روش در اکثر Web Browser ها قابل استفاده می باشد (تمام مرور گرهای web ای که DOM 2 را حمایت کنند نظیر +NS6 و +IE4 و ... )، حتی می توانید آن را به یک ASP.Net Component تبدیل نمایید , اساس کار شبیه روش Smart Navigation هست.
روش کار :
صفحه شما تشکیل می گردد از دو فریم :
1) Main : این فریم همان فریمی است که شما اطلاعاتتان را در آن نمایش می دهید ، اندازه آن 100% و Norezise هست. که در اینجا GradesList.asp در آن قرار می گیرد و صفحه ای است که در آن ComboBox ها قرار گیرند.
2) Hidden : این فریم در واقع با اندازه 0% شکل میگیرد و NoResize است . در واقع این Frame از چشم کاربر مخفی است , صفحات درونی آن متغییر و موقتی مورد استفاده قرار می گیرند. که در اینجا وابسته به نیاز صفحاتretvFamily.asp , retvGrade.asp , ... در آن قرار می گیرند.
MainPage.htm
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Mehdi Mirzaie">
</head>
<frameset rows="258,0" frameborder="NO" border="0" framespacing="0" >
<frame src="GradesList.asp" name="main" frameborder="NO" noresize>
<frame src="javascript:null;" name="hidden" frameborder="NO" noresize>
</frameset>
<noframes>
....
</noframes>
</html>
GradesList.ASP ----------> In Main Frame
<html>
<head><title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<SCRIPT>
function reloadFamilyComboBox()
{
with(document.SelectGradeForm.Family)
{
innerHTML="";
document.SelectGradeForm.Line.innerHTML = "";
document.SelectGradeForm.Grade.innerHTML = "";
if (document.SelectGradeForm.Manufacturer.value == '') return;
disabled = true;
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "Please wait ..."
appendChild(oNewNode);
window.parent.frames["hidden"].location.href = "retvFamily.asp?ManufacturerID="+document.SelectGradeForm.Manufacturer.value;
}
}
function setFamilyComboBox(IDs,Values)
{
with(document.SelectGradeForm.Family)
{
innerHTML="";
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "Choose One";
appendChild(oNewNode);
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "--------------------";
appendChild(oNewNode);
for (i=0;i<IDs.length;i++)
{
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = Values[i];
oNewNode.value = IDs[i];
appendChild(oNewNode);
}
disabled = false;
}
function reloadLineComboBox()
{
with(document.SelectGradeForm.Line)
{
innerHTML="";
document.SelectGradeForm.Grade.innerHTML = "";
if (document.SelectGradeForm.Family.value == '') return;
disabled = true;
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "Please wait ..."
appendChild(oNewNode);
window.parent.frames["hidden"].location.href = "retvLine.asp?FamilyID="+document.SelectGradeForm.Family.value;
}
}
function setLineComboBox(IDs,Values)
{
with(document.SelectGradeForm.Line)
{
innerHTML="";
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "Choose One";
appendChild(oNewNode);
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "--------------------";
appendChild(oNewNode);
for (i=0;i<IDs.length;i++)
{
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = Values[i];
oNewNode.value = IDs[i];
appendChild(oNewNode);
}
disabled = false;
}
}
function reloadGradeComboBox()
{
with(document.SelectGradeForm.Grade)
{
innerHTML="";
if (document.SelectGradeForm.Line.value == '') return;
disabled = true;
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "Please wait ..."
appendChild(oNewNode);
window.parent.frames["hidden"].location.href = "retvGrade.asp?LineID="+document.SelectGradeForm.Line.value;
}
}
function setGradeComboBox(IDs,Values,Descriptions)
{
with(document.SelectGradeForm.Grade)
{
innerHTML="";
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "Choose One";
appendChild(oNewNode);
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = "--------------------";
appendChild(oNewNode);
for (i=0;i<IDs.length;i++)
{
var oNewNode = document.createElement("OPTION");
oNewNode.innerHTML = Values[i];
oNewNode.value = IDs[i];
oNewNode.title = Descriptions[i]
appendChild(oNewNode);
}
disabled = false;
}
}
</SCRIPT>
<body bgcolor="#FFFFFF" text="#000000" leftmargin=0 topmargin=0>
<form name="SelectGradeForm" method="POST" action="<%=MM_editAction%>">
<table width="558" border="1" cellspacing="0" cellpadding="0" height="87" rules="none" align="center">
<th style='background:silver;' height="20" colspan="5" width="554"><font size="5" face="Georgia, Times New Roman, Times, serif"><font size="3" face="Arial, Helvetica, sans-serif">Select
Grade </font></font></th>
</tr>
<tr>
<td width="554" valign="middle" align="center" height="82">
<table width="81%" border="0" cellspacing="0" cellpadding="0" height="50">
<tr>
<td class="TDClass" height="21">Manufacturer</td>
<td class="TDClass" height="21">Family</td>
<td class="TDClass" height="21">Line</td>
<td class="TDClass" height="21">Grade</td>
</tr>
<tr>
<td height="29">
<% set clsDataBase = Server.CreateObject("Daikin3.clsDatabase")
clsDataBase.ConnectionString = "DSN=Daikin"
set Manufacturers = clsDataBase.GetManufacturers %>
<select name="Manufacturer" style="width:150px;" onChange="reloadFamilyComboBox();">
<option value="">Choose One</option>
<option value="">--------------------</option>
<%for each item in Manufacturers %>
<option value="<%=item.Id%>"><%=item.ManufacturerName%></option>
<%next
set clsDataBase = nothing
set Manufacturers = nothing %>
</select>
</td>
<td height="29">
<select name="Family" style="width:150px;" onChange="reloadLineComboBox();">
</select>
</td>
<td height="29">
<select name="Line" style="width:150px;" onChange="reloadGradeComboBox();">
</select>
</td>
<td height="29">
<select name="Grade" style="width:150px;">
</select>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>
<div align="center">
<input type="button" name="Button" value="Select" onClick="setGradeNameAndId()";>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
توابعی با نام reloadXXXXComboBox برای درخواست اطلاعات جدید و غیر معتبر سازی Combo box مورد استفاده قرار می گیرد.
توابعی با نام setXXXXComboBox برای ارسال مقادیر جدید و تنظیم Combo Box از فریم Hidden فراخوانی می گردد.
retvFamily.asp
<%@ Language=VBScript %>
<% ManufacturerId = Request.QueryString("ManufacturerId") %>
<HTML>
<HEAD>
<script language="javascript">
function loadAndSetFamilyDetails()
{
var mainFrame = window.parent.frames["main"];
var frmSrc = mainFrame.location.pathname.toLowerCase() ;
FamilyDetailID = new Array();
FamilyDetailValue = new Array();
<% set clsDataBase = Server.CreateObject("Daikin3.clsDatabase")
clsDataBase.ConnectionString = "DSN=Daikin"
set Families = clsDataBase.GetFamilies(ManufacturerId)
for counter = 1 to Families.Count %>
FamilyDetailID[<%=counter-1%>]="<%= Families(counter).ID %>";
FamilyDetailValue[<%=counter-1%>]="<%=Families(counter).ProductFamilyName%>";
<%next
set clsDataBase = nothing
set Families = nothing
%>
mainFrame.setFamilyComboBox(FamilyDetailID,FamilyD etailValue);
}
</script>
</head>
<BODY onload="loadAndSetFamilyDetails()">
</BODY>
</html>
retvGrades.asp
<%@ Language=VBScript %>
<% LineId = Request.QueryString("LineId") %>
<HTML>
<HEAD>
<script language="javascript">
function loadAndSetGradeDetails()
{
var mainFrame = window.parent.frames["main"];
var frmSrc = mainFrame.location.pathname.toLowerCase() ;
GradeDetailID = new Array();
GradeDetailValue = new Array();
GradeDetailDescriptoin = new Array();
<% set clsDataBase = Server.CreateObject("Daikin3.clsDatabase")
clsDataBase.ConnectionString = "DSN=Daikin"
set Grades = clsDataBase.GetGrades(LineId)
for counter = 1 to Grades.Count %>
GradeDetailID[<%=counter-1%>]="<%= Grades(counter).ID %>";
GradeDetailValue[<%=counter-1%>]="<%=Grades(counter).ProductGradeName%>";
GradeDetailDescriptoin[<%=counter-1%>]="<%=Grades(counter).TextDescription%>";
<%next
set clsDataBase = nothing
set Grades = nothing
%>
mainFrame.setGradeComboBox(GradeDetailID,GradeDeta ilValue,GradeDetailDescriptoin);
}
</script>
</head>
<BODY onload="loadAndSetGradeDetails()">
</BODY>
</html>
retvLine.asp
<%@ Language=VBScript %>
<% FamilyId = Request.QueryString("FamilyId") %>
<HTML>
<HEAD>
<script language="javascript">
function loadAndSetLineDetails()
{
var mainFrame = window.parent.frames["main"];
var frmSrc = mainFrame.location.pathname.toLowerCase() ;
LineDetailID = new Array();
LineDetailValue = new Array();
<% set clsDataBase = Server.CreateObject("Daikin3.clsDatabase")
clsDataBase.ConnectionString = "DSN=Daikin"
set Lines = clsDataBase.GetLines(FamilyId)
for counter = 1 to Lines.Count %>
LineDetailID[<%=counter-1%>]="<%= Lines(counter).ID %>";
LineDetailValue[<%=counter-1%>]="<%=Lines(counter).ProductLineName%>";
<%next
set clsDataBase = nothing
set Lines = nothing
%>
mainFrame.setLineComboBox(LineDetailID,LineDetailV alue);
}
</script>
</head>
<BODY onload="loadAndSetLineDetails()">
</BODY>
</html>
در واقع هنگامیکه درخواست دیدن صفحه اصلی را می کنیم ، در فریم Main صفحه GradesList.asp دیده می شود که Manufacturer Combo box به صورت پیش فرض در همان صفحه تنظیم می شود. بدین صورت که از یک ActiveX Dll که نوشته بودیم نام کارخانه ها را دریافت نموده ( شما می توانید مستقیما از بانک اطلاعاتی ، اطلاعات مورد نظرتان را دریافت نمایید.) و سپس OPTION ها بر اساس آن تنظیم می گردد. و سه Combo box دیگر به صورت خالی رها می گردد.
و رویداد OnChange هر کدام به توابع reloadXXXXComboBox متناظرشان نسبت داده می شود.
حال در نظر بگیرید از نام کارخانه ها یک کارخانه انتخاب می شود ، رویداد OnChange به کار می افتد و تابع reloadFamilyComboBox فراخوانی می گردد.
function reloadFamilyComboBox()
{
with(document.SelectGradeForm.Family)
{
/*1*/ innerHTML="";
/*2*/ document.SelectGradeForm.Line.innerHTML = "";
/*3*/ document.SelectGradeForm.Grade.innerHTML = "";
/*4*/ if (document.SelectGradeForm.Manufacturer.value == '') return;
/*5*/ disabled = true;
/*6*/ var oNewNode = document.createElement("OPTION");
/*7*/ oNewNode.innerHTML = "Please wait ..."
/*8*/ appendChild(oNewNode);
/*9*/ window.parent.frames["hidden"].location.href = "retvFamily.asp?ManufacturerID="+document.SelectGradeForm.Manufacturer.value;
}
}
با فراخوانی این تابع با اجرا شدن خط شماره 1 محتویات قبلی Family Combo box خالی می گردد.و سپس در خط 2 و 3 دو Combo box دیگر خالی می گردند.
در خط شماره 4 اگر انتخاب حالت None Manufacturer کنترل می شود که اگر صحیح بود از تابع خارج می گردد در غیر این صورت اگر یه کارخانه ای انتخاب شده بود با اجرا شده خط شماره 5 ، Manufacturer Combo box غیرفعال می گردد و به توسط DOM در خط 7 و 8 Element ای با ارزش یک OPTION ایجاد می گردد و سپس در آن مقدار ... please wait تنظیم می شود و به Combo box اضافه می گردد. و سپس در خط 9 فریم Hidden به صفحه retvFamily.asp با ارسال شماره
هویت نام کارخانه انتخاب شده نسبت داده می شود.
سپس با اجرا شدن صفحه ASP مورد نظر در Hidden Frame کد JavaScript ای ساخته می شود.
<%@ Language=VBScript %>
<% ManufacturerId = Request.QueryString("ManufacturerId") %>
<HTML>
<HEAD>
<script language="javascript">
/*0*/ function loadAndSetFamilyDetails()
{
/*1*/ var mainFrame = window.parent.frames["main"];
/*2*/ var frmSrc = mainFrame.location.pathname.toLowerCase() ;
/*3*/ FamilyDetailID = new Array();
/*4*/ FamilyDetailValue = new Array();
/*5*/ <% set clsDataBase = Server.CreateObject("Daikin3.clsDatabase")
/*6*/ clsDataBase.ConnectionString = "DSN=Daikin"
/*7*/ set Families = clsDataBase.GetFamilies(ManufacturerId)
/*8*/ for counter = 1 to Families.Count %>
/*9*/ FamilyDetailID[<%=counter-1%>]="<%= Families(counter).ID %>";
/*10*/ FamilyDetailValue[<%=counter-1%>]="<%=Families(counter).ProductFamilyName%>";
/*11*/ <%next
/*12*/ set clsDataBase = nothing
/*13*/ set Families = nothing
%>
/*14*/ mainFrame.setFamilyComboBox(FamilyDetailID,FamilyD etailValue);
}
</script>
</head>
<!--/* 15 */ --><BODY onload="loadAndSetFamilyDetails()">
</BODY>
</html>
در خط 1 تابعی به نام loadAndSetFamilyDetails تعریف می گردد. و در خط شماره 1 از طریق DOM به شی Main Frame دسترسی پیدا می نماییم.
در خط شماره 3 و 4 دو آرایه به وجود می آوریم و به واسطه خطوط 5 الی 13 خانه های آرایه را از اطلاعات موجود در Database پر می نماییم. در واقع اطلاعات Family کارخانه انتخاب شده در مرحله قبلی و سپس در خط 14 درخواست فراخوانی تابع setFamilyComboBox با ارسال دو آرایه مورد نظر که شامل نام Family و شماره هویت آنها ست می نماییم. تابع setFamilyComboBox در صفحه GradesList.asp قرار دارد به همین خاطر به واسطه شی MainFrame آن را فراخوانی می نماییم. اما خود تابع loadAndSetFamilyDetails در خط 15 در هنگام Load شدن این صفحه فراخوانی می گردد.
پس بعد از فراخوانی loadAndSetFamilyDetails در نهایت تابع setFamilyComboBox فراخوانی می شود.
function setFamilyComboBox(IDs,Values)
{
with(document.SelectGradeForm.Family)
{
/*1*/ innerHTML="";
/*2*/ var oNewNode = document.createElement("OPTION");
/*3*/ oNewNode.innerHTML = "Choose One";
/*4*/ appendChild(oNewNode);
/*5*/ var oNewNode = document.createElement("OPTION");
/*6*/ oNewNode.innerHTML = "--------------------";
/*7*/ appendChild(oNewNode);
/*8*/ for (i=0;i<IDs.length;i++)
{
/*9*/ var oNewNode = document.createElement("OPTION");
/*10*/ oNewNode.innerHTML = Values[i];
/*11*/ oNewNode.value = IDs[i];
/*12*/ appendChild(oNewNode);
}
/*13*/ disabled = false;
}
}
با اجرا شدن خط شماره 1 Family Combo Box تمام اعضای قبلیش را از دست می دهد و خالی می گردد در واقع نمایش ... please wait از بین می رود و سپس از طریق DOM عنصر OPTION ای ساخته می شود با مقدار نمایشی نام Family مورد نظر و ارزشی معادل هویت Family مورد نظر البته برای ایجاد نمودن تعداد OPTION لازم با بدست آوردن تعداد خانه های آرایه و بک حلقه For این کار میسر می گردد و سپس این OPTION ها به شی Combo box مورد نظر اضافه می گردند و نهایتا وضعیت غیرفعالی که در مرحله اجرا شدن تابع reloadFamilyComboBox بوحود آمده بود در اینجا به وضعیت فعال تغییر می کند.
در واقع کار تمام شد و بدوند Refresh شدن صفحه GradesList.asp اطلاعات موجود در Combo box ها اصلاح گشت برای دیگر Combo box ها نیز کار به همین صورت است که شما کد آن را می توانید ملاحظه فرمایید.
[/code]