WordPress.org

Forums

Adding a page with ajax in wordpress (1 post)

  1. cherrydee
    Member
    Posted 1 year 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" "http://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 http://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 http://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?

Topic Closed

This topic has been closed to new replies.

About this Topic