How to display a .php file with Ajax using JQuery from a dropdown list?

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>\n";
                        }
            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

Assuming that you are echoing the HTML output from employerProfile.php file.

You are not passing the output HTML to the showEmployerProfile div. you are just showing the div without anything inside this. Your Ajax call should be changed as :

$(".eNameData").change(function() {
     var eNameData = $(this).val();
     var dataToSend = 'eName=' + eNameData;
     $.ajax({                
         url: "includes/employerProfile.php", 
         type: "POST",
         data: dataToSend,     
         cache: false,
         success: function(response)
                  {
                      $("#showEmployerProfile").html(response);
                      $("#showEmployerProfile").show();
                  }
      });
});

Answer 2

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>\n";    // changed
}

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

Answer 3

You can try some this like this:

In your employerProfile.php, start creating a response buffer and add content

<?php 
    try{
        $strUrl = 'your new php file to build html content';
        ob_start();
        include $strUrl;
        $string = ob_get_clean();
        $json = array("content" => $string,"isSuccess" => true);
        echo json_encode($json);
    }catch(Exception $e){
        echo array("isSuccess" => false);
    }
?>

In your new php file for building content you can add this:

<?php 
    foreach($rows as $row){
    echo '<div>'.$row["forename"].'</div>';
    ....
    ....
    }
    ?>

And finally in your javascript:

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

Hope this helps..

Note: you have to use change event as eyurdakul posted

Answer 4

you don't use click event for this, you need to use change event.

var the_thing = function(e){
    $.ajax({
        url: "some.url",
        data: {"surname":$(this).val()},
        success: function(d){
             $("div_to_show").show();
        }
    });
}
var dd = $("#my_drop_down").change(the_thing);