Support » Fixing WordPress » Adding a page with ajax in wordpress

  • 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" "">
    <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.value = nVal[i];
    	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;
    		 	 	 else 	{
    				 	 alert('Error ' + getFile + ' --- ' + adminRequest.statusText);
    		var infoStr = "?choice="+nVal;"GET", getFile + infoStr, true);
    	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);	
    <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;}	
    </head><?php /* Template Name: Practice */
    		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="">
    				<select name="state">
    					<option value="">Select State</option>
    					<?php echo $dd; ?>
    				<select name="city" onchange="alert(this.value)">
    					<option value=""> Make a selection </option>

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

        $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>";
        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.