asked on

preset select values in cascading dropdown

Working with some cascading selects which are json populated. I need set the select value with a previous selection which has been saved in a mysql table.

I have found that I can load the select if I pause the page with a alert().

----------------------------------------------------
form1.finish.value="<?php echo $row_Quote['Hdw_finish']; ?>"; // load the finish select

if ("<?php echo $row_Quote['Hdw_finish']; ?>" != "Select Hardware Finish") { // trigger finish change
$("#finish").trigger("change");
}

alert("pause1");

form1.Pull_type.value="<?php echo $row_Quote['Pull_type']; ?>"; // load Pull_type
if ((form1.Pull_type.value != "Select Pull Type")&&(form1.Pull_type.value != "")) { // trigger Pull_type change
$("#Pull_type").trigger("change");
}

alert(pause2);

form1.handle.value="<?php echo $row_Quote['Pull_name']; ?>"; // load selected handle

---------------------------------------------

This does set the selects correctly, but without the alerts() it doesn't. There has to be a right way to do this and this isn't it.

Chris Stanyon

You're only showing us part of your code, and as it stands it doesn't really make a lot of sense. You've shown us the PHP code, which get's parsed at the server, so by the time the JS runs, that's already been dealt with. It would make more sense to show us the generated HTML.

Also, we have no way of knowing how your variables are being set.

As you're using jQuery, and I'm guessing this is run on page load, you will need to make sure you're wrapping all of this in a document ready block:

<script>
$(document).ready(function() {
   ...
});
</script>

Open in new window

Without that, your code is likely to run before all the elements are available to your script. I think if you need more help, you're probably going to need to show us some context for your code.

jws2bay

ASKER

Hi Chris,

Attached is my test file. You can run the file with this URL https://www.eshowerdoor.com/test2.php?H=WMH&Q=14521

The "populate_cascade function()" is where I am having problems. I think the problem is caused by the ajax fetch results not being settled. I found that putting an alert() after the ajax triggers will let the selects to populate and allow me to preset the selection. In the test2.php file the alerts() are commented out. If you activate the alerts you will see that the selects get populated correctly. Putting in $(document).ready(function(){ }); doesn't solve the problem, or I'm not applying them correctly.

------------------------------------
function populate_cascade() {

      form1.finish.value="<?php echo $row_Quote['Hdw_finish']; ?>"; // load the finish select

      if ("<?php echo $row_Quote['Hdw_finish']; ?>" != "Select Hardware Finish") { // trigger finish change to fire ajax
            $("#finish").trigger("change");
//      alert("pause after 1st trigger");
      }

      $(document).ready(function(){
            form1.Pull_type.value="<?php echo $row_Quote['Pull_type']; ?>"; // load Pull_type
            if ((form1.Pull_type.value != "Select Pull Type")&&(form1.Pull_type.value != "")) { // trigger Pull_type change to fire ajax
              $("#Pull_type").trigger("change");
//      alert("pause after 2nd trigger");
            }
      });

      $(document).ready(function(){
            form1.handle.value="<?php echo $row_Quote['Pull_name']; ?>"; // load selected handle
      });


      $(document).ready(function(){
//alert("<?php echo $row_Quote['Hinge_name']; ?>");
            form1.WMhinge.value="<?php echo $row_Quote['Hinge_name']; ?>";               // load selected hinge
      });
}
----------------------------------------------------

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jws2bay

ASKER

Great answer. I moved my commands in under the ($.ajax().done() ). That along with some .trigger(change) has the page initializing and recalling quotes correctly. Thanks for the help.

Chris Stanyon

No worries - async coding across client/server boundaries can get quite tricky if you don't plan it correctly - quite a few gotchas to be aware of :)