Need to display user's choices realtime in magento - php

Question

I am developing a magento webstore where there is a page where customer can pick the route where he/she wants to pick up the order. The selection is twofold and at the moment two different set of buttons so no checkbox or radio buttons. First the user picks the date then then the place.
Right now i am calling a javascript function which loads a cookie on button press then reloads the page and returns user to an anchor link so the user doesn't get confused where he was when making the first selection. When the page reloads the sidebar contains php which reads the contents of the cookies. This doesn't feel very intuitive and I am sure there is a much better way to do this. The choices user has made should be displayed on the sidebar shopping cart which is a .phtml file. Just a simple "you have chosen the route x" is enough, right now I have an echo but the page has to reload first.
So in short when user makes a choice the sidebar should update with information about the choice, without the page reloading itself and returning to position with the help of anchor-links. The notification should preferably be in the left sidebar. I don't think I want to use popups or temporary notifications but they could be an additional feature.
I am pretty sure this is a very simple question but for some reason I cant seem to find the right keywords and then there is magento itself.

Answer 1

OK This is the best one I have come up so far. I still consider it only partially solved and I think I could get more help from a magento community but for now it works well enough.
Include this script to the custom.phtml header:
<script type="text/javascript">
function AJAX(){
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}
}
// Timestamp for preventing IE caching the GET request (common function)
function fetch_unix_timestamp()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
// Reload div with php
function refreshdiv_timediv(){
var seconds = '3';
var divid = "ajax";
var url = "routes/customer_needs_to_see_this.php";
var xmlHttp_one = AJAX();
// No cache
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;
// The code...
xmlHttp_one.onreadystatechange=function(){
if(xmlHttp_one.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp_one.responseText;
setTimeout('refreshdiv_timediv()',seconds*1000);
}
}
xmlHttp_one.open("GET",nocacheurl,true);
xmlHttp_one.send(null);
}
// Start the refreshing process
window.onload = function startrefresh(){
setTimeout('refreshdiv_timediv()',seconds*1000);
}
</script>
Then I place customer_needs_to_see_this.php to folder routes in the www root directory. The script above will automatically refresh the div "ajax" and inside the ajax-div there is a php include routes/user_needs_to_see_this.php. The div with include is located in cart_sidebar.phtml
I had to place the file outside of magento's template files because I couldn't do includes like ../template/checkout/customer_needs_to_see_this.php. Includes work when they are in the same folder as the view (phtml-file) file but otherwise it doesnt seem to work. Also I couldn't get the script to fetch the user_needs_to_see_this.php from magento's template files.
Right now it updates itself every 3 seconds when customer is on the custom.phtml page. I think its ok because its just reading and making cookies so its not anything heavy. I might change it to onclick in the future.
I got the code here.
There are plenty other examples like that but the above example seems to cover most of the bases.