Adding a page with ajax in wordpress

  • cherrydee

    (@cherrydee)


    11 years ago

    Hi. I’m stuck with my codes for 2 weeks already. I want to have a page with 2 dropdowns. The first DD will show all ‘states’ from my database and the second DD should be based on the 1st DD’s value. I think my codes are OK but the problem is the integration with wordpress itself. Is there any codes/functions/etc needed for a page to be read as ajax?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

	function parseResponse(adminResponse,nList){

		var nText = adminResponse.getElementsByTagName('optionText');
		var nVal = adminResponse.getElementsByTagName('optionVal');
		nList.options.length = 1;
		for (i=0; i<nText.length; i++)
			{
			 var nOption = document.createElement('option');
			 nOption.appendChild(document.createTextNode(nText[i].firstChild.data));
			 nOption.value = nVal[i].firstChild.data;
			 nList.appendChild(nOption);
			}
	}

	function update(nVal,nList,getFile){

		var adminRequest = window.XMLHttpRequest ? new XMLHttpRequest()
				 			 : window.ActiveXObject
				 			 ? new ActiveXObject("Microsoft.XMLHTTP")
				 			 : null;
		adminRequest.onreadystatechange = function()
			{
		 	 if (adminRequest.readyState == 4)
				{
		 	 	 if (adminRequest.status == 200)
					{
			 	 	 var adminResponse = adminRequest.responseXML;
			 	 	 parseResponse(adminResponse,nList);
					}
		 	 	 else 	{
				 	 alert('Error ' + getFile + ' --- ' + adminRequest.statusText);
					}
				}
			}
		var infoStr = "?choice="+nVal;
		adminRequest.open("GET", getFile + infoStr, true);
		adminRequest.send(null);
	}

	function init(){

		var nForm = document.forms[0];
		nForm['state'].onchange = function()
			{
			 if (this.value != "")
				{
			 	 update(this.value,nForm['city'],'<?php echo get_template_directory_uri(); ?>/updateGroup.php');
				}
			}
	}

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

</script>
<style type="text/css">

	 body {background-color: #eae3c6; margin-top: 60px;}
	 form {width: 430px; margin: auto;}
	 fieldset {width: 410px; background-color: #f0fff0; border: 1px solid #87ceeb;}
	 legend {font-family: times; font-size: 14pt; color: #00008b; background-color: #87ceeb;
		 padding-left: 3px; padding-right: 3px ; margin-bottom:5px;}
	 select {font-family: tahoma; font-size: 10pt; width: 160px; margin-left: 35px; margin-bottom: 10px;}	

</style>
</head><?php /* Template Name: Practice */
	?>
	<body>
	<?php

		global $wpdb;

		$query = "SELECT * FROM zipcode GROUP BY FULLSTATE ASC";
		$result = mysql_query($query) or die(mysql_error());

		while($row = mysql_fetch_array($result,MYSQL_ASSOC))
		{
		   $dd .= "<option value='".$row['STATE']."'>".$row['FULLSTATE']."</option>";
		}

	?>
		<form action="">
		   <fieldset>
			<legend>Form</legend>
				<select name="state">
					<option value="">Select State</option>
					<?php echo $dd; ?>
				</select>
				<select name="city" onchange="alert(this.value)">
					<option value=""> Make a selection </option>
				</select>
		   </fieldset>
		</form>
	</body>
</html>

    First, I pasted those codes in notepad++ and saved it as practice.php. Uploaded it to my wordpress theme directory. Typing https://www.site.com/practice.php shows ‘page not found’ so i went to wordpress dashboard and created a new page -> assigned the template named ‘practice’. typed https://www.site.com/practice.php again and it works. 

    <?php  

    $choice = $_GET['choice'];
    $xml = "<?xml version='1.0' ?><options>"; 

    global $wpdb; 

    $query = "SELECT * FROM zipcode WHERE STATE = '$choice'";
    $result = @mysql_query($query);
    $num = @mysql_num_rows($result);
    if ($result && $num > 0)
        {
          while ($row = mysql_fetch_array($result,MYSQL_ASSOC))
            {
               $xml .= "<optionText>" . $row['CITY'] . "</optionText><optionVal>" . $row['CITY'] . "</optionVal>";
            }
        }
    $xml .= "</options>";
    @mysql_free_result($result);
    @mysql_close();
    header("Content-Type: text/xml");
    echo $xml; 

?>

    Ok so next i created a page with the codes above and named it updateGroup.php. uploaded it on wordpress theme directory.
    Tested my codes and…I can’t get it to work!! ??
    Please i need help. should i add get_header and get_footer for my reference page? or do i need to configure something in wordpress to recognize my ajax?

  • The topic ‘Adding a page with ajax in wordpress’ is closed to new replies.