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>