如何使用下拉列表中的JQuery使用Ajax显示.php文件？

Question

Basically, I have populated a dropdown list using php from a database on a page called admin.php.

I'm now using JQuery with Ajax so that when a surname is clicked from the dropdown menu.

It will call employerProfile.php and show it in the <div id="showEmployerProfile"> but my code doesn't seem to be working.

There are no errors, just the function doesn't want to work.

Here's the JS:

//SHOW EMPLOYER PROFILE FOR ADMIN
$(".eNameData").click(function() {
var eNameData = $(this).val();
    var dataToSend = 'eName=' + eNameData;

    $.ajax({                
        url: "includes/employerProfile.php", 
        type: "POST",
        data: dataToSend,     
        cache: false,
        success: function(html)
        {
        $("#showEmployerProfile").show();
            }
    });
  }
);  

Here is the code for the admin.php:

 <script type="text/javascript" src="/js/jq.js">
 </script> 

  <div id="pMainDashBoard">

    <?php /*?>DROP DOWN MENU TO SELECT EMPLOYER<?php */?>

  <form id="employer" method="get">
    <select name = "selectEmployer" id = "selectEmployer">
          <?php

          include "database_conn.php";
          $sql = "SELECT surname FROM employer";
          mysql_query($sql) or die (mysql_error());
          $queryresult = mysql_query($sql) or die(mysql_error());

        while ($row = mysql_fetch_assoc($queryresult)) {
            $eName = $row['surname'];
            echo"<option value = \"$eName\">$eName</option>
";
                        }
            mysql_free_result($queryresult);
            mysql_close($conn);
        ?>
      </select>
      </form>
   </p>

<div id ="showEmployerProfile">

 </div>

employerProfile.php:

employerProfile has $userID = $_GET['userID']; then the database_conn.php. SQL query is stated as:

$query = SELECT * FROM employer WHERE userID = '$userID';

but has " " around the sql then every div following this statement is echo'ed and has " " around each tag.

        echo <div id=\"empName\">;
        echo <h2>;
        echo $row["forename"] .' ';
        echo $row["surname"];
        echo  - ;
        echo $row["position"];
        echo </h2>;
        echo </div>;




        echo <div id=\"employerHead\">;

        echo <div id=\"empCompName\">;
        echo <h2>Company Name</h2>;
        echo $row["companyName"];
        echo </div>;

                    ..blah blah

        echo "</div>";

}


?>

Any help is much appreciated, thank you. T.J

Answer 1

It depends on what employerProfile.php looks like exactly, but assuming that it returns html (you are echoing html for example), you need to use that html to populate your showEmployerProfile div.

So you would need to change:

success: function(html)
    {
      $("#showEmployerProfile").show();
    }

to something like:

success: function(php_output)    // using a different name for clarity
    {
      $("#showEmployerProfile").html(php_output).show();
    }

And you need to change the first part to something like:

$("#selectEmployer").change(function() {
  var eNameData = $(this).val();

That way you are reacting on changes in the dropdown selection.

Edit: Based on your comment, you need to supply the userID to your ajax function and employerProfile.php. You would need to change how your select is built in admin.php:

$sql = "SELECT userID, surname FROM employer";     // changed
mysql_query($sql) or die (mysql_error());
$queryresult = mysql_query($sql) or die(mysql_error());

while ($row = mysql_fetch_assoc($queryresult)) {
    $eName = htmlspecialchars($row['surname']);    // changed
    $userID = intval($row['userID']);              // added, assuming userID is an integer
    echo"<option value = \"$userID \">$eName</option>
";    // changed
}

Now your select options will have a value that corresponds to a userID.