#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2005
    Posts
    65
    Rep Power
    10

    AJAX - Adapting OC_Calendar output states


    Hi,
    Iím learning AJAX and trying to adapt a version of OC_Calendar so that it accepts various different states (free, booked, part booked etc) rather than just booked / not booked.

    I am using the existing calendar_status[id] to control the display of coloured backgrounds in a table cell but I canít seem to get the AJAX to display the background at the right time Ė EG when date_status is set to 4, the AJAX displays the right background, but when the page is refreshed, the calendar_status[id] defaults to 9 (shown by the alert on the page and stored in the db) and the background stays set for date_status = 4.
    If I manually change the date_status to 9, the right number is stored in the db but the background remains the same. (not sure if its relevant as I guess itís a separate issue, but if I click on dates and refresh the page, I canít remove the booking, it just adds the date again. If I donít refresh the page it removed the booking OK)

    I guess one option would be to add a new value to the ajax which would control the state of the background but I cant get this to work (how / where would I add it?)

    If anyone wants to see the whole page I can load it up, but I think I have included the relevant bits below.

    Any help would be gratefully received as I have confused myself and can't see the wood for the trees anymore.

    The Javascript
    Code:
    <script type="text/javascript">
    
    var calendar_status_no = 4;   // Setting for status number from db
    var calendar_status = new Array();
    
    function calendar_date(id,status,username,default_color,) {
    
    	var dateid = document.getElementById(id);
    	
    	if (calendar_status[id]) {
    	} else {
    		calendar_status[id] = status;
    	}
    	if (calendar_status[id]=="0") {
    		calendar_status[id] = calendar_status_no;
    		alert(calendar_status_no);
    	} else {
    		calendar_status[id] = "0";
    		alert(calendar_status_no);
    	}
    
    	SimpleAJAXCall('calendar.php?ajax=1&u=' + username + '&d=' + id + '&s=' + calendar_status[id],SimpleAJAXCallback, '', 'response');
    
    	if (calendar_status[id]=="0") {
    		dateid.style.background = "#" + default_color;
    	} else if (calendar_status_no = "4"){ 
    		dateid.style.background = "url(images/halfdaybooked.png)";
    	} else if (calendar_status_no = "9"){ 
    		dateid.style.background = "url(images/booked.png)";
    	}
    	
    	}
    
    </script>
    The AJAX Function
    Code:
    function SimpleAJAXCall ( in_uri, in_callback, in_method, in_param ) {
    	// The method indicator is actually optional, so we make it GET if nothing was passed.
    	if ( (typeof in_method == 'undefined') || ((in_method != 'GET')&&(in_method != 'POST')) ) {
    		in_method = 'GET';
    		}
    
    	//setStatus ("1","showimg");
    	//setStatus ("1","showimg2");
    	
    	in_method = in_method.toUpperCase();
    	
    	// We verify that the proper parameters have been passed in.
    	if ( SupportsAjax() && (typeof in_uri != 'undefined') && in_uri && (typeof in_callback == 'function') ) {
    		if ( in_method == 'POST' ) {
    			return g_ajax_obj.CallXMLHTTPObjectPOSTParam ( in_uri, in_callback, in_param );
    			} else {
    			return g_ajax_obj.CallXMLHTTPObjectGETParam ( in_uri, in_callback, in_param );
    			}
    		} else {
    			return false;
    		}
    };
    The relivant PHP output
    Code:
    if (empty($date_status)) { // all the not edited days
    $status_color = "bgcolor=\"e7e7e7\"";  // grey - not booked
    $js_status = "0";
    $calendar_status_no = "0";
    							
    } else if ($date_status =="4"){
    $status_color = "background=\"images/booked.png\""; 
    $js_status = "0";
    $calendar_status_no = "4";
    							
    } else if ($date_status ="9"){
    $status_color = "background=\"images/halfdaybooked.png\""; 
    $js_status = "0";
    $calendar_status_no = "9";
    }
    							
    else if ($date_status ="2"){
    $status_color = "bgcolor=\"#FFFF33\""; 
    $js_status = "0";
    $calendar_status_no = "9";
    }
    
    
    
    $output .= "<td id=\"$year"."-"."$fmonth"."-"."$fstartdate\" width=$width valign=top align=center onclick=\"calendar_date('$year"."-"."$fmonth"."-"."$fstartdate','$js_status','$username','e7e7e7');\" $status_color >
    							
    <table width=\"100%\" cellpadding=2 cellspacing=0 border=0><tr><td align=center>
    <span class=\"calendar_date_number$small\">$startdate($date_status)</span>
    
    </td></tr></table></td>";
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Location
    Pennsylvania, USA
    Posts
    35
    Rep Power
    2
    The web browser's cache may be getting in the way. One way to solve this is to use a unique POST URL each time by appending some field of random number value. For example:

    function getRandomField()
    var randomnumber=Math.floor(Math.random()*88888888);
    var rField = "&rand=" + randomnumber; // Needed to avoid browsers from retrieving cached copy.
    return rField;
    } // end getRandomField()

    You would then append the returned random field to the in_uri.
    For example:

    randField = getRandomField();
    SimpleAJAXCall(calendar.php?ajax=1&u=' + username + '&d=' + id + '&s=' + calendar_status[id] + randField, SimpleAJAXCallback, '', 'response');

    I'm not guaranteeing that this will work. But, it is worth a try.

    Regards - Shawn
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2005
    Posts
    65
    Rep Power
    10
    Thanks Shawn, it hasn't solved the problem I had but its a very good idea so have added it anyway.

    TBH I think the problem I have lies more with my bad coding and the way I am trying to get different states to display via the else if statements.

IMN logo majestic logo threadwatch logo seochat tools logo