Filling Data from MySQL not happening in Modal Form - ajax

My Modal is not firing on click of the button. I have tried every possible approach that I know and attempted all possible "Hit & Try" Methods. So I reverting to this forum for help. My Codes are follows:-
Main.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:700px;">
<h3 align="center">Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</h3>
<br />
<div class="table-responsive">
<table id="recordsfromraky" class="table table-striped table-bordered">
</table>
</div>
</div>
</body>
</html>
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
fetchChange();
$('.view_data').click(function(){
var employee_id = $(this).attr("id");
var fired_button = $(this).val();
alert(fired_button);
$('#dataModal').modal("show");
});
function fetchChange() {
var finyear = "2017-18";
var cmdname = "HQ TC";
var stnname = "All Stations";
var statusname = "All Status";
var cfaname = "All CFA";
var wkcatname = "All Categories";
$.ajax({
url:"get_value.php",
method:"POST",
data:{finyear:finyear, wkcatname:wkcatname,cmdname:cmdname,stnname:stnname, statusname:statusname,cfaname:cfaname},
success:function(data){
$('#recordsfromraky').html(data);
}
});
};
});
</script>
get_value.php code is as follows:-
<?php
ob_start();
include_once $_SERVER['DOCUMENT_ROOT'] . '/CommandWks/phpAssets/dbconnect.php';
ini_set("xdebug.var_display_max_children", -1);
ini_set("xdebug.var_display_max_data", -1);
ini_set("xdebug.var_display_max_depth", -1);
$finyr = $_POST['finyear'];
$commdname = $_POST['cmdname'];
$stationname = $_POST['stnname'];
$statustype = $_POST['statusname'];
$cfanamed = $_POST['cfaname'];
$catname = $_POST['wkcatname'];
$finyr = str_replace('"', '', $finyr);
$commdname = str_replace('"', '', $commdname);
$stationname = str_replace('"', "'", $stationname);
$statustype = str_replace('"', "", $statustype);
$cfanamed = str_replace('"', '', $cfanamed);
$catname = str_replace('"', '', $catname);
//var_dump($_POST);////////////////////////////////////////
$wherefy ='';
$wherecmd ='';
$wherestn = '';
$wherestatus ='';
$wherecfa ='';
$wherecat ='';
$tcn='';
if (empty($finyr)){
$wherefy = '';
}else{
$tcn = "'" . '%' . str_replace(' ', '', $finyr) . '%' . "'";
$wherefy = 'WHERE (`amwplist`.`Work_ID_by_MoD` LIKE ' . $tcn . ')';
}
if (!empty($stationname)) {
if ($stationname === "All Stations"){
$wherestn='';
}else{
$tcn='';
$tcn = "'" . str_replace("''", "", $stationname) . "'";
$wherestn = 'AND (`stationlist`.`Station` = ' . $tcn . ')';
}
}else{
$wherestn='';
}
if (!empty($commdname)) {
if ($commdname === "All Commands"){
$wherecmd='';
}else{
$tcn='';
$tcn = "'" . '%'. str_replace(' ', '', $commdname) . '%' . "'";
$wherecmd = 'AND (`amwplist`.`Work_ID_by_MoD` LIKE ' . $tcn . ')';
}
}else{
$wherecmd='';
}
if (!empty($statustype)) {
if ($statustype === "All Status"){
$wherestatus='';
}else{
$tcn='';
$tcn = "'" . '%'. $statustype . '%' . "'";
$wherestatus = 'AND (`workstatuslist`.`Status_Type` LIKE ' . $tcn . ')';
}
}else{
$wherestatus='';
}
if (!empty($cfanamed)) {
if ($cfanamed === "All CFA"){
$wherecfa='';
}else{
$tcn='';
$tcn = "'" . '%'. $cfanamed . '%' . "'";
$wherecfa = 'AND (`cfalist`.`CFA` LIKE ' . $tcn . ')';
}
}else{
$wherecfa='';
}
if (!empty($catname)) {
if ($catname === "All Categories"){
$wherecat='';
}else{
$tcn='';
$tcn = "'" . '%'. $catname . '%' . "'";
$wherecat = 'AND (`workscategorylist`.`Category_Type` LIKE ' . $tcn . ')';
}
}else{
$wherecat='';
}
$WhereCondition = $wherefy . " " . $wherestatus . " " . $wherestn . " " . $wherecfa . " " . $wherecat . " " . $wherecmd;
//var_dump( $WhereCondition);
//var_dump($wherefy);
//var_dump($wherecmd);
//var_dump($wherestn);
//var_dump($wherestatus);
//var_dump($wherecfa);
//ovar_dump($wherecat);
$sql ="SELECT
*
FROM `amwplist`
LEFT OUTER JOIN `workscategorylist` ON `amwplist`.`Category_ID` = `workscategorylist`.`Category_ID`
INNER JOIN `stationlist` ON `amwplist`.`Station_ID` = `stationlist`.`Station_ID`
LEFT OUTER JOIN `commandhqlist` ON `stationlist`.`Command_ID` = `commandhqlist`.`CommandHQ_ID`
LEFT OUTER JOIN `sectorlist` ON `stationlist`.`Sector_ID` = `sectorlist`.`Sector_ID`
LEFT OUTER JOIN `celist` ON `stationlist`.`CE_ID` = `celist`.`CE_ID`
LEFT OUTER JOIN `cwelist` ON `stationlist`.`CWE_ID` = `cwelist`.`CWE_ID`
LEFT OUTER JOIN `gelist` ON `stationlist`.`GE_ID` = `gelist`.`GE_ID`
LEFT OUTER JOIN `ifalist` ON `amwplist`.`IFA_ID` = `ifalist`.`IFA_ID`
LEFT OUTER JOIN `cdalist` ON `stationlist`.`CDA_ID` = `cdalist`.`CDA_ID`
LEFT OUTER JOIN `cfalist` ON `amwplist`.`CFA_ID` = `cfalist`.`CFA_ID`
LEFT OUTER JOIN `workstatuslist` ON `amwplist`.`Status_ID` = `workstatuslist`.`Status_ID` " .
$WhereCondition . " " .
"ORDER BY substring_index(amwplist.Work_ID_by_MoD, '/', 1), CONVERT(substring_index(amwplist.Work_ID_by_MoD, '/', -1), UNSIGNED INTEGER)
";
$tableRow = '<thead>
<tr>
<th>Category Type</th>
<th>Station</th>
<th>MoD ID</th>
<th>Nomenclature</th>
<th>Cost</th>
<th>Status</th>
</tr>
</thead>
<tbody>';
$conn = new mysqli($DBSERVER, $DBUSER, $DBPASS, $DBNAME);
$result = mysqli_query($conn, $sql);
//var_dump($conn);
while ($row= mysqli_fetch_array($result)) {
//$idnumber = CONVERT(substring_index($row['Work_ID_by_MoD'], '/', -1), UNSIGNED INTEGER);
$tableRow = $tableRow . '<tr>' ;
$tableRow = $tableRow . '<td>'. $row['Category_Type'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Station'] . '</td>';
$trow = $row['Work_ID_by_MoD'];
//var_dump($trow);
//var_dump('<td><input type="button" name= "' . $row['Work_ID_by_MoD'] . '" value= "' . $row['Work_ID_by_MoD'] . '" id= "' . $row['Work_ID_by_MoD'] . '" class="btn btn-info btn-xs view_data" /></td>');
$tableRow = $tableRow . '<td><input type="button" name= "' . $trow . '"' . 'value= "' . $trow . '" id= "' . $trow . '" class="btn btn-info btn-xs view_data" /></td>';
$tableRow = $tableRow . '<td>'. $row['Nomenclature'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Cost'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Status_Type'] . '</td>';
$tableRow = $tableRow . '</tr>';
}
$tableRow = $tableRow . '</tbody>';
//var_dump($tableRow);
echo ($tableRow);
$conn->close();
ob_end_flush();
?>
The function .click() on clicking the MoD ID in the third column is not firing. The content of rows in this column looks like this:-
<input type="button" name="AMWP/2017-18/1" value="AMWP/2017-18/1" id="AMWP/2017-18/1" class="btn btn-info btn-xs view_data">
<input type="button" name="AMWP/2017-18/2" value="AMWP/2017-18/2" id="AMWP/2017-18/2" class="btn btn-info btn-xs view_data">
<input type="button" name="AMWP/2017-18/3" value="AMWP/2017-18/3" id="AMWP/2017-18/3" class="btn btn-info btn-xs view_data">
I now think that maybe there are Handle issues here because the table is being filled by get_value.php into main.php and then I am trying to fire Modal by clicking the button generated by get_value.php.


The problem is that you try to bind a click event on a non existing object. i.e. $('.view_data').click(... happens before your ajax call is finished and therefore there are no elements that have the class view_data.
You have two options:
1) don't bind the event on the button, but on body. I personally prefer this method because it doesn't bind the event but uses a delegation. It's easier to debug and maintain (especially if you end up having a lot of events in one document):
$('body').on('click', '.view_data', function(){
alert('clicked ' + $(this).val());
});
2) put the event binding in the success method of the ajax call AFTER you write the results to the DOM
fetchChange();
function fetchChange() {
var finyear = "2017-18";
var cmdname = "HQ TC";
var stnname = "All Stations";
var statusname = "All Status";
var cfaname = "All CFA";
var wkcatname = "All Categories";
$.ajax({
url:"get_value.php",
method:"POST",
data:{finyear:finyear, wkcatname:wkcatname,cmdname:cmdname,stnname:stnname, statusname:statusname,cfaname:cfaname},
success:function(data){
$('#recordsfromraky').html(data);
$('.view_data').click(function(){
var employee_id = $(this).attr("id");
var fired_button = $(this).val();
alert(fired_button);
$('#dataModal').modal("show");
});
}
});
};
});


The amended get_value.php is as follows:-
<?php
ob_start();
include_once $_SERVER['DOCUMENT_ROOT'] . '/CommandWks/phpAssets/dbconnect.php';
ini_set("xdebug.var_display_max_children", -1);
ini_set("xdebug.var_display_max_data", -1);
ini_set("xdebug.var_display_max_depth", -1);
$finyr = $_POST['finyear'];
$commdname = $_POST['cmdname'];
$stationname = $_POST['stnname'];
$statustype = $_POST['statusname'];
$cfanamed = $_POST['cfaname'];
$catname = $_POST['wkcatname'];
$finyr = str_replace('"', '', $finyr);
$commdname = str_replace('"', '', $commdname);
$stationname = str_replace('"', "'", $stationname);
$statustype = str_replace('"', "", $statustype);
$cfanamed = str_replace('"', '', $cfanamed);
$catname = str_replace('"', '', $catname);
//var_dump($_POST);////////////////////////////////////////
$wherefy ='';
$wherecmd ='';
$wherestn = '';
$wherestatus ='';
$wherecfa ='';
$wherecat ='';
$tcn='';
if (empty($finyr)){
$wherefy = '';
}else{
$tcn = "'" . '%' . str_replace(' ', '', $finyr) . '%' . "'";
$wherefy = 'WHERE (`amwplist`.`Work_ID_by_MoD` LIKE ' . $tcn . ')';
}
if (!empty($stationname)) {
if ($stationname === "All Stations"){
$wherestn='';
}else{
$tcn='';
$tcn = "'" . str_replace("''", "", $stationname) . "'";
$wherestn = 'AND (`stationlist`.`Station` = ' . $tcn . ')';
}
}else{
$wherestn='';
}
if (!empty($commdname)) {
if ($commdname === "All Commands"){
$wherecmd='';
}else{
$tcn='';
$tcn = "'" . '%'. str_replace(' ', '', $commdname) . '%' . "'";
$wherecmd = 'AND (`amwplist`.`Work_ID_by_MoD` LIKE ' . $tcn . ')';
}
}else{
$wherecmd='';
}
if (!empty($statustype)) {
if ($statustype === "All Status"){
$wherestatus='';
}else{
$tcn='';
$tcn = "'" . '%'. $statustype . '%' . "'";
$wherestatus = 'AND (`workstatuslist`.`Status_Type` LIKE ' . $tcn . ')';
}
}else{
$wherestatus='';
}
if (!empty($cfanamed)) {
if ($cfanamed === "All CFA"){
$wherecfa='';
}else{
$tcn='';
$tcn = "'" . '%'. $cfanamed . '%' . "'";
$wherecfa = 'AND (`cfalist`.`CFA` LIKE ' . $tcn . ')';
}
}else{
$wherecfa='';
}
if (!empty($catname)) {
if ($catname === "All Categories"){
$wherecat='';
}else{
$tcn='';
$tcn = "'" . '%'. $catname . '%' . "'";
$wherecat = 'AND (`workscategorylist`.`Category_Type` LIKE ' . $tcn . ')';
}
}else{
$wherecat='';
}
$WhereCondition = $wherefy . " " . $wherestatus . " " . $wherestn . " " . $wherecfa . " " . $wherecat . " " . $wherecmd;
//var_dump( $WhereCondition);
//var_dump($wherefy);
//var_dump($wherecmd);
//var_dump($wherestn);
//var_dump($wherestatus);
//var_dump($wherecfa);
//ovar_dump($wherecat);
$sql ="SELECT
*
FROM `amwplist`
LEFT OUTER JOIN `workscategorylist` ON `amwplist`.`Category_ID` = `workscategorylist`.`Category_ID`
INNER JOIN `stationlist` ON `amwplist`.`Station_ID` = `stationlist`.`Station_ID`
LEFT OUTER JOIN `commandhqlist` ON `stationlist`.`Command_ID` = `commandhqlist`.`CommandHQ_ID`
LEFT OUTER JOIN `sectorlist` ON `stationlist`.`Sector_ID` = `sectorlist`.`Sector_ID`
LEFT OUTER JOIN `celist` ON `stationlist`.`CE_ID` = `celist`.`CE_ID`
LEFT OUTER JOIN `cwelist` ON `stationlist`.`CWE_ID` = `cwelist`.`CWE_ID`
LEFT OUTER JOIN `gelist` ON `stationlist`.`GE_ID` = `gelist`.`GE_ID`
LEFT OUTER JOIN `ifalist` ON `amwplist`.`IFA_ID` = `ifalist`.`IFA_ID`
LEFT OUTER JOIN `cdalist` ON `stationlist`.`CDA_ID` = `cdalist`.`CDA_ID`
LEFT OUTER JOIN `cfalist` ON `amwplist`.`CFA_ID` = `cfalist`.`CFA_ID`
LEFT OUTER JOIN `workstatuslist` ON `amwplist`.`Status_ID` = `workstatuslist`.`Status_ID` " .
$WhereCondition . " " .
"ORDER BY substring_index(amwplist.Work_ID_by_MoD, '/', 1), CONVERT(substring_index(amwplist.Work_ID_by_MoD, '/', -1), UNSIGNED INTEGER)
";
$tableRow = '<thead>
<tr>
<th>Category Type</th>
<th>Station</th>
<th>MoD ID</th>
<th>Nomenclature</th>
<th>Cost</th>
<th>Status</th>
</tr>
</thead>
<tbody>';
$conn = new mysqli($DBSERVER, $DBUSER, $DBPASS, $DBNAME);
$result = mysqli_query($conn, $sql);
//var_dump($conn);
while ($row= mysqli_fetch_array($result)) {
//$idnumber = CONVERT(substring_index($row['Work_ID_by_MoD'], '/', -1), UNSIGNED INTEGER);
$tableRow = $tableRow . '<tr>' ;
$tableRow = $tableRow . '<td>'. $row['Category_Type'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Station'] . '</td>';
$trow = $row['Work_ID_by_MoD'];
//var_dump($trow);
//var_dump('<td><input type="button" name= "' . $row['Work_ID_by_MoD'] . '" value= "' . $row['Work_ID_by_MoD'] . '" id= "' . $row['Work_ID_by_MoD'] . '" class="btn btn-info btn-xs view_data" /></td>');
$tableRow = $tableRow . '<td><input type="button" name= "' . $trow . '"' . 'value= "' . $trow . '" id= "' . $trow . '" class="btn btn-info btn-xs view_data" /></td>';
$tableRow = $tableRow . '<td>'. $row['Nomenclature'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Cost'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Status_Type'] . '</td>';
$tableRow = $tableRow . '</tr>';
}
$tableRow = $tableRow . '</tbody>';
$tableRow = $tableRow . "<script>$('.view_data'" . ").click(function(){
var employee_id = $(this).attr('id');
var fired_button = $(this).val();
alert(fired_button);
$('#dataModal').modal('show');
});
</script>";
//var_dump($tableRow);
echo ($tableRow);
$conn->close();
ob_end_flush();
?>
Please not the appending of at the end of the loop. That too did the trick.

Related

Hide datatable row when total equals 0

->addColumn('name', function ($customer) {
$d = '';
if (request('due_filter')) {
$sum = $customer->invoices->whereIn('status', array('due', 'partial'));
$due = $sum->sum('total') - $sum->sum('pamnt');
$d = '<span class="badge badge-danger">' . amountFormat($due) . '</span>';
}
return '<a class="font-weight-bold" href="' . route('biller.customers.show', [$customer->id]) . '">' . $customer->name . '</a>' . $d;
})
How can I hide customer row if total equals 0.00?

laravel livewire mount dynamic fields

I would like to have dynamic input fields with values ​​for all that are already entered in the db.
the following code works!
here the values ​​of the input extras.4 fields are displayed on the website
public function mount() {
$this->advettisment_extras = DB::table('advertisment_extras')
->where('advertisment_number', '=', $this->advertisment['advertisment_number'])
->where('user_id', '=', Auth::user()->id)->get()->toArray();
foreach ($this->advettisment_extras as $advettisment_extra) {
$this->extras = [
'4' => '12346548'
];
}
}
but when I try to dynamically search for and fill in the fields from db, the values ​​are not displayed.
foreach ($this->advettisment_extras as $advettisment_extra) {
$this->extras = [
$advettisment_extra->extra_id => $advettisment_extra->extra_value
];
}
can anyone help ?

<div class="row" wire:init="loadExtras">
#if(isset($categorie_extras))
#foreach($categorie_extras as $categorie_extra)
<div class="col-4 form-group">{!! getExtraField($categorie_extra->extra_id, $advertisment->advertisment_number) !!}</div>
#endforeach
#endif
</div>
and my getExtraField Function in helper.php
//Helper für Anzeige der Extra Felder
function getExtraField($extra_id, $advertisment_number) {
$field = '';
$option = '';
// Extra aus DB holen
$extra = \Illuminate\Support\Facades\DB::table('extras')->where('id', '=', $extra_id)->first();
$advertisment_extras = \Illuminate\Support\Facades\DB::table('advertisment_extras')
->where('advertisment_number', '=', $advertisment_number)
->where('user_id', '=', \Illuminate\Support\Facades\Auth::user()->id)->get();
switch ($extra->extra_form_item) {
case 'input':
foreach($advertisment_extras as $advertisment_extra) {
if ($advertisment_extra->extra_id == $extra->id ) {
$field = '<label for="' . $extra->id . '">' . $extra->extra_field_label . '</label><input type="' . $extra->extra_input_field_type . '" wire:model.lazy="extras.' . $extra->id . '" name="' . $extra->id . '" class="form-control" id="' . $extra->id . '">';
break;
} else {
$field = '<label for="' . $extra->id . '">' . $extra->extra_field_label . '</label><input type="' . $extra->extra_input_field_type . '" wire:model.lazy="extras.' . $extra->id . '" name="' . $extra->id . '" class="form-control" id="' . $extra->id . '">';
}
}
break;
case 'select':
$values = explode(',', $extra->extra_enum_select_values);
// Option des Select Feldes suchen
$field_1 = '<label for="' . $extra->id . '">' . $extra->extra_field_label . '</label><select name="' . $extra->id . '" wire:model="extras.'. $extra->id . '" class="form-control" id="' . $extra->id . '">';
foreach ($values as $value) {
$option = $option .'<option value="'. $value . '">' . $value . '</option>';
}
$field_3 = '</select>';
$field = $field_1 . $option . $field_3;
break;
case 'checkbox' :
$field = '<label for="' . $extra->id . '">' . $extra->extra_field_label . '</label><br><input type="checkbox" name="' . $extra->id . '" wire:model="extras.'. $extra->id . '" class="" value="1" id="' . $extra->id . '">';
break;
}
return $field;
}
and my complete component:
//Helper für Anzeige der Extra Felder
function getExtraField($extra_id, $advertisment_number) {
$field = '';
$option = '';
// Extra aus DB holen
$extra = \Illuminate\Support\Facades\DB::table('extras')->where('id', '=', $extra_id)->first();
$advertisment_extras = \Illuminate\Support\Facades\DB::table('advertisment_extras')
->where('advertisment_number', '=', $advertisment_number)
->where('user_id', '=', \Illuminate\Support\Facades\Auth::user()->id)->get();
switch ($extra->extra_form_item) {
case 'input':
foreach($advertisment_extras as $advertisment_extra) {
if ($advertisment_extra->extra_id == $extra->id ) {
$field = '<label for="' . $extra->id . '">' . $extra->extra_field_label . '</label><input type="' . $extra->extra_input_field_type . '" wire:model.lazy="extras.' . $extra->id . '" name="' . $extra->id . '" class="form-control" id="' . $extra->id . '">';
break;
} else {
$field = '<label for="' . $extra->id . '">' . $extra->extra_field_label . '</label><input type="' . $extra->extra_input_field_type . '" wire:model.lazy="extras.' . $extra->id . '" name="' . $extra->id . '" class="form-control" id="' . $extra->id . '">';
}
}
break;
case 'select':
$values = explode(',', $extra->extra_enum_select_values);
// Option des Select Feldes suchen
$field_1 = '<label for="' . $extra->id . '">' . $extra->extra_field_label . '</label><select name="' . $extra->id . '" wire:model="extras.'. $extra->id . '" class="form-control" id="' . $extra->id . '">';
foreach ($values as $value) {
$option = $option .'<option value="'. $value . '">' . $value . '</option>';
}
$field_3 = '</select>';
$field = $field_1 . $option . $field_3;
break;
case 'checkbox' :
$field = '<label for="' . $extra->id . '">' . $extra->extra_field_label . '</label><br><input type="checkbox" name="' . $extra->id . '" wire:model="extras.'. $extra->id . '" class="" value="1" id="' . $extra->id . '">';
break;
}
return $field;
}
my problem is that the value is not displayed in the fontend. That means the mount function does not work dynamically, but if I put it in directly as described above it works:
foreach ($xs as $x) {
$this->extras = [
'4' => '12345678'
];
}
but I would like to load the fields dynamically with values ​​like here:
foreach ($xs as $x) {
$this->extras = [
$x->extra_id => $x->extra_value,
];
}
Thanks for help :)

Codeigniter insert data using ajax

I'm using Ajax for CRUD. How can I use an associative array for inserting data with Ajax, so I don't have to reload the page and to append the inserted data below the existing data?
Here's The JS
function addTextBox(section, id_group) {
row_section = "#row_" + section;
wrapper = $(row_section);
// $(wrapper).append('<div class="movement_group"><input type="text" class="title_group" name="title_detail[' + section + ']" placeholder="Input" required="" style="width: 300px" /><button type="button" style="margin-left:10px;" class="btn btn-sm sending">Ok</button><button type="button" onClick="remove_field(\'' + section + '\')" style="margin-left:10px;" class="btn btn-sm remove_content">X</button></div>'); //add input box
// $(wrapper).append('<ul id="' + section + '" class="input_fields" style="list-style-type:none"><li><div class="movement_group"><input type="text" class="title_group" name="title_detail[\'' + section + '\']" placeholder="Input" required="" style="width: 300px" /><button type="button" style="margin-left:10px;" class="btn btn-sm sending">Ok</button><button type="button" onClick="remove_field(\'' + section + '\')" style="margin-left:10px;" class="btn btn-sm remove_content">X</button></div></li></ul>'); //add input box
$(wrapper).append('<ul id="fail_' + section + '" class="input_fields" style="list-style-type:none"><li><div class="movement_group"><input type="text" id="txt_' + section + '" id_group = "' + id_group + '"class="title_group" name="title_detail[\'' + section + '\']" placeholder="Input" required="" style="width: 300px" /><button type="button" style="margin-left:10px;" class="btn btn-sm sending" onClick="saveTitleGroup(\'' + section + '\', \'' + id_group + '\')">Ok</button><button type="button" onClick="remove_field(\'' + section + '\')" style="margin-left:10px;" class="btn btn-sm remove_content">X</button></div></li></ul>'); //add input box }
function remove_field(section) {
section_id = "#fail_" + section;
$(section_id).remove(); }
function saveTitleGroup(section, id_group) {
title_group = "#txt_" + section;
title_group = $(title_group).val();
td_section = "#td_" + section;
row_section = "#row_section" + section;
$.ajax({
type: "POST",
url: adminUrl+"/interest/save_detail",
data: {title: title_group, interest_group_id: id_group},
dataType: "text",
cache:false,
success:
function(data, textStatus, jqXHR){
console.log('test');
console.log(row_section);
/*$('.movement').fadeOut(800, function(){
$('.movement').fadeIn().delay(500);
// $('.movement').reload('http://127.0.0.1/camtravel-web/administrator/interest');
// return data;
window.location.reload();
});*/
// console.log(row_section);
// console.log(title_group);
// $('#tableinterest').html('');
$(td_section).html(data);
// $(row_section).html(''');
}
}); }
View
<table id="tableinterest" class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<?php
$n=0;
foreach ($interest_groups as $interest_group) {
$n++;
echo "<tr>";
echo "<td>";
// echo $interest_group['id'] . ". "
echo $n . ". ";
?>
</td>
<?php
echo "<td id='td_section_$interest_group[id]' group-id='$interest_group[id]'>";
// echo "<div id='title_group_'></div>";
echo "<b style='font-size:11pt !important;'>" . $interest_group['title'] . "</b>" . "<span style='margin-left:850px; font-size:15pt;' class='glyphicon glyphicon-plus interest_add' data-toggle='tooltip' data-placement='top' title='Add Detail' onclick='addTextBox(\"section_$interest_group[id]\", \"$interest_group[id]\")'></span><button type='button' style='float:right;' class='btn btn-xs text-red btn-delete-group' data-id='$interest_group[id]' data-category='$interest_group[title]'><span class='glyphicon glyphicon-minus'></span></button> ";
echo "<br>";
echo "</br>";
foreach ($interest_details as $interest_detail) {
echo "<ul style='list-style-type:none'>";
if ($interest_detail['interest_group_id'] == $interest_group['id']) {
echo "<li id='" . $interest_detail['id'] . "'>" . "<label style='font-size:10pt !important;' data-title=\"$interest_detail[title]\" id=\"$interest_detail[id]\" detail_id=\"$interest_group[id]\" class='editme1' id-title='\"$interest_group[id]\"'>" . $interest_detail['title'] . "</label>" .
"<button type='button' style='float:right;' class='btn btn-xs btn-delete-interest text-red' data-id='$interest_detail[id]' data-category='$interest_detail[title]'><span class='glyphicon glyphicon-minus'></span></button>" . "</li>";
}
echo "</ul>";
}
/*echo "<ul style='list-style-type:none'>";
echo "<li id='row_section_$interest_group[id]' class='input_fields'>" . "</li>";
echo "</ul>";*/
echo "<div id='row_section_$interest_group[id]'></div>";
echo "</td>";
// echo "<tr class='input_content'>";
// echo "</tr>";
echo "</tr>";
}
?>
</tbody>
</table>
Controller
function save_detail(){
// $id = $this->input->post('interest_group_id');
$title = $this->input->post('title');
$save = $this->save = $this->interest_group->save();
if ($save) {
echo $title;
// redirect('administrator/interest','refresh');
$this->layout = false;
} else {
echo "save failed";
// $this->layout = false;
}
// $title = $this->input->post('id-title');
// echo $title;
}
Model
function save(){
$id = $this->input->post('id');
// date_default_timezone_set('Asia/Jakarta');
$data = array(
"interest_group_id" => $this->input->post('interest_group_id'),
"title" => $this->input->post('title'),
"created_at" => date("Y-m-d H:i:s"),
"updated_at" => date("Y-m-d H:i:s"),
);
if ($id == null) {
$save = $this->db->insert('interest_detail',$data);
if ($save) {
return true;
$data = array();
$data['interest_group_id'] = 'interest_group_id';
$data['title'] = 'title';
// $data['title'] =
$data = array("data" => $data);
$data = json_encode($data);
$interest_group = $this->get_interest_group_by_id($this->input->post('interest_group_id'));
$interest_details = $this->get_interest_detail_by_id($this->input->post('interest_group_id'));
echo "<b>" . $interest_group['title'] . "</b>" . "<span style='margin-left:875px;' class='glyphicon glyphicon-plus interest_add' data-toggle='tooltip' data-placement='top' title='Add Detail' onclick='addTextBox(\"section_$interest_group[id]\", \"$interest_group[id]\")'></span><button type='button' style='float:right;' class='btn btn-xs text-red btn-delete-group' data-id='$interest_group[id]' data-category='$interest_group[title]'><span class='glyphicon glyphicon-minus'></span></button> ";
echo "<br>";
echo "<br>";
foreach ($interest_details as $interest_detail) {
echo "<ul style='list-style-type:none'>";
if ($interest_detail['interest_group_id'] == $interest_group['id']) {
echo "<li>" . "<label class='editme1'>" . $interest_detail['title'] . "</label>" .
"<button type='button' style='float:right;' class='btn btn-xs btn-delete-interest text-red' data-id='$interest_detail[id]' data-category='$interest_detail[title]'><span class='glyphicon glyphicon-minus'></span></button>" . "</li>";
}
echo "</ul>";
}
echo "<div id='row_section_$interest_group[id]'></div>";
print_r($interest_group);
print_r($interest_details);
} else {
return false;
}
} else {
$this->db->where('id', $id);
$update = $this->db->update('interest_detail', $data);
if ($update) {
return true;
} else {
return false;
}
}
}

Use single quotes when defining a string $string = '<div class"dre"></div>' and associative arrays need quotes names $array['name'] not $array[name] and last properly concatenate the strings and variables.
Try this:
<table id="tableinterest" class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<?php
$n=0;
foreach ($interest_groups as $interest_group) {
$n++;
echo "<tr>";
echo "<td>";
// echo $interest_group['id'] . ". "
echo $n . ". ";
?>
</td>
<?php
echo "<td id='td_section_".$interest_group['id']."' group-id='".$interest_group['id']."'>";
echo "<b style='font-size:11pt !important;'>" . $interest_group['title'] . "</b>" . '<span style="margin-left:850px; font-size:15pt;" class="glyphicon glyphicon-plus interest_add" data-toggle="tooltip" data-placement="top" title="Add Detail" onclick="addTextBox(section_'.$interest_group['id'].','.$interest_group['id'].')"></span><button type="button" style="float:right;" class="btn btn-xs text-red btn-delete-group" data-id='.$interest_group['id'].' data-category="'.$interest_group['title'].'"><span class="glyphicon glyphicon-minus"></span></button> ';
echo "<br>";
echo "</br>";
foreach ($interest_details as $interest_detail) {
echo "<ul style='list-style-type:none'>";
if ($interest_detail['interest_group_id'] == $interest_group['id']) {
echo "<li id='" . $interest_detail['id'] . "'>" . "<label style='font-size:10pt !important;' data-title=\"".$interest_detail['title']."\" id=\"".$interest_detail['id']."\" detail_id=\"".$interest_group['id']."\" class='editme1' id-title='\"".$interest_group['id']."\"'>" . $interest_detail['title'] . "</label>" .
"<button type='button' style='float:right;' class='btn btn-xs btn-delete-interest text-red' data-id='$interest_detail[id]' data-category='$interest_detail[title]'><span class='glyphicon glyphicon-minus'></span></button>" . "</li>";
}
echo "</ul>";
}
echo "<div id='row_section_".$interest_group['id']."'></div>";
echo "</td>"
echo "</tr>";
}
?>
</tbody>
</table>

Checkbox ajax form posts the word array to email

I am trying to make a booking form with checkboxes using an existing contact form.js script and mailhandler.php from template monster. All of the text and textarea inputs work fine but the checkboxes only return the word array.
Here's parts of the code:
html
<form action="bin/MailHandler.php" method="post" id="booking-form" >
<fieldset>
<div class="grid_12">
<div class="bookingformwrapper">
<div class="headerbar">WAXING</div>
intrested in:<br/>
<input type="checkbox" name="waxing[]" value="kidum_esek" id="wax1"/>aaa<br />
<input type="checkbox" name="waxing[]" value="mitug_esek" id="wax2"/>bbb<br />
<input type="checkbox" name="waxing[]" value="laikim" id="wax3"/>CCC<br />
<input type="checkbox" name="waxing[]" value="aher" id="wax4"/>DDD<br />
ajax jquery
,submitFu:function(){
var data = { 'waxing[]' : []};
$(":checked").each(function() {
data['waxing[]'].push($(this).val());
});
_.validateFu(_.labels)
if(!_.form.has('.'+_.invalidCl).length)
$.ajax({
type: "POST",
url:_.mailHandlerURL,
data:{
choice:'waxing[]',
name:_.getValFromLabel($('.name',_.form)),
email:_.getValFromLabel($('.email',_.form)),
phone:_.getValFromLabel($('.phone',_.form)),
fax:_.getValFromLabel($('.fax',_.form)),
state:_.getValFromLabel($('.state',_.form)),
message:_.getValFromLabel($('.message',_.form)),
message2:_.getValFromLabel($('.message2',_.form)),
datepicker:_.getValFromLabel($('#datepicker',_.form)),
owner_email:_.ownerEmail,
stripHTML:_.stripHTML
},
success: function(){
_.showFu()
}
})
},
php
<?php
$owner_email = $_POST["owner_email"];
$headers = 'From:' . $_POST["email"];
$subject = 'A message from your site visitor ' . $_POST["name"];
$messageBody = "";
if($POST['waxing[]'] !='nope'){
$messageBody .= '<p>Choice: ' . explode(",", $_POST['waxing[]']);
$messageBody .= '<br>' . "\n";
}
if($_POST['name']!='nope'){
$messageBody .= '<p>Visitor: ' . $_POST["name"] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['email']!='nope'){
$messageBody .= '<p>Email Address: ' . $_POST['email'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}else{
$headers = '';
}
if($_POST['state']!='nope'){
$messageBody .= '<p>State: ' . $_POST['state'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['phone']!='nope'){
$messageBody .= '<p>Phone Number: ' . $_POST['phone'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['fax']!='nope'){
$messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['datepicker']!='nope'){
$messageBody .= '<p>Date: ' . $_POST['datepicker'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['message']!='nope'){
$messageBody .= '<p>Address: ' . $_POST['message'] . '</p>' . "\n";
}
if($_POST['message2']!='nope'){
$messageBody .= '<p>Notes: ' . $_POST['message2'] . '</p>' . "\n";
}
if($_POST["stripHTML"] == 'true'){
$messageBody = strip_tags($messageBody);
}
try{
if(!mail($owner_email, $subject, $messageBody, $headers)){
throw new Exception('mail failed');
}else{
echo 'mail sent';
}
}catch(Exception $e){
echo $e->getMessage() ."\n";
}
?>
This is what gets returned on the email:
Choice: Array
Visitor: Father Christmas
Email Address: father#christmas.com
Phone Number: 01234 567890
Date: 25th December
Address: North Pole
Notes: Mince Pies
Where it says Choice: Array, I need it to give me the values of the selected/checked checkboxes.

DOB select boxes on Magento registration form

I'm currently using Magento 1.5.0.1
When a customer reigisters on the registration page (/account/create), he has to insert a date of birth (dob).
By default, the date of birth consists of 3 text-boxes. I have modified the file at /app/design/frontend/base/default/template/customer/widget.
So, instead of text-boxes there are now 3 select-boxes where the user can select a date
However, when all information is filled in correctly and you click on the "submit" button nothing happens (no errors, messages or anything).
Any idea on how to make the "submit" button work again?
Thanks
Edit:
The id's of the are the same as the one's used by the "". I've posted the code that I have changed
I've made 2 functions that print the options's element:
function getOptions($minValue, $maxValue)
{
$options = "";
for ($count = $minValue; $count <= $maxValue; $count++)
{
$options = $options . '<option value="' . $count . '">' . $count . '</option>';
}
return $options;
}
function getYears()
{
$years = "";
$currentYear = date('Y');
for ($count = 1900; $count <= $currentYear; $count++)
{
$years = $years . '<option value="' . $count;
if ($count == '1980')
{
$years = $years . '" selected="selected"';
}
$years = $years . '">' . $count . '</option>';
}
return $years;
}
And i've changed the input type=text to select
$this->setDateInput('d',
'<div class="dob-day">
<label for="' . $this->getFieldId('day') . '">' . $this->__('DD') . '</label>
<select id="' . $this->getFieldId('day') . '" name="' . $this->getFieldName('day') . '" title="' . $this->__('Day') . '" class="validate-select" ' . $this->getFieldParams() . '>' . getOptions(1,31) . '
</select>
</div>
<br />');
$this->setDateInput('m',
'<div class="dob-month">
<label for="' . $this->getFieldId('month') . '">' . $this->__('MM') . '</label>
<select id="' . $this->getFieldId('month') . '" name="' . $this->getFieldName('month') . '" title="' . $this->__('Month') . '" class="validate-select"' . $this->getFieldParams() . '>' . getOptions(1,12) . '
</select>
</div>
<br />');
$this->setDateInput('y',
'<div class="dob-year">
<label for="' . $this->getFieldId('year') . '">' . $this->__('YYYY') . '</label>
<select id="' . $this->getFieldId('year') . '" name="' . $this->getFieldName('year') . '" title="' . $this->__('Year') . '" class="validate-select"' . $this->getFieldParams() . '>' . getYears() . '
</div>'
);

Replace/create dob.phtml file located in app/design/frontend/[package-name]/default/template/customer/widget/
https://gist.github.com/ncla/7794502 (tested on Magento 1.8 community edition)
Accepted answer might work, but hiding inputs seems unacceptable. Also setDateInput, getSortedDateInputs methods are unnecessary, as you pass them HTML just to get them back.
If you try converting dob.phtml from input boxes to drop down boxes, Magento form validation will fail (throw JS error) because it can't find "day" input. So I just override Varien.DOB initialize function to select correct elements.

Plz replace the dob.phtml in
app/design/frontend/base/default/template/customer/widget/
to follwing code and override new field to old with the help of css
/////////////////////////////
<?php echo $this->getLayout()->createBlock('customer/widget_dob')
->setDate($this->getCustomer()->getDob())
->toHtml() ?>
// For checkout/onepage/billing.phtml:
<?php echo $this->getLayout()->createBlock('customer/widget_dob')
->setDate($this->getCustomer()->getDob())
->setFieldIdFormat('billing:%s')
->setFieldNameFormat('billing[%s]')
->toHtml() ?>
/* NOTE: Regarding styles - if we leave it this way, we'll move it to boxes.css
Alternatively we could calculate widths automatically using block input parameters.
*/
/**
* #see Mage_Customer_Block_Widget_Dob
*/
<label for="<?php echo $this->getFieldId('month')?>"<?php if ($this->isRequired()) echo ' class="required"' ?>><?php if ($this->isRequired()) echo '<em>*</em>' ?><?php echo $this->__('Date of Birth') ?></label>
<div class="input-box customer-dob">
<?php
$this->setDateInput('d',
'<div class="dob-day">
<input type="text" id="' . $this->getFieldId('day') . '" name="' . $this->getFieldName('day') . '" value="' . $this->getDay() . '" title="' . $this->__('Day') . '" class="input-text validate-custom" ' . $this->getFieldParams() . ' />
<label for="' . $this->getFieldId('day') . '">' . $this->__('DD') . '</label>
</div>'
);?>
<select name="nday" id="nday" onchange="getElementById('<?php echo $this->getFieldId('day');?>').value=this.value" style="width:90px;">
<option value="">Select</option>
<?php
for($i=1;$i<=31;$i++)
{
echo "<option value='".$i."'>".$i."</option>";
}
?>
</select>
<select name="nmon" id="nmon" onchange="getElementById('<?php echo $this->getFieldId('month');?>').value=this.value" style="width:90px;">
<option value=''>Select</option>
<?php echo '<option value="">'.$this->__("Select").'</option>'.'<option value="01">'.$this->__("January").'</option>'.'<option value="02">'.$this->__("February").'</option>'.'<option value="03">'.$this->__("March").'</option>'.'<option value="04">'.$this->__("April").'</option>'.'<option value="05">'.$this->__("May").'</option>'.'<option value="06">'.$this->__("June").'</option>'.'<option value="07">'.$this->__("July").'</option>'.'<option value="08">'.$this->__("August").'</option>'.'<option value="09">'.$this->__("September").'</option>'.'<option value="10">'.$this->__("October").'</option>'.'<option value="11">'.$this->__("November").'</option>'.'<option value="12">'.$this->__("December").'</option>'; ?>
</select>
<select name="nyear" id="nyear" onchange="getElementById('<?php echo $this->getFieldId('year');?>').value=this.value" style="width:90px;">
<option value="">Select</option>
<?php
for($j=date('Y')-80;$j<=date('Y');$j++)
{
echo "<option value='".$j."'>".$j."</option>";
}
?>
</select>
</p>
<?php
$this->setDateInput('m',
'<div class="dob-month">
<input type="text" id="' . $this->getFieldId('month') . '" name="' . $this->getFieldName('month') . '" value="' . $this->getMonth() . '" title="' . $this->__('Month') . '" class="input-text validate-custom" ' . $this->getFieldParams() . '/>
<label for="' . $this->getFieldId('month') . '">' . $this->__('MM') . '</label>
</div>'
);
$this->setDateInput('y',
'<div class="dob-year">
<input type="text" id="' . $this->getFieldId('year') . '" name="' . $this->getFieldName('year') . '" value="' . $this->getYear() . '" title="' . $this->__('Year') . '" class="input-text validate-custom" ' . $this->getFieldParams() . ' />
<label for="' . $this->getFieldId('year') . '">' . $this->__('YYYY') . '</label>
</div>'
);
?>
<?php echo $this->getSortedDateInputs() ?>
<div class="dob-full" style="display:none;">
<input type="hidden" id="<?php echo $this->getFieldId('dob')?>" name="<?php echo $this->getFieldName('dob')?>" />
</div>
<div class="validation-advice" style="display:none;"></div>
</div>
<script type="text/javascript">
//<![CDATA[
var customer_dob = new Varien.DOB('.customer-dob', <?php echo $this->isRequired() ? 'true' : 'false' ?>, '<?php echo $this->getDateFormat() ?>');
//]]>
</script>
////////////////////////////
it work fine .this is just an idea.......
enjoy

Thats how I did it. Maybe someone can use it
Grab the dob code from some site or from Magento default theme
Create your own widget template in your theme folder, for example customer/widget/dob-custom.phtml
Call this widget in your template file, for example
echo $this->getLayout()->createBlock('customer/widget_dob')->setTemplate('customer/widget/dob-custom.phtml')->toHtml();

The issue I think is because the format of the DD is not correct. You are generating a day like 1, 2, 3, 4... while it should be 01, 02, 03, 04,.. etc..
Regards!

I recently switched from ncla's solution to this:
http://www.endreywalder.com/blog/change-date-of-birth-field-to-select-boxes-in-magento/
Instead of displaying 01-12 for months, this will output the actual names which I like much better.
Tested on Magento 1.9.2

Resources