CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Chris L.
Chris L.

Reputation: 5

PHP Dynamic Dropdown with Ajax/JQuery Not Working --- Is Replicating <head> Code

I have two dropdowns with the data in the second dropdown dependent on what is selected in the first dropdown. I'm using Ajax/JQuery and it works fine if I comment out the include file that has my site template code for the sidebar of every page on my site. With that include file in the code though, it doesn't work. Instead of populating the second dropdown, it has an empty list. When I inspect the element using the browser's development tools, the code from the the head tag is being replicated there instead of the code populating the list options. So I guess my question is if there is some potential conflict between HTML, PHP, and Ajax/JQuery? I should also note that even if I place all the HTML in the file instead of calling the include library for the sidbar, it still behaves in the same manner.

Here is the ajax2.js...

    $(document).ready(function() {
      $("#country").change(function() {
        var country_id = $(this).val();
        if(country_id != "") {      $.ajax({
            type:"POST",
            url:"sample.php",
            data:{c_id:country_id},
            success:function(response) {
              var resp = $.trim(response);
              $("#state").html(resp);
            }
          });
        } else {
          $("#state").html("<option value=''>------- Select --------</option>");
        }
      });
    });

Here is the Ajax/JQuery source files from the head tag...

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax2.js"></script>

And finally, here is the HTML with the code for the two dropdowns (sample.php)...

<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<title>Sample</title>
<link href="../../sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax2.js"></script>
</head>

<body>

<?php include("../includes/sidebar.php"); ?><?php



//MySql DB Info

include("../includes/db_connect7.php");

if (isset($_POST['c_id'])) { 
	
	$title = mysql_real_escape_string($_POST['c_id']);
	 echo "title = $title";
	  $sql = "select * from TW_Picks where title='$title'";
	  $res = mysql_query($sql);
	  if(mysql_num_rows($res) > 0) {
	    echo "<option value=''>------- Select --------</option>";
	    while($row = mysql_fetch_assoc($res)) {
	      echo "<option value=\"$row[name]\">$row[pick]</option>";
	    }
	  }


} else {
	
	?>

	<div align="center">
		<font face="Verdana, Arial, Helvetica, sans-serif" size="5"><strong>SAMPLE</strong></font> </div>
	<p>&nbsp; </p>
	<center>
	<form action="<?php echo $PHP_SELF ?>" method="post">
		<br><br>
		<select name="country" id="country">
			<option>Select Fed</option>
			<option value="USA">USA</option>
			<option value="CAN">CAN</option>
			<option value="MEX">MEX</option>
		</select>
		<br><br>
		<select name="state" id="state">
			<option>Select Title</option>
		</select>
		<br><br>		<br><br><br>
		<input name="addnew" type="submit" value="Add New">
		<br><br>
	</form>
	</center>
	<?php 
		
} ?>

	<br><br><br><br><br><br><br>
<p>&nbsp;</p>

</body>

</html>

Upvotes: 0

Views: 579

Answers (1)

Lucky Soni
Lucky Soni

Reputation: 6888

The sample.php file also includes the header file. When you fetch sample.php using jQuery, it send back the header code as well. Make your your sample.php file only returns required HTML.

if (isset($_POST['c_id'])) { 
  // what you are doing here should work okay
} else {
    // Put the includes here
    include("../includes/sidebar.php");
}

Upvotes: 2

Related Questions