Using widgets in an AJAX requested page...please help

[fdgloworm]

Hello everyone.  I'm hoping this forum can help me out.  I am teaching myself PHP, AJAX, Javascript and MySQL programming and have been at it for over a year off and on, but just started with AJAX. 

 

I have borrowed many books from the library to answer my questions, but some questions the books just don't cover.

 

Ok - some background on the platform.

I am using Dreamweaver 8 with MX Kollection 3 and MX AJAX toolbox to put my code together.  I use the GUI as often as I code by hand.

I use WampServer to test it all, and a professional hosting company for live server.

 

My problem is I have a PHP page(internal_request.php) that holds multiple forms in a switch:case setup.  This page is displayed by the internal_request.js file which instantiates and runs the AJAX requests.  The AJAX requests are called from one of two pages (createAgenda.php and editAgenda.php).  My problem comes when using the MX Kollection Datepicker widget - it will not display the widget when the widget is included in the internal_request.php file (my guess is becuase it is called by the AJAX in the .js file) but it displays fine in the portion of the pages not sent by AJAX.  I have included all the includes, js files, etc that I can in both the calling file and the internal_request.php file.  Any ideas?

 

I hope these snippets help:

 

Snippet of internal_request.php without the switch:case - that works like a charm:

This is a test for the datepicker without using a form tag. <br>
			<input name="testDatepicker" id="testDatepicker" value="" size="12" maxlength="10" wdg:subtype="Calendar" wdg:mask="<?php echo $KT_screen_date_format; ?>" wdg:type="widget" wdg:mondayfirst="true" wdg:singleclick="false" wdg:restricttomask="yes" wdg:readonly="true" />

 

Here is the snippet of code from one of the calling pages, editAgenda.php:

<div id="content">  
  	   	<?php if (!isset($_GET['p_key'])) {?>
			<div id="noedit" align="center"> 
			There seems to be an error in retrieving your agenda.  Please return to the agenda list and try again.  If this error continues, please contact the application administrator.
			</div>
			<?php } else {?>
			<div id="editAgenda" align="center">
  	  		<form id="agenda" name="agenda" method="post" action="">
			<input type="hidden" name="courseType" id="courseType" value="<?php echo $rseditType->Fields('type'); ?>">
			<input type="hidden" name"p_key" id="p_key" value="<?php echo $_GET['p_key']; ?>">
				<?php
			echo "<script language=javascript>editForms()</script>";
			?>
		<div id="form_cage" align="center">
			<br>
		</div>
		<input name="updateAgenda" type="submit" id="updateAgenda" value="Update">
		</form>
			</div>
	<?php } ?>
    </div>

 

Here is the complete internal_application.js file:

 

 

/* The following function creates an XMLHttpRequest object... */

function createRequestObject(){
var request_o; //declare the variable to hold the object.
var browser = navigator.appName; //find the browser name
if(browser == "Microsoft Internet Explorer"){
	/* Create the object using MSIE's method */
	request_o = new ActiveXObject("Microsoft.XMLHTTP");
}else{
	/* Create the object using other browser's method */
	request_o = new XMLHttpRequest();
}
return request_o; //return the object
}

/* You can get more specific with version information by using 
parseInt(navigator.appVersion)
Which will extract an integer value containing the version 
of the browser being used.
*/
/* The variable http will hold our new XMLHttpRequest object. */
var http = createRequestObject(); 

/* Function called to get the product categories list */
function getForms(){
/* Create the request. The first argument to the open function is the method (POST/GET),
	and the second argument is the url... 
	document contains references to all items on the page
	We can reference document.form_category_select.select_category_select and we will 		
	be referencing the dropdown list. The selectedIndex property will give us the 
	index of the selected item. 
*/
http.open('post', 'internal_request.php',true);
	var params ="courseType=" + document.agenda.courseType.value + "&courseDate=" + document.agenda.courseDate.value + "&startTime=" +document.agenda.startTime.value + "&endTime=" + document.agenda.endTime.value + "&selectLocation=" + document.agenda.selectLocation.value + "&maxParticipants=" + document.agenda.maxParticipants.value;
/* Define a function to call once a response has been received. This will be our
	handleProductCategories function that we define below. */
	/*Changing options to attempt a POST rather than a GET */
	//Send the proper header information along with the request
		http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		http.setRequestHeader("Content-length", params.length);
		http.setRequestHeader("Connection", "close");

http.onreadystatechange = handleForms; 
/* Send the data. We use something other than null when we are sending using the POST
	method. */
http.send(params);
}

/* Function called to get the product categories list */
function editForms(){
/* Create the request. The first argument to the open function is the method (POST/GET),
	and the second argument is the url... 
	document contains references to all items on the page
	We can reference document.form_category_select.select_category_select and we will 		
	be referencing the dropdown list. The selectedIndex property will give us the 
	index of the selected item. 
*/
http.open('post', 'internal_request.php',true);
	var params ="courseType=" + document.agenda.courseType.value + "&p_key=" + document.agenda.p_key.value;
/* Define a function to call once a response has been received. This will be our
	handleProductCategories function that we define below. */
	/*Changing options to attempt a POST rather than a GET */
	//Send the proper header information along with the request
		http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		http.setRequestHeader("Content-length", params.length);
		http.setRequestHeader("Connection", "close");

http.onreadystatechange = handleForms; 
/* Send the data. We use something other than null when we are sending using the POST
	method. */
http.send(params);
}

/* Function called to handle the list that was returned from the internal_request.php file.. */
function handleForms(){
/* Make sure that the transaction has finished. The XMLHttpRequest object 
	has a property called readyState with several states:
	0: Uninitialized
	1: Loading
	2: Loaded
	3: Interactive
	4: Finished */
if(http.readyState == 4){ //Finished loading the response
	/* We have got the response from the server-side script,
		let's see just what it was. using the responseText property of 
		the XMLHttpRequest object. */
	var response = http.responseText;
	/* And now we want to change the product_categories <div> content.
		we do this using an ability to get/change the content of a page element 
		that we can find: innerHTML. */
	document.getElementById('form_cage').innerHTML = response;
}
}

 

And then here is the list of includes and javascript files.  I put them in all the pages as a troubleshooting method to see if any one of them would work once it had all the includes and files.

require_once('Connections/chplibc_erti.php');
require_once('includes/wdg/WDG.php');
require_once('includes/functions.inc.php');
require_once('includes/common/KT_common.php');
require_once('includes/tng/tNG.inc.php');
<script type="text/javascript" src="includes/common/js/sigslot_core.js"></script>
<script src="includes/common/js/base.js" type="text/javascript"></script>
<script src="includes/common/js/utility.js" type="text/javascript"></script>
<script type="text/javascript" src="includes/wdg/classes/MXWidgets.js"></script>
<script type="text/javascript" src="includes/wdg/classes/MXWidgets.js.php"></script>
<script type="text/javascript" src="includes/wdg/classes/Calendar.js"></script>
<script type="text/javascript" src="includes/wdg/classes/SmartDate.js"></script>
<script type="text/javascript" src="includes/wdg/calendar/calendar_stripped.js"></script>
<script type="text/javascript" src="includes/wdg/calendar/calendar-setup_stripped.js"></script>
<script src="includes/resources/calendar.js"></script>
<link href="includes/skins/mxkollection3.css" rel="stylesheet" type="text/css" media="all" />
<script language="javascript" type="text/javascript" src="includes/jaxon/js/internal_request.js"></script>

 

Of course all of the includes are between <head> and </head>.

 

Can anyone help me out?  I just want the widget to appear!