History with AJAX in IE8

16 במאי 2010

אין תגובות


 



כיצד לתמוך בלחצני Back ו – Forward כשעובדים עם AJAX בעזרת IE8.



 

הבעייה ידועה:


אין תמיכה בלחצני ההיסטוריה של הדפדפן כשעושים פעולות ב – AJAX.

 

 

לדוגמא:


לפניכם מערכת פשוטה שמביאה שמות של ערים ב – AJAX לפי בחירת שם המדינה.

 



<select id="country" onchange="FillData(this.value)">


    <option value="-1">Select</option>


    <option value="Israel">Israel</option>


    <option value="USA">USA</option>


</select>


 


 


<select id="City">


</select>


 


שני פקדים מסוג select – בזמן שישנו את הראשון ה -select השני אמור לקבל את הערכים שלו ב – AJAX.

 

הנה ה – JS

 



function FillData(country) {


 


    if (country.value != "-1") {


 


        var xhr = new XMLHttpRequest();


        xhr.onreadystatechange = function() {


            if (xhr.readyState == 4 && xhr.status == 200) {


                ClearCity();


                FillCity(xhr.responseText);


            }


        }


 


        xhr.open("GET", "Handler1.ashx?country=" + country, true);


        xhr.send();


    }


}


 





  • במידה והמשתמש לא בחר באופציית ה – Select.


  • נייצר אובייקט מסוג XMLHttpRequest.


  • בזמן שהסטטוס ישתנה ונוודא שהכל חזר כשורה.


  • נמחוק מתוך ה – select של הערים את מה שקיים כרגע


  • נמלא את התוצאות מחדש.


  • נגלוש ל – handler1.ashx ונשלח כפרמטר את המדינה.


  • נביא את הנתונים.

 

 

מייד נראה את המתודות Fill ו – Clear. אבל לפני כן נראה את ה – handler

 



public void ProcessRequest(HttpContext context)


{


    context.Response.ContentType = "text/plain";


 


    if (context.Request["country"] == "USA")


    {


        context.Response.Write("NY;Washington");


    }


    else


    {


        context.Response.Write("tel aviv;beni brak;ramt gan");


    }


}


 


לפניכם המשך מתודות הסקריפט

 



function FillCity(responseText) {


    var city = document.getElementById('City');


 


    var array = responseText.split(';');


    for (var i = 0; i < array.length; i++) {


        var item = document.createElement("option");


        item.text = array[i];


        city.add(item);


    }


}


 


function ClearCity() {


    var city = document.getElementById('City');


 


    for (var i = city.children.length; i >= 0; i–) {


        city.remove(i);


    }


}


 

 


הקוד שתואר למעלה יעבוד כמו שצריך, הבעייה הגדולה היא שכשאשר המשתמש ישנה את הערך בקומבו של המדינות הוא לא יוכל ללחוץ על הקודם כדי לחזור לבחירה הקודמת שלו.

 

פיתרון:


שימוש בשינוי ה – hash ב – url.

 


נוסיף למתודה FillData את השורה הבאה

 



window.location.hash = country;



מה שישנה את ה – url ועל כן לחצן "הקודם" יתעורר לתחייה.

 


נוסיף ל – body את הקוד הבא

 



 onhashchange="HashChangeHandler();



בזמן שהמשתמש ילחץ על "אחורה" או "קדימה" נגיע למתודה הזאת

 



function HashChangeHandler() {


    var country = document.getElementById('country');


    var hash = window.location.hash;


    if (hash == '#' || hash == ") {


        country.value = "-1";


        ClearCity();


        return;


    }


 


    if (hash.substr(1) != country.value) {


        country.value = hash.substr(1);


        FillData(country.value);


    }


}

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *