0

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>
2
Contributors
3
Replies
31
Views
2 Years
Discussion Span
Last Post by rpv_sen
0

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.

0

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 } ?>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.