I want to populate a dropdown (AJAX) when I click on the dropdown.
I have a dropdown categories and a button Add categories
When I open the page the first time, I can see my categories inside the dropdown.
If I want to include another categories, I click on Add categories and I insert my new categories.
After, if I click on the dropdown, I must see my new categories.
How to do that ?
I don't know exactly how to create that.
Thank you
my_ajax_file.php
$Qcheck = $OSCOM_Db->prepare('select categories_id as id,
categories_name as name
from :table_categories');
$Qcheck->execute();
$list = $Qcheck->rowCount();
if ($list > 0) {
$array = [];
while ($value = $Qcheck->fetch() ) {
$array[] = $value;
}
# JSON-encode the response
$json_response = json_encode($array); //Return the JSON Array
# Return the response
echo $json_response;
HTML code
<script type="text/javascript">
function Mycategory_id() {
$("#myAjax").on('click', function(){
$.ajax({
url: 'http://www.my_ajax_file.php',
dataType: 'json',
success: function(data){
//data returned from php
}
});
});
}
</script>
<select name="category_id" id="Mycategory_id" class="form-control">
<option value="0" selected="selected">Haut</option>
<option value="23">Panneaux Signalétique</option>
<option value="20">Signalétique Camping</option>
<option value="22"> Barrières</option>
<option value="21"> Entrée</option>
</select>
<input type="hidden" name="current_category_id" value="0" /></div>
You need to update the select element with new options.
<script type="text/javascript">
function Mycategory_id() {
$("#myAjax").on('click', function(){
$.ajax({
url: 'http://www.my_ajax_file.php',
dataType: 'json',
success: function(data){
//data returned from php
var options_html = '';
for(index in data){
var category_id = data[index]['categories_id'];
var category_name = data[index]['categories_name'];
options_html += '<option value="'+category_id+'">' + category_name + '</option>';
}
$('#category_id').html(options_html);
}
});
)};
</script>
To make rendering easy, you can use mustache.js
Related
I am trying to display a dropdown list based on JSON response object, How I can set it for the following code?
in html
<select class="form-control" name="productCategories[]" id="productCategories<?php echo $x; ?>" onchange="getProductData(<?php echo $x; ?>)" >
</select>
in javascript
$.ajax({
url: 'php_action/fetchDropdownProductData.php',
type: 'post',
data: {brandId : brandId},
dataType: 'json',
success:function(response) {
var html = '<option value="">Select Sub Category</option>';
html += response;
$("#productCategories"+row).html(html);
} // /success
});
Log response looks like
[{“categories_id”:“1”,“categories_name”:“Monitor”},{“categories_id”:“3”,“categories_name”:“Scanner”}]
Your json is an array of category object, you have to loop through your json to create the list of options element, your success function should look like this:
success: function (response) {
var html = '<option value="">Select Sub Category</option>';
response.forEach(category => {
html += "<option value='" + category.categories_id + "'>"+ category.categories_name +"</option>"
$("#productCategories"+row).html(html);
})
}
I'm trying to re-use the same code on several web pages to tidy up the code, especially when the same AJAX response in used once/few times on the page.
The response is a list of <option> to be placed into <select>.
On a NEW ENTRY to database page load, I want the <select> to be filled with correct <options>.
On an UPDATE to database page load, I want the <select> to be initially filled with selected <option selected>, but when .change is triggered, the cascading <select> must update accordingly.
Everything worked as expected, until I've decided to reuse the same code (response from Ajax) instead of having separate php syntax inside each <select>.
Now, when the page is loading the <select> values in all div's gets overwritten by the value from the last one.
Any Idea on how to accomplish this?
here is my code so far:
webpage.php
<div class="form-group">
<div class="col-xs-2"><input type="hidden" class="deptList_value" value="<?php echo $row['fDeptFK'];?>">
<select class="form-control deptList" name="deptFK" onchange="getId(this.value);" required>
</select>
</div>
<div class="col-xs-2"><input type="" class="areaList_value" value="<?php echo $row['PK'].'-'.$row['fDeptFK'].'-'.$row['fAreaFK'];?>">
<select class="form-control areaList" name="areaFK" required>
</select>
</div>
</div>
jquery:
$(document).ready(function(){
$(".deptList_value").each(function() {
var deptPK = $(this).val();
//alert(deptPK);
$.ajax({
url:"../GetData_DropDown/getdataDeptQA.php",
method:"POST",
data:{DeptNo:deptPK},
dataType:"text",
success:function(data)
{
$('.deptList').html(data);
}
});
});
$(".areaList_value").each(function() {
var arr = $(this).val().split('-');
var idPK = arr[0];
var deptPK = arr[1];
var areaPK =arr[2];
$.ajax({
url:"../GetData_DropDown/getdataAreaQA.php",
method:"POST",
data:{AreaNo:areaPK,DeptNo:deptPK},
dataType:"text",
success:function(data)
{
$('.areaList').html(data);
}
});
});
$('.deptList').change(function(){
var deptPK = $(this).val();
$.ajax({
url:"../GetData_DropDown/getdataAreaQA.php",
method:"POST",
data:{DeptNo:deptPK},
dataType:"text",
success:function(data)
{
$('.areaList').html(data);
}
});
});
getdataAreaQA.php
$output = '<option value=""></option>';
foreach($conn->query("EXEC [qa].[getQA_area_list] ".$_POST["DeptNo"]) as $rowA) {
if ($rowA['PK']==$_POST['AreaNo']) {
$output .= '<option value="'.$rowA['PK'].'" data-AP24FKvalue="'.$rowA['AP24FK'].'" selected>'.$rowA['Name'].'</option>';
} else {
$output .= '<option value="'.$rowA['PK'].'" data-AP24FKvalue="'.$rowA['AP24FK'].'">'.$rowA['Name'].'</option>';
}
}
echo $output;
EDIT
Not tested but this should work on a page with single row from database. The issue is with paginated pages with multiple rows on one page.
I propose you simplify a little bit more, and use specialized unique id in combination with your class handlers.
Lets first start by adjusting rows output from your loop:
<?php
$idx = 0;
/* your foreach/for/while loop */ {
$idx++;// just ensuring a unique value to utilize
?>
<div class="form-group">
<div class="col-xs-2">
<select id="dept_<?php echo $idx;?>"
data-dept="<?php echo $row['fDeptFK'];?>"
data-idx="<?php echo $idx;?>"
class="form-control deptList" name="deptFK" required>
</select>
</div>
<div class="col-xs-2">
<select id="area_<?php echo $idx;?>"
data-dept="<?php echo $row['fDeptFK'];?>"
data-area="<?php echo $row['fAreaFK'];?>"
data-idx="<?php echo $idx;?>"
class="form-control areaList" name="areaFK" required>
</select>
</div>
</div>
<?php }?>
No need for hidden inputs. The data-vars will contain all that you need. Note that each id should be unique per row output.
Now some slight adjustments to the jquery:
$(document).ready(function(){
$(".deptList").each(function() {
var idx = $(this).data('idx');// the unique row id
var dept = $(this).data('dept');
$.ajax({
url:"../GetData_DropDown/getdataDeptQA.php",
method:"POST",
data:{DeptNo: dept},
dataType:"html",
success:function(data)
{
$("#dept_"+idx).html(data);// targets unique id
}
});
});
$(".areaList").each(function() {
var idx = $(this).data('idx');
var dept = $(this).data('dept');
var area = $(this).data('area');
$.ajax({
url:"../GetData_DropDown/getdataAreaQA.php",
method:"POST",
data:{AreaNo: area, DeptNo: dept},
dataType:"html",
success:function(data)
{
$("#area_"+idx).html(data);
}
});
});
$('.deptList').change(function(){
var idx = $(this).data('idx');
var dept = $(this).val();// using .val not .data
$.ajax({
url:"../GetData_DropDown/getdataAreaQA.php",
method:"POST",
data:{DeptNo: dept},
dataType:"html",
success:function(data)
{
$("#area_"+idx).html(data);// targets area select
// you may want to update the area selects data too:
$("#area_"+idx).data('dept', dept);
}
});
});
});
By targeting using the row idx value, you can ensure which sub select options will be changed out. All the data-vars contain values for what you need to initially populate the select options.
Important Note
As we discovered through comments... if you try to use capitals in a data-varNAME, it will result in undefined when accessing it with the .data() jquery method. So instead, make sure the naming of the data-varname has no caps and it will be ok.
I have this dependent dropdown function where I have a dropdown and another one depending on it,
here is the HTML
<select class="form-control" name = "PROV_ID" id = "PROV_ID">
<option></option>
<?php foreach ($content2 as $cs) {?>
<option value="<?php echo $cs->PROV_ID; ?>"><?php echo $cs->PROVINCE; ?></option>
<?php } ?>
</select>
<select class="form-control" name = 'CT_ID' id = 'CT_ID'>
<option value=""></option>
</select>
and here is the javascript
jQuery(document).ready(function(){
$("#PROV_ID").change(function() {
var PROVID = {"PROVID" : $('#PROV_ID').val()};
console.log(PROVID);
$.ajax({
type: "POST",
data: PROVID,
url: "<?php base_url(); ?>Employees/dependent_dropdown/",
success: function(data){
var select = $('#CT_ID');
select.html('');
$.each(data, function(i, option){
select.append("<option value='"+option.CT_ID+"'>"+option.CITY+"</option>");
});
}
});
});
});
now I want to have one like this, but I wanted to have selected values for the first two dropdowns before the dependent one shows the values.
e.g.
first dropdown -->select a value
second dropdown -->selects a value
dependent dropdown --> gives values according to first and second dropdown.
example: select * from thistable where column1 = 'firstdropdownvalue' and column2 = 'seconddropdownvalue'
then the dropdown values would be the result.
jQuery(document).ready(function(){
$("#CT_ID").change(function() {
var PROVID_two = {"PROVID" : $('#PROV_ID').val(), "CT_ID" : $('#CT_ID').val()};
console.log(PROVID);
$.ajax({
type: "POST",
data: PROVID_two,
url: "<?php base_url(); ?>Employees/dependent_dropdown2/",
success: function(data){
var select = $('#PROVID_two');
select.html('');
$.each(data, function(i, option){
select.append("<option value='"+option.CT_IDnew+"'>"+option.CITYnew+"</option>");
});
}
});
});
});
You can try like this. Pass two selected values. Hope you understood
I have this dependent dropdown working initially, but after the second selection the values of the first selection do not go away. Instead, the new values are just mixed with the previous values. I'm not familiar with jQuery but I need to finish this one as soon as possible.
first dropdown
<select class="form-control" name = "PROV_ID" id = "PROV_ID">
<option></option>
<?php foreach ($content as $cs) {?>
<option value="<?php echo $cs->PROV_ID; ?>"><?php echo $cs->PROVINCE; ?></option>
<?php } ?>
</select>
second dropdown
<select name = 'CT_ID' id = 'CT_ID'>
<option value="">-- Select Type --</option>
</select>
jquery
<script>
jQuery(document).ready(function(){
$("#PROV_ID").change(function() {
var PROVID = {"PROVID" : $('#PROV_ID').val()};
console.log(PROVID);
$.ajax({
type: "POST",
data: PROVID,
url: "<?php base_url(); ?>Employees/dependent_dropdown",
success: function(data){
$.each(data, function(i, data){
$('#CT_ID').append("<option value='"+data.CT_ID+"'>"+data.CITY+"</option>");
});
}
});
});
});
</script>
I want to refresh the value of the second dropdown whenever I select a new option on the first dropdown.
Clear the existing options before appending:
success: function(data){
var select = $('#CT_ID');
select.empty();
$.each(data, function(i, option){
select.append("<option value='"+option.CT_ID+"'>"+option.CITY+"</option>");
});
}
This is because you are using append to add HTML to the select element. I would suggest using jQuery's html to set the HTML of the select (which will clear any existing option elements). The added benefit here is that you are only doing one DOM manipulation, as opposed to one per option.
success: function(data){
var $select = $('#CT_ID'),
html = '';
$.each(data, function(i, option) {
html += "<option value='"+option.CT_ID+"'>"+option.CITY+"</option>";
});
$select.html(html);
}
I want to make step input with select option, in this case, i make 3 step, when select first option then will show next option 2, then option 3. i am using ajax and i set $config['csrf_protection'] = TRUE; in Codeigniter config file. In first select option (#kategori) is work and show next value in second select option, but in step 3 select option (#sub1 or secon function of javascript) n't work. thank before.
This is my view:
<?php echo form_open_multipart('',array('class'=>'form-horizontal'));?>
<?php echo form_label('Kategori','id_kategori',array('class'=>'col-sm-2 control-label'));?>
<select id="kategori" name="id_kategori">
<option value=""></option>
<?php
foreach($kategori as $kategori_umum)
{
echo '<option value='.$kategori_umum->id.'>'.$kategori_umum->nama_kategori.'</option>';
}
?>
</select>
<select id="sub1" name="id_kategori_sub1"> //step 2
<option value=""></option>
</select>
<select id="sub2" name="id_kategori_sub2"> //step 3
<option value=""></option>
</select>
Ajax :
<script type="text/javascript">
$('#kategori').change(function(){
var kategori_id = $('#kategori').val();
//alert(state_id);
if (kategori_id != ""){
var post_url = "<?php echo base_url();?>masuk/produk/get_sub1";
$.ajax({
type: "POST",
url: post_url,
data: {'<?php echo $this->security->get_csrf_token_name(); ?>':'<?php echo $this->security->get_csrf_hash(); ?>','kategori_id':kategori_id},
dataType: 'json',
success: function(kategori_sub1, dataType) //calling the response json array 'kategori_sub1'
{
$('#sub1').empty();
$('#sub1').show();
$.each(kategori_sub1,function(id,sub1)
{
var opt = $('<option />'); // creating a new select option for each group
opt.val(id);
opt.text(sub1);
$('#sub1').append(opt);
$('#sub2').hide();
});
},
error:function(xhr)
{
alert("Terjadi Kesalahan");
}
}); //end AJAX
} else {
$('#sub1').empty();
$('#sub2').empty();
}});
$('#sub1').mouseout(function(){
var sub1_id = $('#sub1').val();
if (sub1_id != ""){
var post_url = "<?php echo base_url();?>masuk/produk/get_sub2";
$.ajax({
type: "POST",
url: post_url,
data: {'<?php echo $this->security->get_csrf_token_name(); ?>':'<?php echo $this->security->get_csrf_hash(); ?>','sub1_id':sub1_id},
dataType: 'json',
success: function(kategori_sub2, dataType)
{
$('#sub2').empty();
$('#sub2').show();
$.each(kategori_sub2,function(id,sub2)
{
var opt = $('<option />');
opt.val(id);
opt.text(sub2);
$('#sub2').append(opt);
});
},
error:function(xhr)
{
alert("Kesalahan");
}
}); //end AJAX
}});</script>
I suspect your problem is using wrong event mouseout.
You should be using change the same way the first one that works does.
Beyond that more information is needed about the actual requests by inspecting in browser dev tools