Cascading select

Question

Sorry in advance everyone for this question as I know the cascading select boxes has been done to death but I can't seem to find any good help. I've tried various things but it all seems to fail and I'm not understanding why.

Here's the jquery I have currently:

function tester() {
$("select#type").attr('disabled', 'disabled');
$("select#cat").change(function(){
            var vid = $("select#cat option:selected").attr('value');
            var request = $.ajax({
                        url: "show_type.php",
                        type: "POST",
                        data: {id : vid}
                      });
                request.done(function(msg) {
                  $("#result").html( msg );
                });
                request.fail(function(jqXHR, textStatus) {
                  alert( "Request failed: " + textStatus );
                });
        });
}

Don't mind the first section of the code with the select#type and select#cat as these are for what I was trying to get the code to populate at first, however the .change is my trigger for the .ajax request. The rest of the code I'm merely trying to dump a simple return message into an empty div#result upon a successful ajax request.

I ran a test, and the var vid populates correctly.

Here's the simple PHP file I'm trying to call with the ajax :

<?php
$requ;

if (isset($_POST['id'])) {
   $requ = 'Worked';
} else {
   $requ = "didn't work";
}


echo $requ;
?>

I thought perhaps the problem was the id wasn't being passed properly so I altered the PHP script to give me any valid output regardless of whether the $_POST was set or not.

I won't post the HTML as I'm just trying to dump this all into a div while I test it. When I run the script I get the 'Request Failed' error message with a message of "error".

Here is the other jquery & PHP I have also tried, using the .post instead of the .ajax :

function tester() {
$("select#type").attr('disabled', 'disabled');
$("select#cat").change(function(){

            $("select#type").html("<option>wait...</option>");

            var vid = $("select#cat option:selected").attr('value');


            $.post("show_type.php", {id:vid}, function(data){
                $("#result").empty().append(data);
            }, "json");
      });
}

And the PHP to accompany this particular jquery:

$requ = $_POST['id'];

$ret = 'You selected: ' . $requ;

echo json_encode($ret);

Again, it all failed. I also tried the above code without using the json encoding/parameters. All I want to do is a simple (so I would think) cascading select dropboxes. The second box to be dependent of the first boxes selection. I'm beginning to think that this all just may not be worth it and just sticking strictly to PHP with links to resubmit the page with a GET and populate a new section or div with the results of the first click. Any help or suggestions you might have would be greatly appreciated, I've spent 2 solid days trying to figure this all out. Thanks in advance

Answer 1

Alright, I got it fixed. Thanks to Mian_Khurram_ljaz for making me take a different look at the hierarchical structure of the file. I was assuming that since the js was calling the php file, by placing the php file in the same folder as the js, I could call the php by using the url: show_type.php but that was actually wrong. The structure is considered from the actual page invoking the js and php, and therefore the url should have been js/show_type.php since I had the show_type.php file in my js folder.

It's always the little mistakes that take you days to figure. For those in the future looking to find decent code for cascading select drop boxes, here is my functioning and fully expanded code (which also includes a tri-level cascade) jQuery:

function project() {
$("select#model2").attr('disabled', 'disabled');
$("select#brand2").attr('disabled', 'disabled');
$("select#project").change(function(){
   $("select#model2").attr('disabled', 'disabled'); // if changed after last element has been selected, will reset last boxes choice to default
   $("select#model2").html('<option selected="selected">Choose...</option>'); 
   $("select#brand2").html("<option>Please wait...</option>");
   var pid = $("select#project option:selected").attr('value');

   $.post("handler/project.php", {id:pid}, function(data){
       $("select#brand2").removeAttr("disabled");
       $("select#brand2").html(data);
   });
});
$("select#brand2").change(function(){
   $("select#model2").html("<option>Please wait...</option>");
   var bid = $("select#brand2 option:selected").attr('value');
   var pid = $("select#project option:selected").attr('value');

   $.post("handler/projBrand.php", {proj: pid, bran: bid}, function(data){
       $("select#model2").removeAttr("disabled");
       $("select#model2").html(data);
   });
  });
}

Just call the function in the $(document).ready of your js.

Notice the comment, having this 'redundant' call to disable and force the last box to select the default is just in case the user makes a selection in all 3 boxes but goes back to the first box and changes the selection.

Here is the php handler file:

<?php
include_once('../includes/file.inc');


$request = $opt -> getModelvBrand();

echo $request;
?>

The other handler file for the jQuery is nearly exactly the same, only invoking a different method in the class file.

And lastly, the HTML:

<form action="" method="post">
       <select id="project">
          <option value="0">Choose...</option>
          <?php echo $opt -> getProject();?> //populates first box on page load
       </select>
       <select id="brand2">
          <option value="0">Choose...</option>
       </select>
       <select id="model2">
          <option value="0">Choose...</option>
       </select>
       <br /><br />
       <input class="like-button" type="submit" title="Submit" value="" />
</form>

Thanks again Mian for making me take a different look at my file(s).

Hope this code helps someone else in the near future.