Incase anyone needed this

Over the past few days ive been playing heavily developing a site that uses control.modal with heavy ajax to achieve a very web2.0 website.

Ive written alot of libs and hacks to do a various amount of things .... the main one ive just finished is refreshing data on a parent of a Control.Modal iframe without refreshing the page or closing the modal window (this came in handy for me when i needed to update a saved Shopping basket on the parent window/page ....

Here is the simple code ajax code to update the id'd element

function makeParentRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
            // set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      http_request.onreadystatechange = parentResultContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }
   function parentResultContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
parent.document.getElementById(''+updateDiv+'').innerHTML = result;            
} else {
            alert('There was a problem with the request.');
         }
      }
   }
 function doParentRequest(url,obj,id,responseArea,postVal) {
        updateDiv=""+responseArea+"";
            var poststr = postVal;
                makeParentRequest(url, poststr);
}

Which is done by calling the following function:

function refresh_cart(product_id,action) {
postVALUE = "&product;_id=" + encodeURI( ""+product_id+"" )
          + "&action;=" + encodeURI( ""+action+"" );
doParentRequest('/php/job_cart.php?yes=no','this.parentNode',2,'job_basket',''+postVALUE+'');
}

i then attach that function to an image (just for my sanity but it can be done anyway you like !! :


function closeModal() {
    parent.focus(); 
/*
needed for safari and Firefox 2x else it doesnt focus the parent and pressing up/down cursor throws a JS error
*/  
parent.Control.Modal.close();
}
function load_saved_cart(cart_id) {
if(confirm('Are you sure you would like to load this cart')) {
postVALUE = "&cart;_id=" + encodeURI( ""+cart_id+"" )
doRequest('/php/load_saved_cart.php?yes=no','this.parentNode',2,'ajax_data',''+postVALUE+'');
document.getElementById("ajax_data").innerHTML="'>Job Cart Loaded.";
refresh_cart('0','display');
setTimeout('closeModal()',2000); // closes the modal window after 2 seconds
}
}

anyway feel free to tear apart my code and play .. it works in FF1x,2x IE6,7 Opera Knoqueror ....

In IE6 it doesnt refresh the parent ajax call for some reason and it cant be fixed (might juts be my un-updated IE6 !!!!

/Jester

Posted June 21st, 2007 at 5:11am by jester

My bad it does refresh the ajax in IE6

Posted June 21st, 2007 at 5:43am by jester

How come you're handling Ajax calls manually, rather than using a framework's abstraction? You must have Prototype included if you're using Control.*, which gives you Ajax.Request().

Posted June 21st, 2007 at 5:54am by bbodien

Because i need more flexability than was provided that i could make custom calls and returns , plus i allready had my own library built for handling the ajax and didnt want to rely on it through out the site on pages that didnt need prototype ;)

Posted June 21st, 2007 at 6:22am by jester

Because i need more flexability than was provided that i could make custom calls and returns , plus i allready had my own library built for handling the ajax and didnt want to rely on it through out the site on pages that didnt need prototype ;)

Posted June 21st, 2007 at 6:27am by jester

just put prototype on every page, it will only load the first time and be cached after that. Your suggestion above defeats the purpose of using a library such as prototype, and is ridiculously complicated for what you are trying to do to be honest.

Posted June 27th, 2007 at 9:57am by duaneatat

Login or Register to Post