I will try the cascading dependent select box and input in Codeigniter with Ajax. The first step works quite well. The Securities can be easily loaded, when selecting an Account. The problem starts with the second step. So, when I try after the Security-selection to set the appropriate changeable Inputs, the Security-select will getting blocked and then nothing works. Don't understand what the problem is.
Please help me, the nasty blockage to dissolve. Thanks.
Ajax:
$(document).ready(function(){
var _form = $("#trans_form").serializeArray();
$('#amount_section').hide();
$('#quantity_section').hide();
$('#accountDrop').on('change',function(){
$("#securityDrop > option").remove();
var accountID = $(this).val();
if(accountID == '#') {return false;}
$.ajax({
data: _form,
type: "POST",
url: global_base_url + "custody/get_securities_dropdown/" + accountID,
success: function(securities) {
$.each(securities,function(id,value) {
var opt = $('<option />');
opt.val(id);
opt.text(value);
$('#securityDrop').append(opt);
});
}
});
});
$('#securityDrop').on('change',function(){
$('#amount_section').hide();
$('#quantity_section').hide();
var securityID = $(this).val();
if(securityID == '#') {return false;}
$.ajax({
data: _form,
type: "POST",
url: global_base_url + "custody/get_security_unit_ajax/" + securityID,
success: function(securUnit) {
if (securUnit == "UNIT") {
$('#quantity_section').show(300);
};
else if (securUnit == "FAMT") {
$('#amount_section').show(300);
};
}
});
});
});
Controller:
public function get_securities_dropdown($account_id){
$securities = $this->custody_model->get_security_by_account($account_id);
header('Content-Type: application/x-json; charset=utf-8');
echo json_encode($securities);
}
public function get_security_unit_ajax($security_id){
$securUnit = $this->custody_model->get_security_unit($security_id);
header('Content-Type: application/x-json; charset=utf-8');
echo json_encode($securUnit);
}
Model:
public function get_accounts_dropdown(){
$accounts = $this->db->select("ID as id, Account_Desc as descr")
->order_by("descr", "ASC")
->get($this->table2)->result();
$accounts_arr;
$accounts_arr['#'] = '-- Please select Account --';
foreach ($accounts as $account) {
$accounts_arr[$account->id] = $account->descr;
}
return $accounts_arr;
}
public function get_security_by_account($account_id){
if(!is_null($account_id)){
$securities = $this->db->where("a.ID_Account", $account_id)
->select("b.ID as id, b.Security_Desc as descr")
->join($this->table5 . " as b", "b.ID = a.ID_Security")
->order_by("descr", "ASC")
->get($this->table6 . " as a");
if($securities->num_rows() > 0){
$securities_arr;
foreach ($securities->result() as $security) {
$securities_arr[$security->id] = $security->descr;
}
return $securities_arr;
}
}
return;
}
View:
<?php echo form_open_multipart(site_url("custody/add_transaction_pro"), array("id" => "trans_form")) ?>
<div>
<label for="accountDrop">Account</label>
<div>
<?php echo form_dropdown('accountDrop', $account_arr, '#', 'id="accountDrop"'); ?>
</div>
</div>
<div id="security_section">
<label for="security_select">Security</label>
<div>
<select name="securityDrop" class="required" id="securityDrop">
<option value="#">-- Please select Security --</option>
</select>
</div>
</div>
<div id="quantity_section">
<label for="quantity">Quantity</label>
<div id="quantityInput">
<input type="text" id="quantity" name="quantity">
</div>
</div>
<div id="amount_section">
<label for="settl_amount">Amount</label>
<div id="amountInput">
<input type="text" id="settl_amount" name="settl_amount">
</div>
</div>
I have solved it. The error was quite simple, the unnecessary semicolons in the ajax part. The syntax is if() { } else if{ }
Related
Here I have Two independent dropdowns : "Sub company " and " Role" and there is a third dropdown which depends on these two dropdowns. basically what I want to implement is if the chosen "Role" is NOT 'manager' and 'admin', then displays third dropdown "manager", which its options depends on sub company .
Right now I am able to get all the managers depends on sub company , what I need to do is to make a condition to only show managers list when role !== 'manager' && role !== 'admin'.
Here is the view.php
<div class="form-group col-md-4">
<label for="pwd">Sub Company Name</label>
<div class="alert-danger"><?php echo form_error('Subcom'); ?></div>
<select class="form-control" id="Subcom" name="Subcom" >
<option value="">Select Sub Company</option>
<?php
foreach($company_name as $row )
{
echo '<option value="'.$row->company_name.'" '.set_select('Subcom', $row->company_name).'>'.$row->company_name.'</option>';
}
?>
</select>
</div>
<div class="form-group col-md-4">
<label for="pwd">Role</label>
<div class="alert-danger"> <?php echo form_error('role'); ?></div>
<select class="form-control" id="role" name="role" placeholder="Select Role">
<option value="">Select Role</option></div>
<?php
foreach($role_name as $row )
{
echo '<option value="'.$row->id.'" '.set_select('role', $row->role_name).'>'.$row->role_name.'</option>';
}
?>
</select>
</div>
<div class="form-group col-md-4" >
<label for="pwd">Manager</label>
<div class="alert-danger"> <?php echo form_error('manager'); ?></div>
<select class="form-control" id="manager" name="manager" placeholder="Select Manager" style="display:none" disabled>
<option value="">Select Manager</option>
</select>
</div>
And here is the script
<script type="text/javascript">
$(document).ready(function(){
$(' #Subcom, #role').on('change' , function() {
var company_name = $('#Subcom').val();
var role = $('#role').val();
if( company_name!==''&& role !== '' && role !=='manager' && role !==
'admin')
{
//alert('ok');
$('#manager').prop('disabled', false);
$.ajax({
url:"<?php echo base_url()?>getManager",
type: "POST",
data: { 'company_name' : company_name},
dataType:'json',
success: function(data){
console.log(data);
false;
$('#manager').html(data.manager);
$('#manager').show();
},
error: function(event){
console.log(event);
alert('Error occur...');
}
});
}else {
//alert('sgsg');
$('#manager').prop('disabled', true);
$('#manager').hide();
}
});
});
</script>
Here is the controller
public function getManager()
{
//echo json_encode ($_REQUEST); die;
//print_r($_REQUEST);
//die;
$company_name = $this->input->post('company_name');
$getallmanager = $this->project_model->get_manager_query($company_name);
$getallstaff = $this->project_model->get_all_staff($company_name);
$all_the_mangers = '';
$all_the_staffs = '';
if(count($getallmanager)>0)
{
foreach ($getallmanager as $manager){
//if(role!=='manager')
$all_the_mangers .='<option value="' .$manager->first_name.'">'.$manager->first_name.'</option>';
}
}
if(count($getallstaff)>0)
{
foreach ($getallstaff as $staff){
$all_the_staffs .='<option value="' .$staff->first_name.'">'.$staff->first_name.'</option>';
}
}
$result = array('manager'=>$all_the_mangers,'staffs'=>$all_the_staffs);
echo json_encode($result);die;
}
}
And here is the Model:
public function get_manager_query($company_name)
{
$query = $this->db->get_where('user_login', array('company_name' => $company_name,'role'=>'manager'));
return $query->result();
}
public function get_all_staff($company_name)
{
$query = $this->db->get_where('user_login', array('company_name' => $company_name,'role !='=>'manager'));
return $query->result();
}
it is simply pass a var to show or hide.
in your controller file pass data['role_admin'] = 1;
in your view file
if($role_admin==1){
// show your Manager code
}
Add style="display:none" and disabled to manager select so it won't show up at load. Also selects don't need a value, if you want to set a specific option than you need to do it in the loops like this:
foreach($company_name as $row )
{
echo '<option value="'.$row->company_name.'" '.set_select('Subcom', $row->company_name).'>'.$row->company_name.'</option>';
}
Also it would be a good idea to move the form errors before the select and not wrap the options with it.
<script type="text/javascript">
$(document).ready(function(){
$('#Subcom,#role').on('change' , function() {
var company_name = $('#Subcom').val();
var role_name = $('#role').val();
if(company_name !== '' && role_name !== 'manager' && role_name !== 'admin')
{
$('#manager' ).prop('disabled', false);
$.ajax({
url:"<?php echo base_url()?>getManager",
type: "POST",
data: { 'company_name' : company_name},
dataType:'json',
success: function(data){
//alert('ok');
console.log(data);
$('#manager').html(data.manager);
$('#manager').show();
},
error: function(event){
console.log(event);
alert('Error occur...');
}
});
}
else
{
$('#manager').prop('disabled', true);
$('#manager').hide();
}
});
});
</script>
EDIT: for future reference here's the final code
https://jsfiddle.net/Lo50z6q8/
hello i want to display data of business2's data according to business1's dropdown list but on change() of business1 i got data in response but how to print it in second dropdown list using id. i didn't get response in success function. How to print options of dropdown list using Id.
I got response in mozila's firefox's console but i don't know how to return it in success and then how to print in second dropdown list.
<!-- ajax code starts here -->
<script>
$(document).on('change', 'select.Business1', function(){
var business1 = $('select.Business1 option:selected').val();
alert(business1);
var value = $(this).val();
$.ajax({
type:"POST",
data: { business1:business1 },
url: '<?php echo site_url('client_area/select_business_sub_cat'); ?>',
sucess : function (data){
alert(1);
var abc = $('#business2').html(data);
}
});
});
</script>
<!-- ajax code ends here -->
Model function
public function select_business_sub_cat()
{
$business1 = $this->input->post('business1');
$result_sub_cat1 = $this->db->query("select category.id,subcategory.* From category LEFT JOIN subcategory ON category.id = subcategory.category_id where category.id = '$business1'");
$row_cat1 = $result_sub_cat1->result();
$data = array(
'id' => $row_cat1['0']->id,
'name' => $row_cat1['0']->name
);
echo "<option value='" . $row_cat1['0']->id . "'>" . $row_cat1['0']->name . "</option>";
// return $this->output->set_output($data);
}
View --
<div class="form-group">
<label>Business 1</label>
<select name="txtBusiness1" id="" style="height: 30px;width: 100%;" class="Business1">
<option value=""> Select Business </option>
<?php
$result_cat1 = $this->db->query("select * from category");
$row_cat1 = $result_cat1->result();
?>
<?php foreach($row_cat1 as $item){ ?>
<option value="<?php echo $item->id; ?>"><?php echo $item->name; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label>Business 2</label>
<select name="txtBusiness2" id="business2" style="height: 30px;width: 100%;" class="Business2">
<option value=""> Select Business2 </option>
</select>
You have a type in your ajax call:
success : function (data) {
It's success not sucess
2 things may creating issue:
1) add double quotes in url
2) make it success instead of sucess
$.ajax({
type:"POST",
data: { business1:business1 },
url: '<?php echo site_url("client_area/select_business_sub_cat"); ?>', // add double quotes in url
success : function (data){ // make it success instead of sucess
alert(1);
var abc = $('#business2').html(data);
}
});
Change sucesss to success. You are using CI framework then use CI parameterized query, don't use static query it's hackable.
Give unique id to both div and select
It's better to follow MVC if you are use CI. Put your query in model with ci parameterized query.
<div class="form-group" id = 'divtxtBusiness1'>
<label>Business 1</label>
<select name="txtBusiness1" id="txtBusiness1" style="height: 30px;width: 100%;" class="Business1">
........
</select>
</div>
<div class="form-group" id = "div_Business_2">
<label>Business 2</label>
<select name="txtBusiness2" id="business2" style="height: 30px;width: 100%;" class="Business2">
<option value=""> Select Business2 </option>
</select>
</div>
<script>
//$(document).on('change', 'select.Business1', function(){
// var business1 = $('select.Business1 option:selected').val();
$(document).on('change', '#txtBusiness1', function(){
var business1 = $('#txtBusiness1').val();
//alert(business1);
//var value = $(this).val();
$.ajax({
type:"POST",
data: { business1:business1 },
url: '<?php echo site_url("client_area/select_business_sub_cat"); ?>',
success : function (data){
//alert(1);
$('#div_Business_2 #business2').remove();
$('#div_Business_2').append(data);
}
});
});
</script>
Controller :
public function select_business_sub_cat()
{
$business1 = $this->input->post('business1');
$result_sub_cat1 = $this->xyzmodel->xyzmodelfunction($business1)
$str = '<select name="txtBusiness2" id="business2" style="height: 30px;width: 100%;" class="Business2">';
for($i = 0 ; $i< count($result_sub_cat1) ; $i++)
{
$str .= '<option value="'.$result_sub_cat1['id'].'"> '.$result_sub_cat1['name'].' </option>';
}
$str .= '</select>';
echo $str;
// return $this->output->set_output($data);
}
Model :
don't use static query it's hackable.
class Xyzmodel extends CI_Model
{
......
public function xyzmodelfunction($business1)
{
$this->db->select(category.id,subcategory.*);
$this->db->from('category');
$this->db->join("subcategory", "category.id = subcategory.category_id", 'LEFT');
$this->db->where('category.id', $business1);
$result = $this->db->get();
return $result->result_array();
}
........
}
I tried to populate a select box based on the first but no result, no error but the second select box is not populate:
My html:
<div class="form-group">
<label>Firm:</label>
<select class="form-control marg-left-10" id="firm">
<?php if($all_firms): ?>
<?php foreach($all_firms as $firm): ?>
<option value="<?php echo $firm['id_firm']; ?>"><?php echo $firm['name_firm']; ?></option>
<?php endforeach; ?>
<?php endif; ?>
</select>
</div>
<div class="form-group">
<label>Administrator</label>
<select class="form-control marg-left-10" id="admin">
</select>
</div>
My php:
public function getAllFirms()
{
$this->load->database();
$all_firms = $this->db->query("SELECT *FROM firms");
if ($all_firms->num_rows())
{
$all_firms = $all_firms->result_array();
}
else
{
$all_firms = NULL;
}
return $all_firms;
}
public function getAdministrator($id)
{
$this->load->database();
$get_admin = $this->db->query("SELECT * FROM users,firms WHERE firms.id_firm = users.fk_firm and users.id = $id");
if ($get_admin->num_rows())
{
$get_admin = $get_admin->result_array();
}
else
{
$get_admin = NULL;
}
return $get_admin;
}
My script:
$("#firm").change(function() {
var selectedMark = $("#firm").val();
if (selectedMark != "") {
$.ajax({
type: "GET",
url: "<?php echo base_url() . 'user/getAdministrator'; ?>" + selectedMark,
success: function(data) {
$("#admin").html("");
$("#admin").append("<option value=''></option>");
$.each(data, function() {
$("#admin").append("<option value='" + this.id + "'>" + this.name + "</option>");
});
}
});
}
});
I use CodeIgniter as backend language, the first selectt box is populated but the second not.Please help me guys...HELP please!!!!! HELP ME GUYS!!Another idea to resolve this?
it looks like you've forgotten to add # when you calling 'admin' select. I.e. see 'success' section of your JS and change:
$('admin')...
to
$('#admin')...
you are looking like this:
<div class="form-group">
<label>Firm:</label>
<select class="form-control marg-left-10" id="firm">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<label>Administrator</label>
<select class="form-control marg-left-10" id="admin"></select>
</div>
<script>
$("#firm").change(function() {
var selectedMark = $("#firm option:selected").val();
var selectedMarkt = $("#firm option:selected").text();
if (selectedMark != "") {
$.ajax({
type: "GET",
url: "test.php",
success: function(data) {
$("#admin").append("<option value='" + selectedMark + "'>" + selectedMarkt + "</option>");
}
});
}
});
</script>
Looks like you need another "/" on this line:
url: "<?php echo base_url() . 'user/getAdministrator'; ?>" + selectedMark,
Right after 'user/getAdministrator'.
I am writing code for Autocomplete select box using ajax in codeigniter. Code is successfully executed but the problem is output is not coming as i want. I want list into the text box and output is coming outside the text box as a list. Here is my code:
Controller:
public function auto()
{
$country = $this->input->post('country');
$this->load->model('m_details');
$query = $this->m_details->get_auto($country);
foreach($query->result() as $row)
echo "<li>$row->country</li>";
}
Model:
public function get_auto($country)
{
$this->load->database();
$this->db->select('country');
// $this->db->from('global_geo_country');
$this->db->like('country', $country,'both');
//$this->db->from('global_geo_country');
return $this->db->get('global_geo_country');
}
View:
function ajaxSearch()
{
var input_data = $('#country').val();
if (input_data.length === 0)
{
$('#suggestions').hide();
}
else
{
var post_data = {
'country': input_data,
'<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'
};
$.ajax({
type: "POST",
url: "<?php echo base_url();?>test/auto",
data: post_data,
success: function(data) {
// return success
if (data.length > 0) {
$('#suggestions').show();
$('#autoSuggestionsList').addClass('auto_list');
$('#autoSuggestionsList').html(data);
}
}
});
}
HTML:
<div class="search">
<input name="country" id="country" type="text" onkeyup="ajaxSearch();">
<div id="suggestions">
<div id="autoSuggestionsList">
</div>
</div>
</div>
What should I do to display the output in the text box? Please guide me.
I have asked this question twice, with no satisfactory answer, that is, the problem I faced two questions ago still remains and none the wiser as how I am going to proceed with this.
This time I will provide all the code and what I receive, plus where the problem is occurring, I know what the issue is but since I'm relatively new to using AJAX it has me puzzled.
I have a form, which when you click the second to last field, duplicates itself, with the help of another user all the id's get changed to be unique.
<form role="form" class="batchinvoice form-horizontal" id="batchinvoice">
<div class="row">
<div class="form-group col-md-2">
<select class="form-control" name="sl_propid" >
<?php foreach($property as $row) :?>
<option value="<?php echo $row['id']; ?>">
<?php echo $row[ 'property_name'] . " " . $row[ 'property_address1']; ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group col-md-1">
<input type="text" name="sl_date" placeholder="Date" class="sl_date form-control" id="datepicker">
</div>
<div class="form-group col-md-2">
<input type="text" name="sl_ref" placeholder="Invoice Reference" class="form-control" id="sl_ref">
</div>
<div class="form-group col-md-2">
<select class="form-control" name="sl_nom_id" id="sl_nom_id">
<?php foreach($subitem_nominals as $row) :?>
<option value="<?php echo $row['subnom_id']; ?>">
<?php echo $row[ 'nom_subitem_name']; ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group col-md-2">
<input type="text" name="sl_desc" id="sl_desc" placeholder="Invoice Description" class="form-control">
</div>
<div class="form-group col-md-2">
<input type="text" name="sl_vat" placeholder="VAT Amount" class="vat form-control" id="vat">
</div>
<div class="form-group col-md-1">
<input type="text" name="sl_net" placeholder="Net" class="form-control" id="sl_net">
</div>
</form>
The JS for the form clone
<script>
var clone_iterator = 0;
$(function () {
var i = 0;
$.datepicker.setDefaults($.datepicker.regional['']);
$.datepicker.formatDate("yy-mm-dd");
$('#datepicker').datepicker();
$('#batchinvoice .vat').click(function () {
// alert("ok");
var id = "batchinvoice" + clone_iterator;
$('#batchinvoice').clone(true).attr("name", id).attr('id', id).appendTo(".panel-body"); // here I added this .attr('id',id)
// here we'll change the id's of all the elements who actualy have an attribute
$('#' + id + ' *[id]').each(function () {
$(this).attr('id', $(this).attr('id') + clone_iterator); //we set the attribute id
});
clone_iterator++;
});
$('#submit').click(function () {
var res = {};
console.log(res);
$('.batchinvoice').each(function (i) { //the class is a good use to do things like that you can repeat it more than once !
res[i] = new Array();
console.log(res);
res[i].propid = $(this).find('*[name=sl_propid]').val();
res[i].date = $(this).find('.sl_date formcontrol').val();
res[i].ref = $(this).find('*[name=sl_ref]').val();
res[i].id = $(this).find('*[name=sl_nom_id]').val();
res[i].desc = $(this).find('*[name=sl_desc]').val();
res[i].vat = $(this).find('*[name=sl_vat]').val();
res[i].net = $(this).find('*[name=sl_net]').val();
console.log(res);
alert(res[i].propid);
// i++;
//$.each('',function( index, value ){}
//(int)i is already incremented if you use class and not IDS
});
console.log(res);
$.ajax({
type: 'POST',
url: '<?php echo base_url(); ?>FinancialInput/addInvoiceToLedger',
data: res,
sucess: function (e) {
alert(e);
},
error: function (e) {
alert(e.toString());
}
});
});
});
</script>
This is the particular controller function in CodeIgniter, Note I have tried multiple things.
function addInvoiceToLedger(){
// $this->load->model('SalesLedgerModel');
// $propid = $this->input->post('propid');
// print_r($this->input->post());
// $date = $this->input->post('date');
// $ref = $this->input->post('ref');
// $nomid = $this->input->post('id');
// $desc = $this->input->post('desc');
// $vat = $this->input->post('vat');
// $net = $this->input->post('net');
$res = $this->input->post(NULL, TRUE);
//problem is probably here, it's
//for($x = 0; $x < count($res); $x++){
foreach($res as $row){
$this->SalesLedgerModel->addInvoiceToLedger($row.propid, $row.date, $row.ref, $row.nomid, $row.desc, $row.vat, $row.net);
}
//}
//redirect('home/financial_input/');
}
the Model Function
function addInvoiceToLedger($propid, $date, $ref, $nomid, $desc, $vat, $net){
$data = array('sl_prop_id' => $propid, 'sl_date' => $date,
'sl_ref' => $ref, 'sl_nominal_sub' => $nomid, 'sl_invoice_desc' => $desc, 'sl_vat' => $vat, 'sl_amount' => $net);
$this->db->insert_batch('salesledger', $data);
}
Which all have the relevant field data for each form inside them.
My question is how do I receive and handle the array? Every loop I've tried doesn't work, I've tried getting variables singularly(as you can see above commented out) but that doesn't make sense (or work) because in the $.ajax data it is set to res, but $this->input->post('res') doesn't return anything nor does $this->input->post(NULL, TRUE)
Majorly stuck, I feel this should be a simple thing, but I clearly don't understand it.
Edit, still same problem can't find an answer anywhere D:, tried many things.
Still the same problem "res" is sent as post, but I can't retrieve it in the controller with $this->input->post()...anyone?
I only wanted to submit a comment but apparently I need 50 rep for that so I'll take my chances with an answer.
In your $.ajax block what if you change the data section to this:
$.ajax({
type: 'POST',
url: '<?php echo base_url(); ?>FinancialInput/addInvoiceToLedger',
data: { res : res },
sucess: function (e) {
alert(e);
},
error: function (e) {
alert(e.toString());
}
});