בעוד שאלה שאני נתקל בה המון מתבקש פתרון למצב של החלפת תיבות גלילה דינאמית בלי שיצטרכו לרפרש את הדף בכל פעם שרוצים להעלות תיבה חדשה עם נתונים חדשים לפי מה שנלחץ בתיבה הישנה.
יש מספר שיטות לעשות את זה, האחת בצד קליינט מלא, בה מביאים את כל הנתונים מראש אל הקליינט מכניסים אותם למערכים ומשתמשים במערכים הללו בכדי למלא תיבות גלילה קיימות על הדף.
יש יתרונות וחסרונות לשיטה הזאת. היתרון הראשון זה שזה מהיר ואינו דורש גישה חוזרת לשרת, החיסרון הנו שהדף שמועלה לקליינט יכול להיות מאד כבד אם יש הרבה נתונים בכל אחד מהמערכים.
שיטה נוספת היא שיטה שמחלקת את העומס בין הקליינט לסרוור, בשיטה הזאת בפעם הראשונה שתתבקש תיבת גלילה חדשה, נלך לשרת ונביא את הנתונים, ואז נכניס אותם למערך. ברגע שתתבקש אותה תיבה מחדש נביא אותה מתוך המערך שכבר קיים אצל הקליינט. שיטה זו לדעתי היא השיטה הטובה ביותר ובעתיד גם אכתוב מאמר כיצד לבצע אותה.
השיטה היא שיטת הקליינט סרוור, בכל פעם שתתבקש תיבת גלילה חדשה, נלך לסרוור ונביא אותה. החסרון בה לעומת השיטה הקודמת היא הגישות החוזרות ונשנות אל הסרוור, היתרון בה הוא שאם אנחנו עובדים מול דאטה בייס דינאמי שכל הזמן משתנים בו נתונים, בכל גישה לסרוור נביא את הנתונים הכי חדשים.
הדוגמא שאני נותן היום משתמשת בשיטה האחרונה.
אני אשתמש ב IFRAME חבוי בכדי להביא את הנתונים וב JS כדי להציג אותם על הדף, כמובן שכמו בכל דבר טוב השיטה הזאת תעבוד רק באקספלורר 4 ומעלה.
<![CDATA[< %@ Language=VBScript %>
< %Response.CharSet= "ISO-8859-8-i"%>
<HTML>
<HEAD>
</HEAD>
<BODY dir = rtl>
]]>
חיבור לבסיס הנתונים בכדי להביא את הקומבו הראשון שיישאר קבוע בדף
כדי לבצע את הבאת הקומבו בצורה הכי מהירה שאפשר אשתמש בתכונה getString של ADO כאשר את ההפרדות בין הטורים והעמודות אבצע ע"י פרמטרים של תיבת גלילה. <![CDATA[dim strMiddleDelimiter,strEndDelimiter,strResult,strResult1
strMiddleDelimiter = ">"
strEndDelimiter = "</OPTION><OPTION VALUE="
strResult = "<OPTION VALUE="
strResult1 = "<OPTION VALUE="
strSQL="SELECT Id, Name FROM tblTree WHERE Parent_Id = 0"
rs.Open strSQL, cn
]]>הכנסת הרקורדסט לתוך ה getString
תיבת הגלילה אליה נכנס המשתנה strResult המכיל את כל התוכן של תיבת הגלילה. פקודת ה onChange של תיבת הגלילה תקרא לקובץ ASP בתוך ה IFRAME שנקרא frmAction ותעביר לו 2 פרמטרים, אחד, איזה ערך נלחץ this.value והשני באיזה רמה של התיבות הדינאמיות אנחנו נמצאים level=1. <![CDATA[<table><TR><TD>
<select name=selTypsList size=5 id=selTypsList class=selectsSmall dir =rtl
onchange="frmAction.location.href='3select1.asp?id=' + this.value + '&level=1'">
< %=strResult%>
</select>
]]>על הדף ניצור 2 DIVים למקומות שאליהן תיבות הגלילה יכנסו. בדוגמא הזאת אני משתמש ב 3 רמות של תיבות גלילה, אפשר להשתמש ביותר רמות ואת ה DIVים אליהם יכנסו עוד תיבות אפשר לבנות דינאמי ע"י createElement ב JS. <![CDATA[</TD><TD>
<div id=s1>
</div>
</TD><TD>
<div id=s2>
</div>
</TD></TR></Table>
]]>IFAME חבוי גובה 0 רוחב 0 יסיים את הדף הראשון. <![CDATA[<iframe id=frmAction name=frmAction width=0 height=0></iframe>
</BODY>
</HTML>
]]>
לחיצה על ערך בתיבת הגלילה תקרא לדף ASP בתוך ה IFRAME חלקו הראשון יהיה ממש כמו הדף הקודם רק שמשפט ה SQL ישתמש בפרמטר שהועבר אליו מתוך ה QUERYSTRING של הקריאה לדף
את התיבה שתווצר מתוך ה getString נשתול בתוך DIV בשם theSelect. פקודת ה onChange של התיבה תקרא לדף באותו IFRAM, ההבדל בינה לבין הפקודה בדף הראשון הנו שמספר הרמה שבה אנו נמצאים תהיה דינאמית, ותווצר ע"י הוספת 1 לנתון שהגיע אלינו מתוך הפרמטר level.
בסוף הדף נבצע פונקציית JS שתפקידה יהיה להעלות את התיבה שנוצרה בתוך theSelect אל ה DIV הנכון בדף העליון. <![CDATA[<SCRIPT LANGUAGE=javascript>
var s]]>בשלב ראשון ננקה את ה DIVים בדף העליון מנתונים, בכדי לא להשאיר שאריות של תיבות מסיבוב קודם. ננקה את התיבות המתחילות מעל התיבה עליה לחצנו, את הנתון הזה ניקח מתוך הפרמטר level היות והמקרה שלנו הוא קשיח ל 3 תיבות נשתמש בערך קשיח 2 כדי לציין עד כמה DIVים לנקות. <![CDATA[for (i=< %=Request("level")%>;i<=2;i++){
s = "s" + i
parent[s].innerHTML = ""
}]]>וכל מה שנותר לנו לעשות זה להעביר את תוכן הDIV שבתוכו נוצרה תיבת הגלילה אל ה DIV הנכון בדף העליון, כאשר ניצור ע"י השימוש בפרמטר של ה level את ה ID של ה DIV שאליו אנחנו רוצים להעביר את התוכן. <![CDATA[s = "s" + < %=request("level")%>;
parent[s].innerHTML=theselect.innerHTML;
</script>]]>
|
.png)
