Hi

I collected the code from internet. i am trying to use dependent dropdown in the popup screen. i can able to display first dropdown in a popup but i am unable to display the second dropdown. can any please help me to fix that issue.

test.php

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript"></script>
<?php 
include('conn.php'); 
$sid = $_GET['sid'];
?>
<script type="text/javascript">
        $(function () { 
            var new_dialog = function (type, row) {
                var dlg = $("#dialog-form").clone();
                var fname = dlg.find(("#first-name")),
            lname = dlg.find(("#last-name")),
            email = dlg.find(("#email")),
            password = dlg.find(("#password"));
                type = type || 'Create';
                var config = {
                    autoOpen: true,
                    height: 300,
                    width: 350,
                    modal: true,
                    buttons: {
                        "Create an account": save_data,
                        "Cancel": function () {
                            dlg.dialog("close");
                        }
                    },
                    close: function () {
                        dlg.remove();
                    }
                };
                if (type === 'Edit') {
                    config.title = "Edit User";
                    get_data();
                    delete (config.buttons['Create an account']);
                    config.buttons['Edit account'] = function () {
                        row.remove();
                        save_data(); 
                    }; 
                }
                dlg.dialog(config); 
                function get_data() {
                    var _email = $(row.children().get(1)).text(),
                _password = $(row.children().get(2)).text();
                    email.val(_email);
                    password.val(_password); 
                } 
                function save_data() {
                    $("#users tbody").append("<tr>" + "<td>" + (fname.find("option:selected").text() + ' ').concat(lname.find("option:selected").text()) + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() +"</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
                    dlg.dialog("close");
                }
            }; 
            $(document).on('click', 'span.delete', function () {
                $(this).closest('tr').find('td').fadeOut(1000, 
        function () {
            // alert($(this).text());
            $(this).parents('tr:first').remove();
        }); 
                return false;
            });
            $(document).on('click', 'td a.edit', function () {
                new_dialog('Edit', $(this).parents('tr'));
                return false;
            }); 
            $("#create-user").button().click(new_dialog); 
        });

        $(document).ready(function()
        {
            $(".country").change(function()
            {
            var id=$(this).val();
            var dataString = 'id='+ id;

            $.ajax
            ({
            type: "POST",
            url: "ajax_city.php",
            data: dataString,
            cache: false,
            success: function(html)
            {
            $(".city").html(html);
            } 
            });

            });
        });
    </script>
    <style type="text/css">
    body {
    font-size: 62.5%;
}
label, input {
    display: block;
}
input.text {
    margin-bottom: 12px;
    width: 95%;
    padding: .4em;
}
fieldset {
    padding: 0;
    border: 0;
    margin-top: 25px;
}
h1 {
    font-size: 1.2em;
    margin: .6em 0;
}
div#users-contain {
    width: 350px;
    margin: 20px 0;
}
div#users-contain table {
    margin: 1em 0;
    border-collapse: collapse;
    width: 100%;
}
div#users-contain table td, div#users-contain table th {
    border: 1px solid #eee;
    padding: .6em 10px;
    text-align: left;
}
.ui-dialog .ui-state-error {
    padding: .3em;
}
.validateTips {
    border: 1px solid transparent;
    padding: 0.3em;
}
#dialog-form {
    display: none;
}
 </style>
 <script type="text/javascript">

</script>
<script>
$("#first-name").change(function(){
    $('#last-name').find('option').remove().end(); //clear the city ddl
    var firstname = $(this).find("option:selected").text();
    alert(firstname);
    //do the ajax call
    $.ajax({
        url:'getCity.php',
        type:'GET',
        data:{city:firstname},
        dataType:'json',
        cache:false,
        success:function(data){

        data=JSON.parse(data); //no need if dataType is set to json
         var ddl = document.getElementById('last-name');                      

         for(var c=0;c<obj.length;c++)
              {              
               var option = document.createElement('option');
               option.value = obj[c];
               option.text  = obj[c];                           
               ddl.appendChild(option);
              }


    },
        error:function(jxhr){
        alert(jxhr.responseText);

    }
    }); 

});
</script>
 <body>   
    <div id="dialog-form" title="Create new user">
        <p class="validateTips">
            All form fields are required.</p>       
            <form>
        <fieldset>
            <label for="first_name">
                First Name</label>
            <select id="first-name" name="country" class="country">
                <option  selected="selected" value="">Select Ctype...</option><?php $query = "SELECT distinct SCYQ64CTYPE FROM $database.FQ64006"; $result = odbc_exec($connection,$query); while($row = odbc_fetch_array($result))    {   ?><option value="<?php echo trim($row['SCYQ64CTYPE']); ?>"><?php echo trim($row['SCYQ64CTYPE']); ?></option><?php } ?>
            </select>
            <label for="last_name">
                Last Name</label>

            <label for="email">
                Email</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
            <label for="password">
                Password</label>
            <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
        </fieldset>
        </form>
    </div>
    <div id="users-contain" class="ui-widget">
        <h1>
            Existing Users:</h1>
        <table id="users" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header ">
                    <th>Name </th>
                    <th>Email </th>
                    <th>Password</th>
                    <th> Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr> <td class="custom-name"> John Doe </td>
                    <td>john.doe@example.com</td>
                    <td>johndoe1 </td>
                    <td><a class="edit" href="">Edit</a> </td>
                    <td><span class="delete"><a href="">Delete</a></span>   </td>
                </tr>
            </tbody>
        </table>
    </div>
    <button id="create-user">
        Create new user</button>   
</body>

getCity.php

<?php
include('conn.php');

$country = $_GET['city'];

$query ="select * from $database.FQ64006 WHERE SCYQ64CTYPE='" . $country . "'";
$tresult = odbc_exec($connection,$tquery);
?>
    <select name="city" id="last-name" class="city">
    <option value="">Select State</option>
<?php
    while($trow=odbc_fetch_array($tresult)) {
?>
    <option value="<?php echo trim($trow["SCYQ64TYPE"]); ?>"><?php echo trim($trow["SCYQ64TYPE"]); ?></option>
<?php } ?>
</select>

Don't quite understand what you are trying to do, but from what I see, the code for country works as the code:

$(document).ready(function()
        {
            $(".country").change(function()
            {
            var id=$(this).val();
            var dataString = 'id='+ id;
            $.ajax
            ({
            type: "POST",
            url: "ajax_city.php",
            data: dataString,
            cache: false,
            success: function(html)
            {
            $(".city").html(html);
            } 
            });
            });
        });

when country is changed, the data sent to ajax_city.php and after processed, the return is handled by success: function(html) where the html returned is being used to $(".city").html(html);

The second part is not taking effect as from code:

$.ajax({
        url:'getCity.php',
        type:'GET',
        data:{city:firstname},
        dataType:'json',
        cache:false,
        success:function(data){
        data=JSON.parse(data); //no need if dataType is set to json
         var ddl = document.getElementById('last-name');                      
         for(var c=0;c<obj.length;c++)
              {              
               var option = document.createElement('option');
               option.value = obj[c];
               option.text  = obj[c];                           
               ddl.appendChild(option);
              }
    },
        error:function(jxhr){
        alert(jxhr.responseText);
    }
    }); 

First of all, as the commented, there is no need to call data=JSON.parse(data); as your datatype already set to json format. And the function which handle the success the the returned as 'data' and from your code for(var c=0;c<obj.length;c++), you try to process with obj which it don't having any values. Therefore, the looping will not doing anything as obj.length is 0.

Sorry for the late.lps

thanks

It will display only the first dropdown box. i am not getting the values in the second dropdown.

Update Code

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript"></script>
<?php 
include('conn.php'); 
$sid = $_GET['sid'];
?>
<script type="text/javascript">
        $(function () { 
            var new_dialog = function (type, row) {
                var dlg = $("#dialog-form").clone();
                var fname = dlg.find(("#first-name")),
            lname = dlg.find(("#last-name")),
            email = dlg.find(("#email")),
            password = dlg.find(("#password"));
                type = type || 'Create';
                var config = {
                    autoOpen: true,
                    height: 300,
                    width: 350,
                    modal: true,
                    buttons: {
                        "Create an account": save_data,
                        "Cancel": function () {
                            dlg.dialog("close");
                        }
                    },
                    close: function () {
                        dlg.remove();
                    }
                };
                if (type === 'Edit') {
                    config.title = "Edit User";
                    get_data();
                    delete (config.buttons['Create an account']);
                    config.buttons['Edit account'] = function () {
                        row.remove();
                        save_data(); 
                    }; 
                }
                dlg.dialog(config); 
                function get_data() {
                    var _email = $(row.children().get(1)).text(),
                _password = $(row.children().get(2)).text();
                    email.val(_email);
                    password.val(_password); 
                } 
                function save_data() {
                    $("#users tbody").append("<tr>" + "<td>" + (fname.find("option:selected").text() + ' ').concat(lname.find("option:selected").text()) + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() +"</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
                    dlg.dialog("close");
                }
            }; 
            $(document).on('click', 'span.delete', function () {
                $(this).closest('tr').find('td').fadeOut(1000, 
        function () {
            // alert($(this).text());
            $(this).parents('tr:first').remove();
        }); 
                return false;
            });
            $(document).on('click', 'td a.edit', function () {
                new_dialog('Edit', $(this).parents('tr'));
                return false;
            }); 
            $("#create-user").button().click(new_dialog); 
        });

        $(document).ready(function()
        {
        $(".country").change(function()
        {
        var id=$(this).val();
        var dataString = 'id='+ id;

        $.ajax
        ({
        type: "POST",
        url: "ajax_city.php",
        data: dataString,
        cache: false,
        success: function(html)
        {
        $(".city").html(html);
        } 
        });

        });

        });

    </script>
    <style type="text/css">
    body {
    font-size: 62.5%;
}
label, input {
    display: block;
}
input.text {
    margin-bottom: 12px;
    width: 95%;
    padding: .4em;
}
fieldset {
    padding: 0;
    border: 0;
    margin-top: 25px;
}
h1 {
    font-size: 1.2em;
    margin: .6em 0;
}
div#users-contain {
    width: 350px;
    margin: 20px 0;
}
div#users-contain table {
    margin: 1em 0;
    border-collapse: collapse;
    width: 100%;
}
div#users-contain table td, div#users-contain table th {
    border: 1px solid #eee;
    padding: .6em 10px;
    text-align: left;
}
.ui-dialog .ui-state-error {
    padding: .3em;
}
.validateTips {
    border: 1px solid transparent;
    padding: 0.3em;
}
#dialog-form {
    display: none;
}
 </style>


 <body>   
    <div id="dialog-form" title="Create new user">
        <p class="validateTips">
            All form fields are required.</p>       
            <form>
        <fieldset>
            <label for="first_name">
                Country Name</label>
            <select name="country" class="country">
                <option selected="selected">--Select Country--</option>
                <?php
                //include('conn.php');
                $query = "SELECT distinct SCYQ64CTYPE FROM $database.FQ64006"; 
                $result = odbc_exec($connection,$query); 
                while($row = odbc_fetch_array($result)) 
                {
                $id=trim($row['SCYQ64CTYPE']);
                $data=trim($row['SCYQ64CTYPE']);
                echo '<option value="'.$id.'">'.$data.'</option>';
                } ?>
            </select>
            <label for="last_name">
                City Name</label>
            <select name="city" class="city">
                <option selected="selected">--Select City--</option>
            </select>
            <label for="email">
                Email</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
            <label for="password">
                Password</label>
            <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
        </fieldset>
        </form>
    </div>
    <div id="users-contain" class="ui-widget">
        <h1>
            Existing Users:</h1>
        <table id="users" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header ">
                    <th>Name </th>
                    <th>Email </th>
                    <th>Password</th>
                    <th> Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr> <td class="custom-name"> John Doe </td>
                    <td>john.doe@example.com</td>
                    <td>johndoe1 </td>
                    <td><a class="edit" href="">Edit</a> </td>
                    <td><span class="delete"><a href="">Delete</a></span>   </td>
                </tr>
            </tbody>
        </table>
    </div>
    <button id="create-user">
        Create new user</button>   
</body>

ajax_city.php

<?php

    include('conn.php');

    echo $q=$_POST['id'];

    echo $tquery="select * from $database.FQ64006 WHERE SCYQ64CTYPE='$q'";
    $tresult = odbc_exec($connection,$tquery);

    if($q!=='')
        {
?>
    <?php while($trow=odbc_fetch_array($tresult)) { ?>
<option value="<?php echo trim($trow["SCYQ64TYPE"]); ?>"><?php echo trim($trow["SCYQ64TYPE"]); } ?><option>

<?php } ?>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.