Dropkick.js, Calling element from PHP function

[scholarwithfire]

Hello, I'm trying to use Dropkick Jquery select box plug in for my chained select box. However, the plug in only works for my first select box and the second select box did not show up. I have two php files, the form and the func.php. Any help would be much appreciated

Form.php

<link type="text/css" href="../resources/css/dropkick.css" rel="stylesheet" />
<script type="text/javascript" src="../resources/javascripts/dropkick.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#wait_1').hide();
    $('#drop_1').change(function(){
      $('#wait_1').show();
      $('#result_1').hide();
      $.get("func.php", {
        func: "drop_1",
        drop_var: $('#drop_1').val()
      }, function(response){
        $('#result_1').fadeOut();
        setTimeout("finishAjax('result_1', '"+escape(response)+"')", 0);
      });
        return false;
    });
});

function finishAjax(id, response) {
  $('#wait_1').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
function finishAjax_tier_three(id, response) {
  $('#wait_2').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
</script>



 <script type="text/javascript">
    $(function () {
        $('.sel1').dropkick();
        $('.sel2').dropkick();
    });
</script>

<?php
    include("func.php");    
?>
<form action="" method="post">

                <select name="drop_1" id="drop_1" class="sel1">

                <option value="" selected="selected" disabled="disabled">Select a Course</option>

                <?php getTierOne(); ?>

                </select> 

                <span id="wait_1" style="display: none;">
                <img alt="Please Wait" src="../resources/pictures/pages/ajax-loader.gif"/>
                </span>
                <span id="result_1" style="display: none;"></span>
                <span id="wait_2" style="display: none;">
                <img alt="Please Wait" src="../resources/pictures/pages/ajax-loader.gif"/>
                </span>
                <span id="result_2" style="display: none;"></span> 

</form>

And here is my Func.php

<?php
//**************************************
//     Page load dropdown results     //
//**************************************


function getTierOne()
{

    $result = mysql_query("SELECT DISTINCT course_code FROM session") 
    or die(mysql_error());

      while($tier = mysql_fetch_array( $result )) 

        {
           echo '<option value="'.$tier['course_code'].'">'.$tier['course_code'].'</option>';
        }

}

//**************************************
//     First selection results     //
//**************************************


if (isset($_GET['func'])&& $_GET['func'] == 'drop_1' ) {
drop_1($_GET['drop_var']);
}

function drop_1($drop_var)
{  


    include_once('../resources/php/db_connect.php');
    $result = mysql_query("SELECT DISTINCT subject_code FROM session WHERE course_code='$drop_var'") 
    or die(mysql_error());

    echo '<select name="drop_2" id="drop_2" class="sel2">
          <option value="0"  selected="selected">Subject</option>';

           while($drop_2 = mysql_fetch_array( $result )) 
            {
              echo '<option value="'.$drop_2['subject_code'].'">'.$drop_2['subject_code'].'</option>';
            }

    echo '</select>';
    echo "<script type=\"text/javascript\">
$('#wait_2').hide();
    $('#drop_2').change(function(){
      $('#wait_2').show();
      $('#result_2').hide();
      $.get(\"func.php\", {
        func: \"drop_2\",
        drop_var: $('#drop_2').val()
      }, function(response){
        $('#result_2').fadeOut();
        setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 0);
      });
        return false;
    });
</script>";



}
?>

This is your form:

<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("func.php", {
func: "drop_1",
drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 0);
});
return false;
});
});
function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax_tier_three(id, response) {
$('#wait_2').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>

which should include this:

<script type=\"text/javascript\">
$('#wait_2').hide();
$('#drop_2').change(function(){
$('#wait_2').show();
$('#result_2').hide();
$.get(\"func.php\", {
func: \"drop_2\",
drop_var: $('#drop_2').val()
}, function(response){
$('#result_2').fadeOut();
setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 0);
});
return false;
});
</script>";

The code above shouldn't be in Func.php.

Then you can ajax the data without any issues.