I need help.
I want to show the data's within the range of the date i choose.
Here's my code so far
Here's the code where I display the datatables
View
<div class="box-body">
<div class="table-responsive">
<div class="row">
<div class="col-md-4">
<div class="form-group start-date">
<label>From</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="start_date" name="start_date">
</div>
<!-- /.input group -->
</div>
</div>
<div class="col-md-4">
<div class="form-group end-date">
<label>To</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="end_date" name="end_date">
</div>
<!-- /.input group -->
</div>
</div>
<div class="col-md-2">
<div class="form-group met-cheq">
<label>Go </label>
<div class="input-group date">
<button class="btn btn-warning btn-md" name = "search" id="search">Search!</button>
</div>
<!-- /.input group -->
</div>
</div>
</div>
<table id="table-sales" class="table table-bordered table-striped">
<thead>
<tr>
<th>DR</th>
<th>Date</th>
<th>Customer</th>
<th>Price</th>
<th>Paid Amnt</th>
<th>Balance</th>
<th>Receipt</th>
<th>Remarks</th>
<th>Items</th>
<th style="width:55px;">Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($sales_inv as $inv) {
$balance = $inv->inv_price-$inv->payment;
$status = "";
$payment = $inv->payment;
if ($inv->inv_type==1) {
$status = "Department Store";
}elseif($inv->inv_type==2){
$status = "Local";
}elseif($inv->inv_type==3){
$status = "Provincial";
}elseif($inv->inv_type==4){
$status = "UNITOP";
}elseif($inv->inv_type==5){
$status = "GAISANO";
}
?>
<tr class="row-<?php echo $inv->id; ?>">
<td><?php echo $inv->inv_cno; ?></td>
<td><?php echo date("M d, Y", strtotime($inv->timestamp)); ?></td>
<td><?php echo $inv->cust_name; ?></td>
<td class="price-<?php echo $inv->inv_cno; ?>">Php <?php echo number_format($inv->inv_price,2); ?></td>
<td class="payment-<?php echo $inv->inv_cno; ?>">Php <?php echo number_format($payment,2); ?></td>
<td class="bal-<?php echo $inv->inv_cno; ?>">Php <?php echo number_format($balance,2); ?></td>
<td><?php echo $status; ?></td>
<td>
<button class="btn btn-info btn-sm btn-rem" data-value="<?php echo $inv->id; ?>">View Remarks
</button>
</td>
<td>
<button class="btn btn-success btn-sm btn-item" data-value="<?php echo $inv->inv_cno; ?>">View Item
</button>
</td>
<td>
<button class="btn btn-primary btn-xs btn-print" data-value="<?php echo $inv->inv_cno; ?>"><i class="fa fa-print"></i></button>
<button class="btn btn-warning btn-xs btn-add-pay" data-value="<?php echo $inv->inv_cno; ?>#<?php echo $inv->custid; ?>#<?php echo $inv->id; ?>"><i class="fa fa-credit-card"></i></button>
<button class="btn btn-danger btn-xs btn-edit-pay" data-value="<?php echo $inv->inv_cno; ?>#<?php echo $inv->custid; ?>#<?php echo $inv->id; ?>"><i class="fa fa-edit"></i></button>
</td>
</tr>
<?php } ?>
</tbody>
<tfooter>
<tr>
<th>DR</th>
<th>Date</th>
<th>Customer</th>
<th>Price</th>
<th>Paid Amnt</th>
<th>Balance</th>
<th>Receipt</th>
<th>Remarks</th>
<th style="width:55px;">Action</th>
</tr>
</tfooter>
</table>
</div>
<!-- /.table-responsive -->
</div>
</div>
<!-- /.box -->
</section>
<!-- right col -->
</div>
Model
public function rangeDate($start_date,$end_date){
$query = $this->db->select($this->tables['invent_inv'].'.id,'
.$this->tables['invent_inv'].'.inv_type,'.$this->tables['invent_inv'].'.inv_cno,'
.$this->tables['invent_cust'].'.id as custid,'.$this->tables['invent_cust'].'.cust_name,'
.$this->tables['invent_inv'].'.inv_price, '.$this->tables['invent_inv'].'.inv_tax,'
.$this->tables['invent_inv'].'.pay_due, SUM('.$this->tables['invent_sales'].'.paid_amnt) as payment,'
.$this->tables['invent_inv'].'.timestamp')
->join($this->tables['invent_cust'], $this->tables['invent_inv'].'.cust_id='
.$this->tables['invent_cust'].'.id','LEFT')
->join($this->tables['invent_sales'], $this->tables['invent_inv'].'.inv_cno='
.$this->tables['invent_sales'].'.inv_cno','LEFT')
->where($this->tables['invent_inv'].'.status !=', 1)
->where($this->tables['invent_inv'].'.status !=', 0)
->where($this->tables['invent_inv'].'.timestamp >=',$start_date)
->where($this->tables['invent_inv'].'.timestamp <=',$end_date)
->group_by($this->tables['invent_sales'].".inv_cno")
->group_by($this->tables['invent_inv'].".inv_cno")
->group_by($this->tables['invent_inv'].".timestamp")
->get($this->tables['invent_inv']);
return $query;
}
JS
$('#start_date').datepicker({
dateFormat: 'yy-mm-dd',
autoclose: true
})
$('#end_date').datepicker({
dateFormat: 'yy-mm-dd',
autoclose: true
})
$('#table-sales').DataTable();
Now my problem is that I don't know what to put on the controller and I don't know how to show it on my table-sales . I don't know if the code I am putting is correct or if I am on the right path . I'm using codeigniter3x . Could someone help me please.
Thank you in advance for someone who will help me .
You can call ajax when click on Search button and pass start and end date as parameters in ajax request and filter data.
After get ajax response from controller you can update tbody of table-sales table using jquery with updated data.
Example
Assume you get array of updated data
var tab_body = '';
$.each(sub_subject, function (key, value)
{
tab_body = tab_body + '<tr><td>' + value.sub_subject_name + '</td>' +
'<td>' + value.sub_subject_code + '</td>' +
'<td><div class="text-center"><button class="btn btn-primary open_edit_sub_subject_model" sub_subject_id="' + value.sub_subject_id + '" type="button" title="Edit" request_type="open_edit" subject_name="' + d.subject_name + '"><i class="fas fa-edit"></i></button>\n\
<button type="button" class="btn btn-primary subject-data-delete" title="Remove" delete_type="sub_subject" subject_group_id="' + d.subject_group_id + '" subject_id="' + d.subject_id + '" sub_subject_id="' + value.sub_subject_id + '"><i class="fa fa-trash"></i></button>\n\
</div></td>' +
'</tr>';
});
// example is just for reference
put above data in table using
$("#table-sales tbody").html(tab_body);
Hopfully it will help.
Related
Hello i am getting an error while fetching data with ajax as Cannot read property 'childNodes' of null can any one tell me what is going wrong with my codes, actually i have made a form to search data with date from to date to so after fetching the records i want to display them in table but childnode error is showing how can i resolve it. Most interestingly when i console i found the desired data just it is not showing inside of div2.
Jquery
$(document).on('submit','#date-search',function(e){
e.preventDefault();
// var url = $(this).attr('action');
var data = $(this).serialize();
$.ajax({
url:"model/orders/orders.php?selectdate",
type:"POST",
data:data,
success:function(data){
// console.log(data);
// $('#date-search')[0].reset();
$('#div2').html(data);
if(data==''){
$('#div2').append('<tr class="odd"><td valign="top" colspan="5" class="dataTables_empty">No data available in table</td></tr>');
}
// $("#div2").html(data, function () {
// $(".table").dataTable({
// retrieve:true,
// });
// });
}
});
return false;
});
php part
if(isset($_GET['selectdate'])){
$date_from = $_POST['date_from'];
$date_to = $_POST['date_to'];
$sql_date = "select * from $tb_orders where book_date >= '$date_from' and book_date <= '$date_to' order by id DESC";
$res_date = mysqli_query($conn,$sql_date);
if($num_date = mysqli_num_rows($res_date) > 0){
$i=0;
while($rows_date = mysqli_fetch_assoc($res_date)){
$i++;
$order_id = $rows_date['id'];
$product = $rows_date['product_id'];
$total_price = $rows_date['total_price'];
$transac = $rows_date['transaction_no'];
$sel_pro = "select * from $tb_products where id='$product'";
$res_pro = mysqli_query($conn,$sel_pro);
if($res_pro){
$rows_pro = mysqli_fetch_assoc($res_pro);
$pname = $rows_pro['pname'];
}
$sel_ro = "select * from $tb_customers where order_id='$order_id'";
$res_ro = mysqli_query($conn,$sel_ro);
if($res_ro){
$rows_ro = mysqli_fetch_assoc($res_ro);
$cust_name = $rows_ro['cust_name'];
$cust_number = $rows_ro['cust_number'];
}
?>
<tr>
<td><?php echo $i; ?></td>
<td>
<?php
if($cust_name == ''){
echo 'N/A';
}else{
echo $cust_name;
}
?>
</td>
<td><?php echo date("d-m-Y", strtotime($rows_date['book_date'])); ?></td>
<td><?php echo ucfirst($pname); ?></td>
<td><a href="../uploads/<?php echo $rows['file']; ?>" target="_blank" class="btn btn-success btn-sm ml-1" download>Download</a></td>
<td>Rs. <?php echo $total_price; ?></td>
<td>
<?php
if($transac == ''){
echo 'N/A';
}else{
echo $transac;
}
?>
</td>
<td>
<button onclick="alertify.confirm('Want to Delete','Are you sure you want to Delete?',function(){typedel(<?php echo $rows['id']; ?>)},function(){});" class="btn btn-danger btn-sm ml-2" title="Delete"><i class="mdi mdi-delete"></i></button>
</td>
</tr>
<?php
}
}
}
html part
<div class="card-body">
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="mx-auto">
<form class="form-inline mt-4 d-flex justify-content-center" method="post" id="date-search">
<input type="date" class="form-control mb-2 mr-sm-2" id="date_from" name="date_from" placeholder="Date from" required>
<input type="date" class="form-control mb-2 mr-sm-2" id="date_to" name="date_to" placeholder="Date to" required>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
</div>
</div>
<div class="col-sm-2"></div>
</div>
</div>
<div class="table-responsive pl-3 pr-3" id="tableWrap">
<table class="table download-excel">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Customer</th>
<th scope="col">Booking</th>
<th scope="col">Product</th>
<th scope="col">File</th>
<th scope="col">Amount</th>
<th scope="col">Transaction Details</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody id="div2">
</tbody>
</table>
</div>
I think you may have typo errors in php
I have one table with rows of input type text and one button on each row to open modal window.
I am adding the rows in the main table with the help of add row button.
In modal window I have another table with rows of data and one radio button.
I want to get the values of columns of selected row with the help of radio button. I am getting the selected row values but the values are fetched always on first row of main table.
I want to get the selected values in the current row of main table I mean the row from where I opened the modal window.
Following is the HTML code of my table........
<div class="row pt-3">
<div class="table-responsive col-md-10">
<table id="tarifftable" class="table table-sm table-bordered table-hover">
<thead class="thead-light">
<tr>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","TDID"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","TDSCCODE"); ?></th>
<th></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","SCDESC"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","TDRATE"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","TDREMARKS"); ?></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="text-control input-sm" readonly name="tdid[]" id="tdid"
value="1" style="text-align:right;width:50px;" maxlength="4" />
</td>
<td>
<input type="text" class="text-control" name="tdsccode[]" id="tdsccode"
style="width:100px;" maxlength="50" />
</td>
<td>
<a href="#" data-toggle="modal" data-target="#serviceModal" class="btn btn-info btn-xs">
<i class="fa fa-search"></i>
</a>
</td>
<td>
<input type="text" class="text-control" name="tdscdesc[]" id="tdscdesc" readonly
style="width:200px;" maxlength="250" />
</td>
<td>
<input type="number" class="text-control" name="tdrate[]" id="tdrate"
style="text-align:right;width:90px" maxlength="17" />
</td>
<td>
<input type="text" class="text-control" name="tdremarks[]" id="tdremarks"
style="width:200px" maxlength="100" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2 pl-0">
<button type="button" name="addrow" id="addrow" class="btn btn-success fa fa-plus btn-sm"></button>
</div>
</div>
Following is the JavaScript code for adding new row....
<script>
$(document).ready(function(){
var allInputs = document.querySelectorAll('table tr input[name="tdid[]"]');
var rowcount = allInputs[allInputs.length - 1].value;
var count=parseInt(rowcount);
$(document).on('click','#addrow', function(){
count=count+1;
var html_code='';
html_code +='<tr id="row_id_'+count+'">';
html_code += '<td><input type="text" class="text-control input-sm" name="tdid[]" id="tdid" readonly style="text-align:right;width:50px" value="'+count+'"/></td>';
html_code +='<td><input type="text" class="text-control" name="tdsccode[]" id="tdsccode" style="width:100px;" maxlength="50" /> </td>';
html_code +='<td><i class="fa fa-search"></i></td>';
html_code +='<td><input type="text" class="text-control" name="tdscdesc[]" id="tdscdesc" readonly style="width:200px;" maxlength="250" /></td>'
html_code +='<td><input type="number" class="text-control" name="tdrate[]" id="tdrate" style="text-align:right;width:90px" maxlength="17" /></td>'
html_code +='<td><input type="text" class="text-control" name="tdremarks[]" id="tdremarks" style="width:200px" maxlength="100" /></td>';
//html_code +='<td><button type="button" name="removerow" id="removerow" class="btn btn-danger fa fa-remove"></button></td>';
html_code +='</tr>';
$('#tarifftable').append(html_code);
//alert(count);
//}
});
});
</script>
Following is the HTML code for modal window......
<div id="serviceModal" class="modal show fade" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title"><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","SERVICELIST");?></h6>
</div>
<div class="modal-body">
<div class="control-container" style="padding:10px;">
<div class="row pt-1">
<div class="col-md-3">
<label><?php echo GetBilingualLabels($_SESSION['$language'],"SEARCHTABLE","SEARCHBY"); ?></label>
</div>
<div class="col-md-3">
<select id="searchby" class="text-control">
<option value="1"><?php echo GetBilingualLabels($_SESSION['$language'],"SERVICECODE","SCCODE"); ?></option>
<option value="2"><?php echo GetBilingualLabels($_SESSION['$language'],"SERVICECODE","SCDESC"); ?></option>
</select>
</div>
<div class="col-md-6">
<input type="text" id="searchvalue" class="text-control" onkeyup="FilterFunction('serviceTable','searchby','searchvalue')" style="width:100%"
placeholder="<?php echo GetBilingualLabels($_SESSION['$language'],"SEARCHTABLE","SEARCHVALUE"); ?>" />
</div>
</div>
<div class="line"></div>
<table id="serviceTable" class="table table-sm table-bordered table-hover table-lightfont paginated">
<thead class="thead-light">
<tr>
<th></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"SERVICECODE","SCCODE"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"SERVICECODE","SCDESC"); ?></th>
</tr>
</thead>
<tbody>
<?php
if ($_SESSION['$language']=="E") {
$servicedata=SelectData("service_code","sc_code,sc_desc","","sc_code");
}
else {
$servicedata=SelectData("service_code","sc_code,sc_bldesc as sc_desc","","sc_code");
}
$rownum=0;
foreach ($servicedata as $servicedata) {
echo "<tr id=$rownum>
<td><input type='radio' name='serviceradio' id='serviceradio' value='{$servicedata['sc_code']}'></td>
<td>{$servicedata['sc_code']}</td>
<td>{$servicedata['sc_desc']}</td>
</tr>";
$rownum+=1;
} ?>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-close"></i>
<?php echo GetBilingualLabels($_SESSION['$language'],"BUTTON","CANCEL"); ?>
</button>
<button type="button" name="selectservice" id="selectservice" class="btn btn-success"> <!--onclick="DispMsg(<//?php echo "'".$_SESSION['AlertMsg']."'";?>)"-->
<i class="fa fa-check"></i>
<?php echo GetBilingualLabels($_SESSION['$language'],"BUTTON","SELECTLIST"); ?>
</button>
</div>
</div>
</div>
</div>
Following is the JavaScript for getting the selected values from modal window into main table.....
<script>
$(document).ready(function(){
$(document).on('click','#selectservice',function(){
var service = document.getElementsByName('serviceradio');
var scdesc = document.getElementsByName('scdesc');
for(i = 0; i < service.length; i++) {
if(service[i].checked) {
var Row = document.getElementById(i);
var Cells = Row.getElementsByTagName("td");
document.getElementById('tdsccode').value= service[i].value;
document.getElementById('tdscdesc').value=Cells[2].innerText;
}
}
$('#serviceModal').modal('hide');
});
</script>
Thanks everybody for the support but i have solved the issue by myself as follows..
1)i have set the id of my main table input text with count value.
2)on the button to show the modal window i have set the data-book-id with the value of count.
2)i have created one input type text with display none attribute
3)on modal show event i have set the value of this input type text with passed data-book-id value
4)then i concatenated this value with the id of the input type text in main table.
This way i am getting the value set of the current row of input type text.
I want to filter Table data, but I have more than hundred row so I used pagination. If i apply any filter it only filters the current page inseated of entier table.
Html and javascript code are given below
<select id='filterText' style='display:inline-block' onchange='filterText()'>
<option disabled selected>Select</option>
<option value='Active'>Active</option>
<option value='Obsolete'>Obsolete</option>
<option value='all'>All</option>
</select>
<table class="table table-striped table-bordered table-hover table-list-search" id="dataTables-example" >
<thead>
<tr style="background-color:#abdcd5;">
<th align="left" class="col-xs-2">Employee ID</th>
<th align="left" class="col-xs-1">Name</th>
<th align="left" class="col-xs-2">Location</th>
<th align="left" class="col-xs-2">Company </th>
<th align="left" class="col-xs-3">Job Description</th>
<th align="left" class="col-xs-1">Status</th>
<th align="left" class="col-xs-1">Action</th>
</tr>
</thead>
<tbody>
<?php employeedetails::employeelist();?>
</tbody>
</table>
Javascript
<script>
function filterText() {
var rex = new RegExp($('#filterText').val());
if(rex == "/all/") {
clearFilter();
} else {
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter() {
$('.filterText').val('');
$('.content').show();
}
</script>
Php code
<?php
class employeedetails
{
//function for display details of employee
static function employeelist()
{
$tenanPortalId = $_SESSION['PortalID'];
$databaseConnectionObject = new DB_CONNECT();
$resultForGettingDetailsOfEmployees = mysqli_query($databaseConnectionObject->connect(),$Query);
if(!$resultForGettingDetailsOfEmployees){
die(mysqli_error($databaseConnectionObject->connect()));
}
else if($resultForGettingDetailsOfEmployees)
{
while($row = mysqli_fetch_array($resultForGettingDetailsOfEmployees))
{
$employee_ID=$row['employee_id'];
$employee_ID_trim = str_replace($tenanPortalId."~","",$row['employee_id']);
$employee_Name=$row['employee_name'];
$employee_Location=$row['employee_location'];
$employee_Status=$row['employee_Status'];
$expenseManager=$row['expenseManager'];
$SnactionManager=$row['SnactionManager'];
$EmployeeLocation=$row['countryName'];
$hireDate=$row['hireDate'];
if($row['company'] == "->")
{
$company = "";
}
else
{
$company=$row['company'];
}
if($row['reportingLineUnit'] == "->")
{
$reportingLineUnit="";
}
else
{
$reportingLineUnit=$row['reportingLineUnit'];
}
$employeeType = $row['employeeType'];
$jobdescription = $row['jobDescription'];
?>
<tr class="content">
<td>
<a data-toggle="modal" data-target='#<?php echo "$employee_ID_trim"; ?>' style="cursor: pointer;">
<?php echo "$employee_ID";?>
</a>
<?php
$msg = "";
if($SnactionManager == "" || $SnactionManager == "No")
{
$msg = "Do you want to make $employee_Name as Sanction Manager?" ;
}
else
{
$msg = "Do you want to remove $employee_Name as Sanction Manager?" ;
//echo " <span><img src='../assets/img/twouser.png' width='20px;' height='20px;'/></span>";
}
echo $imgPath = ($expenseManager == "Yes") ?
(($SnactionManager == "Yes") ? " <span><img src='../assets/img/twouser.png' width='20px;' height='20px;' title='Project & Sanction Manager'/></span>" : " <span><img src='../assets/img/project.png' width='20px;' height='20px;' title='Project Manager'/></span>" )
:
(($SnactionManager == "Yes") ? " <span><img src='../assets/img/sanction.png' width='20px;' height='20px;' title='Sanction Manager'/></span>" : "" ) ;
?>
<!-- Modal -->
<div id='<?php echo "$employee_ID_trim"; ?>' class="modal fade" role="dialog" ">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
<?php echo "$employee_Name";?>
</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<tr style="background-color:#abdcd5;">
<th align="left" class="col-xs-2">Project Manager</th>
<th align="left" class="col-xs-2">Sanction Manager</th>
<th align="left" class="col-xs-2">Type</th>
<th align="left" class="col-xs-2">Reporting Line Unit </th>
<th align="left" class="col-xs-2">Hire Date </th>
</tr>
<tr>
<td><?php echo "$expenseManager";?></td>
<td><?php echo "$SnactionManager";?></td>
<td><?php echo "$employeeType";?></td>
<td><?php echo "$reportingLineUnit";?></td>
<td><?php echo date("m/d/Y", strtotime($hireDate));?></td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
<td>
<?php echo "$employee_Name"; ?>
</td>
<td><?php echo "$EmployeeLocation";?></td>
<td><?php echo "$company";?></td>
<td><?php echo "$jobdescription";?></td>
<?php $color =($employee_Status=="Obsolete" ? "red" : "green") ; ?>
<td style="color:<?php echo $color; ?> ;font-weight:bold;text-align:center;"><?php echo "$employee_Status";?></td>
<td align="center">
<button type="button" style="background-color:#00a4a4;border-color:#00a4a4;" class="btn btn-primary btn-xs" data-toggle="modal" data-target='#<?php echo "$employee_ID_trim"."SMM"; ?>' style="cursor: pointer;">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<div id='<?php echo "$employee_ID_trim"."SMM"; ?>' class="modal fade" role="dialog" ">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
<?php echo "$employee_Name";?>
</h4>
</div>
<div class="modal-body">
<div class="row" style="padding-bottom:5%;">
<?php echo $msg; ?>
</div>
<div class="row" style="padding-bottom:3%;">
<form id="eventForm" action="../index.php" method ="POST">
<input type="hidden" class="form-control" id="" name="EmployeeId" value="<?php echo "$employee_ID"; ?>" />
<input type="hidden" class="form-control" id="" name="EmployeeName" value="<?php echo "$employee_Name"; ?>" />
<?php
$buttonName = "Assign";
if($SnactionManager == "" || $SnactionManager == "No")
{
?>
<input type="hidden" name="SnManager" value="Yes">
<?php
}
else
{
$buttonName = "Remove";
?>
<input type="hidden" name="SnManager" value="No">
<?php
}
?>
<button type="submit" class="btn btn-primary" value="Assign Manger" name="operation">
<span class="glyphicon glyphicon-ok" ></span>
<?php echo $buttonName; ?>
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">
<span class="glyphicon glyphicon-remove" ></span>
Cancel
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php
} //while
} //else if
} //function
} //class
?>
I want to display search result on click of button, but my code is giving me the search result without click on button.
I think it's giving me the query result not the search result.
This code is working fine when I display the result on the page, but as per my requirement I want to display the search result on a popup.
I have used jquery popup.
<body><form action="#" method="POST"><body><form action="#" method="POST"><div data-role="page">
<div data-role="main" class="ui-content" >
Smart Search
</div>
<div data-role="popup" id="a" class="col-sm-6 ui-content">
<div class="input-group col-sm-8">
<input type="text" name="query" class="form-control" placeholder="Search Products to Buy..." " />
<span class="input-group-btn">
<button name ="search_btn" id ="search class="btn btn-warning" type="submit" value="Search" style="background-color:orange;">Search</button>
</span>
</div><div class="input-group col-sm-8 " ><table class="table table-hover">
<thead >
<tr bgcolor="#1E90FF">
<th>Products</th>
<th>Details</th>
<th>Retailers</th>
<th>Price</th>
<th>Buy</th>
</tr>
</thead>
</div><?php
error_reporting(0);
mysql_connect("localhost", "root", "") or die("Error connecting to database: ".mysql_error());
mysql_select_db("wordpress") or die(mysql_error());
?><?php $query = $_POST['query']; $query = htmlspecialchars($query);
$query = mysql_real_escape_string($query);
$raw_results=mysql_query("select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$query."%'") or die(mysql_error());
if(mysql_num_rows($raw_results) > 0)
{
while($results = mysql_fetch_array($raw_results))
{ ?><div class="input-group col-sm-8" style="text-align:center;margin-top:10px;"><tbody>
<tr>
<td><img src = "<?php echo $results['feed_product_image']; ?>" style="object-fit:contain;height:70px;width:100px;" /></td>
<td><?php echo "<p>".$results['feed_product_name']. "</p>" ; ?></td>
<td><img src = "<?php echo $results['image']; ?>" style="background-size:contain;height:40px;width:120px;" /></td>
<td><?php echo '<i class="fa fa-inr"> '.$results['price']. '</i>'.".00" ; ?></td>
<td>Buy now</td>
</tr>
</tbody>
</div>
<?php
}
}
else
{ // if there is no matching rows do following
echo "No results";
}
?>
</div>
</form>
</div>
This will give you search results in modal popup. I have changed your code around a bit. You can popup in case of no search results too.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content" >
Smart Search
</div>
<div data-role="popup" id="a" class="col-sm-6 ui-content">
<div class="input-group col-sm-8">
<form method="POST">
<input type="text" name="query" class="form-control" placeholder="Search Products to Buy..." " />
<span class="input-group-btn">
<button name ="search_btn" id ="search" class="btn btn-warning" type="submit" value="Search" style="background-color:orange;">Search</button>
</span>
</form>
</div>
<?php
if(isset($_POST['query']) && $_POST['query']!="" ) {
error_reporting(0);
mysql_connect("localhost", "root", "") or die("Error connecting to database: ".mysql_error());
mysql_select_db("wordpress") or die(mysql_error());
$query = $_POST['query']; $query = htmlspecialchars($query);
$query = mysql_real_escape_string($query);
$raw_results=mysql_query("select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$query."%'") or die(mysql_error());
if(mysql_num_rows($raw_results) > 0)
{
?>
<div class="input-group col-sm-8 modal-box" id="popup" title="Search Results" style="text-align:center;margin-top:10px;">
<table class="table table-hover">
<thead >
<tr bgcolor="#1E90FF">
<th>Products</th>
<th>Details</th>
<th>Retailers</th>
<th>Price</th>
<th>Buy</th>
</tr>
</thead>
<tbody>
<?php
while($results = mysql_fetch_array($raw_results))
{ ?>
<tr>
<td><img src = "<?php echo $results['feed_product_image']; ?>" style="object-fit:contain;height:70px;width:100px;" /></td>
<td><?php echo "<p>".$results['feed_product_name']. "</p>" ; ?></td>
<td><img src = "<?php echo $results['image']; ?>" style="background-size:contain;height:40px;width:120px;" /></td>
<td><?php echo '<i class="fa fa-inr"> '.$results['price']. '</i>'.".00" ; ?></td>
<td>Buy now</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<?php
}
else
{ // if there is no matching rows do following
echo "No results";
}
}
?>
</div>
</form>
</div>
<script>
$(function() {
$( "#popup" ).dialog();
});
</script>
So in a table i have used substr to only display a certain amount of words in the table because the data is quite excessive and i've been successful in doing that. However i am now encountering a table when trying to display all the data in a modal when the user clicks the 'Full View' icon.
The table looks like this:
however in the modal i get this back:
As you can see it's adopted the 'substr' and is only returning the number of words specified however i want it to return the whole thing.
Any suggestions on how i can achieve this without losing the limit on the table.
this is the code for the file:
<h4><center>View All Proposals</center></h4>
<div class = "container container-fluid"id = "table_container" style="width:auto; margin-top:50px;" class="mainbox col-md-6">
<div class="row clearfix">
<div class="col-md-12">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
Proposal ID
</th>
<th class="text-center">
Proposal Title
</th>
<th class="text-center">
Proposal Description
</th>
<th class="text-center">
Course
</th>
<th class="text-center">
Tags
</th>
</tr>
</thead>
<tbody>
<!-- populating the table with information from mysql database -->
<?php foreach ($proposals as $proposal) {
echo "<tr><td>";
echo $proposal['proposal_id'];
echo "</td><td>";
echo substr($proposal['proposal_title'],0,30) ."...";
echo "</td><td>";
echo substr($proposal['description'],0,50) ."...";
echo "</td><td>";
echo $proposal['course_title'];
echo "</td><td>";
echo $proposal['tag_title'];
echo "</td><td>";
echo '<p data-placement="top"
data-toggle="tooltip"
style="margin-left:5px"
title="Full View">';
echo '<button class="btn btn-info btn-xs"
data-title="View"
data-toggle="modal"
data-id="';
echo $proposal['proposal_id'];
echo '" data-proposal="';
echo substr($proposal['proposal_title'],0,30) ."...";
echo '" data-desc="';
echo substr($proposal['description'],0,50) ."...";
echo '" data-course="';
echo $proposal['course_title'];
echo '" data-tag="';
echo $proposal['tag_title'];
echo '" data-target="#viewModal">';
echo '<span class="glyphicon glyphicon-eye-open" />';
echo '</button></p>';
echo "</td>";
echo "</td><td>";
echo '<p data-placement="top"
data-toggle="tooltip"
style="margin-left:5px"
title="Print">';
echo '<button class="btn btn-primary btn-xs"
data-title="Print"
data-toggle="modal"
data-id="';
echo $proposal['proposal_id'];
echo '" data-proposal="';
echo $proposal['proposal_title'];
echo '" data-desc="';
echo $proposal['description'];
echo '" data-course="';
echo $proposal['course_title'];
echo '" data-tag="';
echo $proposal['tag_title'];
echo '" data-target="#printModal">';
echo '<span class="glyphicon glyphicon-print" />';
echo '</button></p>';
echo "</tr>"; }
?>
</tbody>
</table>
</div>
</div>
</div>
the modal:
<div id="viewModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">View Proposal: </h4>
</div>
<div class="modal-body">
<form id="viewForm">
<div class="form-group">
<label for="code" class="control-label">Proposal ID:</label>
<input type="text" class="form-control" id="proposal_id" name="user_record_id" readonly="">
</div>
<div class="form-group">
<label for="title" class="control-label">Proposal Title:</label>
<input type="text" class="form-control" id="proposal_title_id" name="proposal_title">
</div>
<div class="form-group">
<label for="title" class="control-label">Proposal Description:</label>
<input type="text" class="form-control" id="desc_id" name="description">
</div>
<div class="form-group">
<label for="title" class="control-label">Course:</label>
<input type="text" class="form-control" id="course_id" name="course_title">
</div>
</form>
</div>
<div class="modal-footer">
<button id="cancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
the js for the modal:
<script>
$(function(){
$('#viewModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var proposal_id = button.data('id');
var proposal_title = button.data('proposal');
var description = button.data('desc');
var course_title = button.data('course');
var modal = $(this);
modal.find('.modal-title').text('View Proposal: ' + proposal_id);
modal.find('.modal-body #proposal_id').val(proposal_id);
modal.find('.modal-body #proposal_title_id').val(proposal_title);
modal.find('.modal-body #desc_id').val(description);
modal.find('.modal-body #course_id').val(course_title);
});
});
</script>
sql for php file:
$stmt = $db_conx->prepare('SELECT DISTINCT p.proposal_id, p.proposal_title, p.description, c.course_title, t.tag_title FROM proposal p LEFT JOIN proposal_tags pt on pt.proposal_id = p.proposal_id LEFT JOIN tag_details t on t.tag_code = pt.tag_code LEFT JOIN course_details c on c.course_code = p.course_code');
$stmt->execute();
//$count = $stmt>rowCount();
$proposals = $stmt->fetchAll(PDO::FETCH_ASSOC);
Thanks in advance!