Question

I have a jQuery dialog that needs to be opened and populated with data from a database. The dialog has in it drop downs that when in a “new” mode (not editing for re-saving) cascade.

How can I load the dialog with the values from the database, while at the same time causing the cascading to happen.

I have tied using the onfocus event of the dialog when the dialog is in “edit” mode, but the focus hit every time an element gets focus. Didn’t work without being sneaky with the editing mode.

I have tried opening the dialog and using jQuery to set the dropdown, which works, but then the cascading does work.

For the cascading I am using .change on the the different dropdowns.

Not sure if the code is going to help, but will post some to itterate the jQuery functionality I am using.

The question is: How do I open a dialog, load dropdowns with information from the server and have the .change functionality work?

$('#collectDD').change(function(){
      // first change the item drop down list
      var collection = $('#collectDD').val();

      data = "coll=" + collection + "&action=getItems&func=";
      $('#addCollection').text(collection);

      $.ajax({
            url: "getItemList.php",
            type: "GET",
            cache: false,
            data: data,
            success: function (html) {
               $('#itemDD').empty();
               $("#itemDD").html(html);              
               // now update the function collection dropdown
               data = "coll=" + collection + "&action=getFunction";

            }
        });

Collection DD HTML

 <select id="collectDD" name="collectionDD">
      <option>Select Collection</option>
      <option>Option1</option>
    </select>

Answer 1

This doesn’t exactly match up with your tag names, and I made a little change to the data string, but I think it’s in line with what you’re looking for

<div id="dialogbox">
    <select id="s1"></select>
    <select id="s2"></select>
    <select id="s3"></select>
</div>

<script type="text/javascript">
  $(document).ready( function() {
    $( "#dialogbox" ).dialog({
        open: function(event, ui) {
            var s1 = $("#s1").empty();
            var s2 = $("#s2").empty(); 
            var s3 = $("#s3").empty();

            s1[0].enabled = false;
            s2[0].enabled = false;
            s3[0].enabled = false;

            //load first dropdown from the database
            var data = "coll=dropdown1&val=&action=getItems&func=";
            $.ajax({
                url: "getItemList.php",
                type: "GET",
                cache: false,
                data: data,
                success: function (html) {
                    s1.html(html);
                    s1[0].enabled = true;
                }
            });

            //load the second DD when the first changes
            s1.change( function() {
                s2[0].enabled = false; //disable until after ajax load
                s3[0].enabled = false;

                data = "coll=dropdown2&val=" + s1.text() + "&action=getItems&func=";
                $.ajax({
                    url: "getItemList.php",
                    type: "GET",
                    cache: false,
                    data: data,
                    success: function (html) {
                        s2.empty().html(html);
                        s2[0].enabled = true;
                    }
                });
            });

            s2.change( function() {
                if (s2[0].enabled) { //test for enabled to prevent some unnessecary loads
                    s3[0].enabled = false;

                    data = "coll=dropdown3&val=" + s2.text() + "&action=getItems&func=";
                    $.ajax({
                        url: "getItemList.php",
                        type: "GET",
                        cache: false,
                        data: data,
                        success: function (html) {
                            s3.empty().html(html);
                            s3[0].enabled = true;
                        }
                    });
                }
            });
        }
    });
  });
</script>

UPDATE

Here is an example with change functions in their own functions

<div id="dialogbox">
    <select id="s1"></select>
    <select id="s2"></select>
    <select id="s3"></select>
</div>

<script type="text/javascript">
    var s1, s2, s3, data;

    $(document).ready( function() {
        s1 = $("#s1").empty();
        s2 = $("#s2").empty(); 
        s3 = $("#s3").empty();

        $( "#dialogbox" ).dialog({
            open: function(event, ui) {
                s1[0].enabled = false;
                s2[0].enabled = false;
                s3[0].enabled = false;

                //load first dropdown from the database
                data = "coll=dropdown1&val=&action=getItems&func=";
                $.ajax({
                    url: "getItemList.php",
                    type: "GET",
                    cache: false,
                    data: data,
                    success: function (html) {
                        s1.html(html);
                        s1[0].enabled = true;
                    }
                });

                //load the second DD when the first changes
                s1.change( changeDD1 );

                //load the third DD when the second changes
                s2.change( changeDD2 );
            }
        });
    });

    function changeDD1() {
        s2[0].enabled = false; //disable until after ajax load
        s3[0].enabled = false;

        data = "coll=dropdown2&val=" + s1.text() + "&action=getItems&func=";
        $.ajax({
            url: "getItemList.php",
            type: "GET",
            cache: false,
            data: data,
            success: function (html) {
                s2.empty().html(html);
                s2[0].enabled = true;
            }
        });
    }

    function changeDD2() {
        if (s2[0].enabled) { //test for enabled to prevent some unnessecary loads
            s3[0].enabled = false;

            data = "coll=dropdown3&val=" + s2.text() + "&action=getItems&func=";
            $.ajax({
                url: "getItemList.php",
                type: "GET",
                cache: false,
                data: data,
                success: function (html) {
                    s3.empty().html(html);
                    s3[0].enabled = true;
                }
            });
        }
    }
</script>