SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AJAX and Browser Caches

    Hello everyone, I hope you can help!

    I have a form with a number of checkboxes. If a checkbox is selected, some of the others may need to be disabled. So I use onClick to call a JavaScript function which uses XmlHttpObject to query from a database if any checkboxes should be disabled as a result (using PHP/MySQL) - I send back an array of integers using JSON (lets call it array X). The JavaScript function then checks all the checkboxes in the form - if the value of any checkbox appears in X, that checkbox is disabled.

    This works perfectly using the JavaScript code below when caching is turned ON in IE (options 2,3 or 4 under cache settings). The necessary checkboxes are all disabled instantly. The problem is when the cache is turned OFF (option 1)

    Code:
    function isInArray(elem,arr) {
    /* Returns true if elem is present in the given array, arr */
      var arrLength = arr.length;
      for ( var i=0; i<arrLength; i++ ) {
        if ( arr[i] == elem ) { return true; }
      }
      return false;
    }
    
    function handleClashes(inputCheckbox) {
    /* Returns a (possible empty) array of all the shifts which clash with the given shift */
    
    var xho=GetXmlHttpObject();
    if (!xho) {
      alert ("This browser does not support the technology required to use this website.");
      return false;
    }
    url = "phplib.php?function=getClashesArray&selectedID=" + inputCheckbox.value;
    var clashingShiftIDs = new Array();
    xho.onreadystatechange = function() {
      if ( xho.readyState==4) {
        clashingShiftIDs = eval("(" + xho.responseText + ")");
      }
    }
    xho.open("GET",url,true);
    xho.send(null);      
    
    numCheckboxes = document.bookin.availshifts.length;
    if (inputCheckbox.checked == true) {
    /* Cycle through all enabled checkboxes, disable those with a value which appears in overlapShifts */       
      for ( var i=0; i<numCheckboxes; i++ ) {
        iCheckbox = document.bookin.availshifts[i];
        if ( iCheckbox.disabled == false && iCheckbox.value != inputCheckbox.value ) {
          // alert ( "If caching is off, this is needed" ); ************
          if ( isInArray(iCheckbox.value, clashingShiftIDs) ) {
            iCheckbox.disabled = true;
          }
        }
      }
    }
    
    }
    The problem? If, in Internet Explorer, the browser cache is turned OFF (ie. set to check for new versions of a page at every visit - option 1 under cache settings), then this code only works if I uncomment the alert in the code above. The alerts come up and the necessary checkboxes disabled one by one.

    I'll be honest, Im not even sure where to start looking for a solution to this problem! Any suggestions?

    Thanks very much for your help!

    Keith

    PS. Im not sure how to change browser cache settings in Firefox, but the default behaviour is as described in the problem above - it needs the alert to work.

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the problem is the alert acts as a temporary pause in the script, allowing the Ajax request to go through, so the variable "clashingShiftIDs" gets a value assigned to it.

    However, when the alerts are removed, in the few milliseconds or so that your script requires to receive the return call from the server side script, the checkbox stuff is all done with an empty array (since the variable is set originally to be empty).

    My first suggestion is, instead of trying to rebuild the wheel with your own Ajax functions, use something like the jQuery to handle your Ajax stuff.

    Second, don't use an anonymous function in your Ajax request, use a named function like "handleRequest()". When the Ajax request is returned from the server, it will return a text value to this function (which contains the variable information you want). Then encapsulate all of your check-box logic inside this function like so:

    Code:
    function handleReturn(text) {
      clashingShiftIDs = eval("(" + text + ")");
      numCheckboxes = document.bookin.availshifts.length;
      if (inputCheckbox.checked == true) {
      /* Cycle through all enabled checkboxes, disable those with a value which   appears in overlapShifts */       
        for ( var i=0; i<numCheckboxes; i++ ) {
          iCheckbox = document.bookin.availshifts[i];
           if ( iCheckbox.disabled == false && iCheckbox.value !=    inputCheckbox.value ) {
          // alert ( "If caching is off, this is needed" ); ************
          if ( isInArray(iCheckbox.value, clashingShiftIDs) ) {
            iCheckbox.disabled = true;
            }
          }
        }
      }
      return;
    }
    Something like this will work.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •